Gutenberg alignments

gistfile1.txt

<!-- wp:paragraph -->
<p>This post will attempt to document all of the ways alignment can be assigned.  Note that how the PAGE TEMPLATE is built that this content is shown on has much to do with how the items below will lay out.  It is assumed that the post-content block in the template DOES have 'inherit layout' applied and is the top level container.  </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>No Containing It</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a paragraph.  It is a default paragraph inside no container.  It should be the "regular" content with.  When the window is WIDER than the "normal" width this paragraph block should be exactly as wide as the "normal width" is configured to be.  When the window is anything smaller than that this paragraph should have space between it and the edge of the window.</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"style":{"color":{"background":"#0071a1"}}} -->
<p class="has-background" style="background-color:#0071a1">This is also a paragraph that is not contained.  However it does have a background color set.  It is at the discretion of the theme as to how that situation is handled and what (if any) padding there is because of this background color.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>This is a picture all by itself.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"align":"wide","id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignwide size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>This one is wide.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"align":"full","id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>This one is VERY wide.  So wide that I would call it FULL WIDTH.  This full width image should go all the way to the edge of the viewport.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Groupthink</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"border":{"color":"#0071a1","style":"solid","width":"1px"}},"layout":{"inherit":false}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is a paragraph in a group.  The group does not have any alignment assignments, therefore the width of this group should follow the same rules as the paragraph.  It is expected that the text in this group align with the text above (which is not in a group).</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>This is that picture that you will continue to see throughout this document.  It's in the group too.</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"color":{"background":"#0071a1"}},"className":"has-background"} -->
<div class="wp-block-group has-background" style="background-color:#0071a1"><!-- wp:paragraph -->
<p>This is a paragraph in a group with a background color.  It is the responsibility and discretion of the theme to apply space around a paragraph block that is inside of a group block that has a background color.  </p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"border":{"color":"#0071a1","style":"solid","width":"1px"}}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is a paragraph in a group.  There will also be another group nested within the group this paragraph is in.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is the paragraph that resides in that second group.  That's two groups, neither of which are "inheriting default layout" or otherwise configuring layout in any way.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"border":{"width":"1px","style":"solid","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is text in a group that <strong>is</strong> inheriting the default layout.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3} -->
<h3>Wide Load</h3>
<!-- /wp:heading -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"1px","color":"#0071a1","style":"solid"}}} -->
<div class="wp-block-group alignwide has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is a paragraph in a group block that has been set to "wide width".  The behavior of this should be the same as the above groups without a "wide width" setting applied, but with the "wide width" value instead of the "normal width" value.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>And here is that picture placed in the wide group.</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"1px","style":"solid","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignwide has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is text in a group set to "wide width" that is inheriting the default layout.  The text should be "normal" width while the group is wide.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>And so too should the picture.</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","style":{"border":{"color":"#0071a1"},"color":{"background":"#0071a1"}}} -->
<div class="wp-block-group alignwide has-border-color has-background" style="background-color:#0071a1;border-color:#0071a1"><!-- wp:paragraph -->
<p>This is a paragraph in a group block that has been set to "wide width" and is the same as the block above except that this group has a background color applied.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"1px","style":"solid","color":"#0071a1"}}} -->
<div class="wp-block-group alignwide has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This one starts out with a "wide" group.  Nested in that "wide group" is another group that is inheriting the default layout.  Inside that group is the text you are reading.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"1px","style":"solid","color":"#0071a1"}}} -->
<div class="wp-block-group alignwide has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:group {"align":"wide","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignwide has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This one starts out with a "wide" group inheriting the default layout.  Nested in that "wide group" is another group and inside that group is the text you are reading.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2>One Step Closer to the Edge</h2>
<!-- /wp:heading -->

<!-- wp:group {"align":"full","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is a paragraph in a group that is FULL width.  This Full Width group should go ALL THE WAY to the edge of the available viewport, no matter how wide that viewport is.  There should always be a gap between the paragraph and the edges of this group.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>The picture will align with the above paragraph.  In this scenario it's expected that the image will have a gap between it and the edge of the group (and thus the viewport).</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is a paragraph in a group that is FULL width and also configured to inherit layout.  This Full Width group should go ALL THE WAY to the edge of the available viewport, no matter how wide that viewport is.  The text, however, should be normal width.  There should always be a gap between the text and the edge no matter how wide the viewport.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"border":{"color":"#0071a1"},"color":{"background":"#0071a1"}}} -->
<div class="wp-block-group alignfull has-border-color has-background" style="background-color:#0071a1;border-color:#0071a1"><!-- wp:paragraph -->
<p>This is a paragraph in a group that is FULL width and that group has a background color set.  This Full Width group, in all its background color glory, should go ALL THE WAY to the edge of the available viewport, no matter how wide that viewport is.  There should be a gap between the paragraph and the edges of this group.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"border":{"width":"1px","style":"solid","color":"#0071a1"}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This one starts out with a "full width" group.  This text is just inside of that group. It's good to make sure that the text does indeed go all the way to the edge of a block.  And that can take a lot of text in this kind of situation.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":false}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>Nested in that "full width" group is another group and inside of that group is the text you are reading.  You should read it twice.  Go ahead, I'll wait.  Read it again.  Did you read it again?  Did you really?  Or did you just read to the end and say to yourself "I'll just pretend I read it all again"?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>Nested in that "full width" group is another group which has been configured to inherit the default layout. Inside of that group is the text you are reading.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"border":{"width":"1px","style":"solid","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This is a "full width" group that is inheriting the default layout.  It will contain a couple of other things that can be set to "wide" and "full widths.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":872,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://theamdemo.files.wordpress.com/2020/10/019a5-502a1-philipe-cavalcante-xe68qimadrq-unsplash.jpg?w=1024" alt="" class="wp-image-872"/><figcaption>This picture is one of those things set to FULL WIDTH.  It should go all the way to the edge of the group thus filling the viewport.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:group {"align":"wide","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignwide has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>Next in this "full width" group is another group which has been configured to have a <strong>wide width</strong> and inside of that group is the text you are reading.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>Last in that "full width" group is another group which has been configured to also have a <strong>full width</strong>. Inside of that group is the text you are reading. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2>Cover your butt</h2>
<!-- /wp:heading -->

<!-- wp:cover {"customOverlayColor":"#0071a1"} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#0071a1"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This here is a cover block.  Nothing special, just a cover block.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:cover {"customOverlayColor":"#0071a1","align":"wide"} -->
<div class="wp-block-cover alignwide"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#0071a1"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This cover block is a LITTLE more special.  It has been set to 'wide' width.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:cover {"customOverlayColor":"#0071a1","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#0071a1"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">And this is that cover block again, but all the way wide.  Like so wide that it's FULL of its self.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This part here starts off with a full width group...</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"customOverlayColor":"#0071a1"} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#0071a1"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">and then there is a cover block inside of that full width group.  It should have a gap between it and the edge.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","style":{"border":{"style":"solid","width":"1px","color":"#0071a1"}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-border-color" style="border-color:#0071a1;border-style:solid;border-width:1px"><!-- wp:paragraph -->
<p>This part here also starts off with a full width group but this one is inheriting layout...</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"customOverlayColor":"#0071a1","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#0071a1"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">and then there is a cover block inside of that full width group.  It is set to "full width" and it should NOT have a gap between it and the edge.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3} -->
<h3>Featuring</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Below are some examples of the featured image block (configured as normal, wide then full).  First by themselves...</p>
<!-- /wp:paragraph -->

<!-- wp:post-featured-image /-->

<!-- wp:post-featured-image {"align":"wide"} /-->

<!-- wp:post-featured-image {"align":"full"} /-->