Gutenberg Adds Two New Alignment Classes

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.