<!-- wp:group {"customBackgroundColor":"#d8f6ec"} -->
<div class="wp-block-group has-background" style="background-color:#d8f6ec"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>The Layout Elements category includes the following blocks: <em>Group, Button, Columns, Media &amp; Text, separator, spacer, read more, and page break.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This group block has a light green background color.</p>
<!-- /wp:paragraph -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">A button</a></div>
<!-- /wp:button -->

<!-- wp:paragraph -->
<p>The read more block should be right below this text, but only on list pages of themes that show the full content. It won't show on the single page or on themes showing excerpts.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:columns {"className":"has-4-columns"} -->
<div class="wp-block-columns has-4-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>The columns:</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column two.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column three.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column four.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:media-text {"mediaId":757,"mediaType":"image"} -->
<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://luxury.test/wp-content/uploads/2008/06/dcp_2082.jpg" alt="Boardwalk" class="wp-image-757"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">Media &amp;Text</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For displaying media and text next to each other. By default, the media is to the left.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"align":"full","customBackgroundColor":"#ebf5fe","mediaPosition":"right","mediaId":755,"mediaType":"image","isStackedOnMobile":true} -->
<div class="wp-block-media-text alignfull has-media-on-the-right has-background is-stacked-on-mobile" style="background-color:#ebf5fe"><figure class="wp-block-media-text__media"><img src="http://luxury.test/wp-content/uploads/2008/06/100_5540.jpg" alt="Golden Gate Bridge" class="wp-image-755"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">This time our block is full width, and the image is to the right.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The background color is a pale blue.&nbsp;</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:paragraph -->
<p>Test to make sure that the editor and the front match.&nbsp;To test the <em>Stack on mobile </em>setting, reduce the browser window width.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The control these settings, the block uses the css classes "has-media-on-the-right" and "is-stacked-on-mobile".</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The separator has three styles: default, wide line, and dots.</p>
<!-- /wp:paragraph -->

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

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

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

<!-- wp:paragraph -->
<p>The spacer block has a default height of 100 pixels:</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>And finally, the page break:</p>
<!-- /wp:paragraph -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:paragraph -->
<p>This paragraph block is on page two, after the page break.</p>
<!-- /wp:paragraph -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="https://wpthemetestdata.wordpress.com/2018/11/03/block-button/">another button</a></div>
<!-- /wp:button -->