Block markup updates for image, quote, list and group blocks

Image 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. alignments

Historically, the image block with left, right or center alignments used to have an extra div wrapper around the figure tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) to help with alignment styling.

<div class="wp-block-image alignleft"><figure><img src="someimage.jpg" alt="" width="100" height="100"/></figure></div>

In WordPress 6.0, for themes that support the layout feature, this wrapper has been removed. The markup becomes:

<figure class="wp-block-image alignleft"><img src="someimage.jpg" alt="" width="100" height="100"/></figure>

The new markup/behavior for alignment classes is consistent regardless of the block and regardless of the chosen alignment.

To minimize the impact of this change on the websites, this change is only effective for themes with a theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file. These themes do support the “layout” feature which automatically provides the right styles for this new markup.

Quotes and lists

The blockquote, ul and ol tag names all now come with a default value for `box-sizing` equal to `border-box`. This change has been made as a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fix for quote and list blocks using background colors or padding.

Group block stack variation

The new Stack block is a variation of the Group block, and can be thought of as a vertical variant of the Row block. It’s a flex container, meaning it has access to content justifications and block spacing. If combined with the Row block and its ability to optionally wrap onto new lines, it can enable basic responsive behaviors, such as two columns that stack to a single column on smaller displays.

Removal of data-align div wrappers

In the editor and to support/style block alignments, the editor used to add wrapper divs to any block that had an alignment applied to it.
For themes that support the layout feature (with theme.json file), the div wrapper with the `data-align` attribute has been removed. The markup now matches exactly the frontend output.

#6-0, #dev-notes, #dev-notes-6-0