New WordPress alignment classes introduced by Gutenberg. Currently WordPress uses three alignment classes –
.aligncenter. Gutenberg is adding two more additional classes –
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
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
The two new alignment classes Gutenberg uses are styled as follows:
.alignwidecontent 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 (`
.alignfullcontent 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 (
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.