Pattern Submission: Simple Restaurant Menu

[bgardner]

There are thousands of independently-owned restaurants that might look to build their website with WordPress. The Simple Restaurant Menu pattern gives them a one-click path towards making this happen.

---

Pattern Title

Simple Restaurant Menu

Pattern Categories

Groups, Columns, Header, Text, Image, Spacer

Screenshots

Image Credits

https://unsplash.com/photos/N_Y88TWmGwA

Block Markup

https://gist.github.com/bgardner/9d382f475470b40024c8aeac7bf33185

[beafialho]

Thanks @bgardner, this is definitely a useful pattern and it looks very elegant! I have a few suggestions:

• Replacing the photo by a CC0 License image (unfortunately Unsplash isn't CC0)
• Replacing Lorem ipsum with some fake content
• Borders are only possible right now with Twenty Twenty, so we should leave it without a border

How do you feel about it? Here's the markup if you want to check it out.

<div class="wp-block-group alignwide is-style-default has-white-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"align":"center","id":858,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/06/StockSnap_FWJC3SUNGR-1024x683.jpg" alt="" class="wp-image-858"/></figure></div>
<!-- /wp:image -->

<!-- wp:spacer {"height":25} -->
<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":48}}} -->
<h2 class="has-text-align-center" style="font-size:48px"><strong>Menu</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">A selection of artisan goods.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"level":3,"className":"has-letter-spacing-half is-uppercase"} -->
<h3 class="has-letter-spacing-half is-uppercase"><strong>Starters</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>. . .</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Roasted Eggplant — $13</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Our specialty is a roasted eggplant with truffles.</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Sea Bass Ceviche — $32</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Taste our astounding sea bass ceviche with lime, avocado, onion, chilli, coriander.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Sautéed Scarlet Shrimp — $40</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Delicious scarlet shrimp prepared with garlic and chilli.</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Alaskan Crab Medallions — $38</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Our crab medallions are carefully served with alioli sauce, melba toasts and guacamole.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"level":3,"className":"has-letter-spacing-half is-uppercase"} -->
<h3 class="has-letter-spacing-half is-uppercase"><strong>Classics</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>. . .</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Tiger Grilled Shrimp — $54</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Served with garlic butter, basmati rice and vegetables.</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Grilled Wagyu Steak — $99</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>A tasty wagyu steak with sweat potato chips and mint sauce.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Salmon Fillet — $32</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Fresh coast salmon served with chickpeas in tomato, peppers and sour cream.</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Fresh Tagliolini — $35</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>This pasta is one of our most famous dishes, served with king cran and chilli pepper.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"level":3,"className":"has-letter-spacing-half is-uppercase"} -->
<h3 class="has-letter-spacing-half is-uppercase"><strong>Desserts</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>. . .</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Chocolate Satisfaisant — $12</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Chocolate mousse, caramel toffee, cookie crumble, creamy chocolate ganache, whipped cream, chocolate crumble pieces.</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Raspberry Puff Pastry — $10</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Caramelized puff pastry, vanilla mousseline cream, raspberry jam and fresh raspberries.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Hazelnut Biscuit — $12</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Crunchy hazelnut, milk chocolate ganache, dulsey chocolate cream.</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size"><strong>Valrhona Fondant — $12</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><em>Biscuit, mousse and Valrhona chocolate cream, cocoa.</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Image: https://stocksnap.io/photo/grilled-food-FWJC3SUNGR

[bgardner]

Thanks @beafialho for making the updates. This looks good to me, just let me know if there is anything else you need from me.

[melchoyce]

Looks good to me!

[melchoyce]

Added this to the directory: https://wordpress.org/patterns/pattern/restaurant-menu/

Ended up subbing out the photo for a painting of food, to fit a little better with the rest of patterns we've added so far.

[beafialho]

Just to give an update we've adapted this pattern to be a little shorter and work better as a portion of an entire webpage: https://wordpress.org/patterns/pattern/restaurant-menu/