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 BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 CSSCSS Cascading Style Sheets. 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 codeLines of Code Lines of code. This is sometimes used as a poor metric for developer productivity, but can also have other uses. 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//themes

#5-3, #core-editor, #core-themes, #dev-notes