New WordPress alignment classes introduced by Gutenberg. Currently WordPress uses three alignment classes – .alignleft
, .alignright
and .aligncenter
. Gutenberg is adding two more additional classes – .alignwide
and .alignfull
.
Usage and Behavior
These styles are based on the assumption that you wrap your entire site’s content in a .site div and limit the maximum width of it to a certain value that no content, except special fullwidth content, should exceed (see $site_maxwidth
).
In addition to that, you should limit the maximum width of the actual post content even further, which is useful anyway so that lines don’t get too long and reading flow stays good (see $site_maxwidth-text
).
The two new alignment classes Gutenberg uses are styled as follows:
.alignwide
content keeps the regular padding, but scales wider than the regular width for post content ($site_maxwidth-text
). It is still capped at the maximum width of the site (`$site_maxwidth
)..alignfull
content gets rid of the regular padding, and always scales as wide as the full document width. So it even ignores the common maximum width of the site ($site_maxwidth
).
Note that the styles for .alignwide
and .alignfull
classes require the post content to not have any other content beside it (for example a sidebar). They will not receive any special treatment if there is a sidebar or any other content. Apply a .no-sidebar class to your body in order for the rules to become effective.
Source & Credit: The above text was directly lifted from Felix Arntz post in gist.github.com/felixarntz/wp-alignment-classes.