WordPress 5.3 includes a lot of additions and refactoring to existing blocks in order to support new features. Some of this features require special care from theme authors in order to optimize the Block Editor theme integration.
The Group block
A Group block to act as an all-purpose container for other blocks has been introduce. If a theme does not support wide and full alignments, no CSS changes should be necessary.
If a theme does support for wide and full alignments, some additional theme styles may be required to ensure child blocks appear as intended: depending on how your CSS is written, a theme’s usual alignwide and alignfull styles may not appear as intended when they’re applied inside of a Group block.
The Group block contains an inner container (wp-block-group__inner-container) to help make styling easier. In many cases, that div can be used as a proxy for entry-content styles, allowing wide and full child blocks to appear as intended without modification.
To illustrate this, here’s a simplified example of a common method for implementing wide and full block layout on the front end, using negative margins:
.entry-content {
width: 60vw;
margin: 0 auto;
}
.alignwide {
margin-left: -10vw;
width: 80vw;
}
.alignfull {
margin-left: -20vw;
width: 100vw;
}
In this scenario, only a few additional lines of code are necessary to implement Group block styles:
// Apply entry-content styles to the group block’s inner container as well.
.entry-content,
.wp-block-group__inner-container {
width: 60vw;
margin: 0 auto;
}
// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container.
.alignwide,
.wp-block-group.alignwide .alignfull {
margin-left: -10vw;
width: 80vw;
}
.alignfull {
margin-left: -20vw;
width: 100vw;
}
// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
max-width: 100%;
margin-left: 0;
}
Related PRs: 13964.
Reduced Block Styles specificity
In WordPress 5.3, the specificity of block editor CSS has been reduced. Specifically it changes how default block margins are applied, now targeting [data-block]. This should give more control to theme and plugin developers.
By default, all blocks will be born with a base margin. You can set that margin to zero in an editor-style:
[data-block] {
margin-top: 0;
margin-bottom: 0;
}
Related PRs: 14407.
Using class names for text alignment
In the previous versions of WordPress, inline styles were used to change the text alignment for the following core blocks:
- Heading
- Paragraph
- Quote
- Verse
This produced high CSS specificity making it very hard for theme authors to customize the look of those blocks. WordPress 5.3 uses classnames for text alignment to address these issues:
-
has-text-align-right – when block’s text is aligned to the right
-
has-text-align-center – when block’s text is aligned to the center
-
has-text-align-left – when block’s text is aligned to the left
All previously published posts should work as before. The affected blocks will automatically get converted to use the corresponding class names as soon as they are opened and saved in the block editor.
Related PRs: 16035, 16777, 16779, 16794.
Columns block classnames
The columns block have been updated to support custom widths per column. This led to the removal of the has-x-columns classname. Themes could have potentially relied on this classname to set the width of the columns.
Related PRs: 16129.
Color support for the separator block
The separator block now supports custom colors, this may impact themes that defines the separator color manually in their stylesheets. Themes should assign default colors to the separator only if the user didn’t apply a color explicitly. You can check the fix that was applied to the Twenty Nineteen theme to see how to achieve this.
https://core.trac.wordpress.org/attachment/ticket/47811/47811.patch
Related PRs: 16784.
Table block markup update
The table block is now wrapped in a <figure> element, so that <table class="wp-block-table"> has been replaced by <figure class="wp-block-table"><table>. This is to allow large tables to horizontally scroll within the figure container instead of forcing cell content to break and become unreadable on small screens.
Themes may be impacted by this change if they have used chained selectors like table.wp-block-table for styling. Themes should now instead use .wp-block-table to target the container, or .wp-block-table table to target the table element itself.
Related PRs: 16324.
Gallery block markup update
The gallery block is now wrapped in a <figure> element as well and may optionally contain a <figcaption> as a caption for the whole gallery.
Themes can style the caption using the classname .blocks-gallery-caption. The markup change will affect any themes using chained selectors such as ul.wp-block-gallery to style galleries. Themes should now instead use only .wp-block-gallery to style the container and the new .blocks-gallery-grid classname to style the ul element itself.
Related PRs: 17101.
Props to @kjellr, @joen, @gziolo, @assassinateur and @isabel_brison for helping with this dev note.
+make.wordpress.org/themes
#5-3, #core-editor, #core-themes, #dev-notes
