Miscellaneous Editor changes in WordPress 6.6

In this post, you will find dev notesdev 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. for smaller changes to the editor in WordPress 6.6.


Table of contents


Added wp-block-list class to the list 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.

Styling a list block using the Site Editor or 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. also applied the style to other lists, partially or in full. This caused styling conflicts with blocks that use lists internally and with lists in the editor interface.

The problem has been fixed by adding the CSSCSS Cascading Style Sheets. class wp-block-list to the <ul> and <ol> elements of the list block, and only applying the styling to lists with this class name.

If you have relied on the list block styles to style generic lists, you may need to update your CSS.

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ pull request: #56469

Props to @poena for writing the 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..

Allow view access of the template REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoint to anyone with the edit_post capability

Before WordPress 6.6 the templates and template-parts REST API endpoints were restricted to only be viewed/edited by anyone with the edit_theme_options capability (Administrators). WordPress 6.6 changes the permission checks to allow any user role with the edit_post capability to view these endpoints. Editing is still restricted to the edit_theme_options capability.

This change is because the post editor now includes the ability to preview a post’s template while editing the post. In WordPress 6.5, this option was limited to administrators only. However, WordPress 6.6 now supports previewing the template for all user roles.

GitHub pull request: #60317

Props to @fabiankaegy for writing the dev note.

Unified split logic for writing flow

RichText’s optional onSplit prop was deprecated and replaced with a block.json support key called splitting. The onSplit prop was only used by a few coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks (paragraph, heading, list item, and button), so it’s not expected that this affects a lot of third-party blocks.

In any case, when the onSplit is used, splitting will still work but can’t be controlled as granularly as before: the callback won’t be called, and the block will split in a generic way.

GitHub pull request: #54543

Props to @ellatrix for writing the dev note.

BlockPopover Component is now public

The BlockPopover component is now publicly accessible. For more details, you can check the README.

GitHub pull request: #61529

Props to @gigitux for writing the dev note.

Add filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to modify the list of post content block types

When WordPress renders a post/page’s template at the same time as the content, most template blocks are disabled/locked. However, some blocks, like the Post Title, Post Content, and Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., still allow users to edit the content within them. They get rendered in the contentOnly rendering mode.

WordPress 6.6 now adds a filter to modify this list of blocks that should get the contentOnly rendering mode applied when rendered as part of the template preview.

import { addFilter } from '@wordpress/hooks';

function addCustomPostContentBlockTypes( blockTypes ) {
    return [ ...blockTypes, 'namespace/hello-world' ];
}

addFilter(
    'editor.postContentBlockTypes',
    'namespace/add-custom-post-content-block-types',
    addCustomPostContentBlockTypes
);

It is important that only settings that store their data in custom ways are exposed when rendered in this contentOnly mode. An example is a block that stores a subtitle in post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. Anything that gets stored to the standard block attributes won’t persist.

GitHub pull request: #60068

Props to @fabiankaegy for writing the dev note.

Global Styles: Filter out color and typography variations

In addition to style variations, WordPress 6.6 adds the ability for themes to create color and typography presets. These are subsets of style variations and give users the ability to replace the color or typography of a site without all the other changes that come in a style variation.

To add color and typography presets to a theme, developers follow the same process as adding style variations, except that each variation must contain only color or typography rules. Any style variations that contain only these rules will be treated as presets and will appear under Global Styles > Typography or Global Styles > Colors > Palette.

Style variations that already conform to this requirement, i.e. they contain only color or typography rules, will automatically be treated in this way. That means these style variations will no longer appear under Global Styles > Browse styles, but instead in the relevant section for either colors or typography.

GitHub pull request: #60220

Props to @scruffian for writing the dev note.

Add custom Aspect Ratio presets through theme.json

WordPress 6.6 adds a new two new properties to the settings.dimensions object in theme.json. settings.dimensions.aspectRatios allows defining your own custom Aspect Ratio presets. These presets will be used by any block that uses the aspectRatio block support. In core that means the Image, Featured Image, and Cover block.

{
    "version": 2,
    "settings": {
        "dimensions": {
            "aspectRatios": [
                {
                     "name": "Square - 1:1",
                     "slug": "square",
                     "ratio": "1"
                 },
                 {
                     "name": "Standard - 4:3",
                     "slug": "4-3",
                     "ratio": "4/3"
                 },
            ]
        }
    }
}

Additionally the settings.dimensions.defaultAspectRatios key allows you to disable the list of core aspect ratio presets.

{
    "version": 2,
    "settings": {
        "dimensions": {
            "defaultAspectRatios": false
        }
    }
}

GitHub pull request: #47271

Props to @fabiankaegy for writing the dev note.

Root padding style updates

Root padding styles have been updated to address inconsistencies in pattern display and make the application of padding more predictable across different sets of markup. It’s now expected that:

  • Padding is applied to the outermost block with constrained layout (this is the layout enabled when “Inner blocks use content width” is set).
  • Padding is applied to all blocks with constrained layout that are full width or wide width.
  • Padding is applied to all blocks with constrained layout inside a full width flow layout (this is the layout enabled when “Inner blocks use content width” is unset) block.
  • Nested full width blocks will always be full width: a full width block inside another full width block will extend to the edges of the viewport.

GitHub pull request: #60715

Props to @isabel_brison for writing the dev note.

Added Text alignment block support

WordPress 6.6 adds new block support for setting the horizontal alignment of text.

This support is controlled by settings.typography.textAlign in theme.json, which defaults to true. To opt-in to this support for a block, add the supports.typography.textAlign field in block.json. For example:

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "gutenpride/my-block",
    "title": "My Block",
    "supports": {
        "typography": {
            "textAlign": true
        }
    }
}

Currently, core blocks do not support textAlign and the Text Alignment UIUI User interface is implemented separately without this block support. In the future, it is planned to gradually migrate core blocks to this support as well, and progress will be tracked in this Github issue: #60763.

The default horizontal alignment style can also be defined via theme.json. For example:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "styles": {
        "blocks": {
            "core/heading": {
                "typography": {
                    "textAlign": "center"
                }
            }
        }
    }
}

There is a known issue where the default horizontal alignment defined in the global styles or theme.json cannot be overridden on a block instance, which is currently being addressed in #62260.

GitHub pull request: #59531

Props to @wildworks for writing the dev note.


Props to @juanmaguitar for review.

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