Block Editor Handbook: restructuring project update (15 January)

This post is the first in a series that will be published regularly on the Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site). The purpose of this series is to keep everyone up to date on the progress of 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 Handbook restructuring project.

Currently, we are working on improving the handbook’s homepage. The goal is to make this page a real “Getting Started” page.

Someone coming to this page should be able to have a good overview of what the block editor is all about. They should also be able to find references to how to extend the block editor, how to contribute to it, or to the documentation of its main concepts.

The issue related to the handbook homepage improvement is here and here is the corresponding pull request.

Thanks to all the contributors who helped on the project this week 👏🏻.

#block-editor, #developer-documentation

Editor chat summary: Wednesday, 9 December 2020

This post summarizes the weekly editor chat meeting on Wednesday, 9 December 2020, 14:00 UTC held in Slack.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.5.1

We had a minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. to fix three bugs. The details of the fixes can be checked in the release page.

WordPress 5.6

WordPress 5.6 was recently released, more details can be found here.

The release contains several enhancements to the editor. @isabel_brison made an overview post with the changes https://make.wordpress.org/core/2020/12/03/wordpress-5-6-core-editor-overview/.

Besides the editor enhancements, the 2021 theme is also a big step. It will have an equivalent 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. version that will test how robust is FSE and Global Styles to allow third-party themes.

@youknowriad said: Nice work @isabel_brison and others leading the editor side of the release. And the message was well supported on the chat using slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. reactions. Thank you for all the work made leading the editor side of this release @isabel_brison!!


Monthly Plan and key project updates.

WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. screen

Widgets and customizer screen are still continuing with explorations going on to find the best way to add blocks support in customizer. 

Global Styles

We merged an update that makes client preset metadata match the server. ” – https://github.com/WordPress/gutenberg/pull/27453. And now we are also not passing some metadata to the client like selectors https://github.com/WordPress/gutenberg/pull/27449.
The work to make 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. translatable continues.
We are making some changes, namely removing some presets we are not totally convinced yet they should exist.
We already have some traction on the work to enhance our components to allow a better UXUX User experience on Global Styles; @q proposed the addition of some utils.
We also have some progress on the Global Styles extensibility with some filters being proposed https://github.com/WordPress/gutenberg/pull/27509.

Full site editing

The Query block now inherits the global query so FSE themes can add a query block in the index or archive templates and it will work for all archives, properly getting the query context from the visitor’s URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: https://github.com/WordPress/gutenberg/pull/27128.

Template-parts now have a UIUI User interface to select the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element that will be used for their wrapper: https://github.com/WordPress/gutenberg/pull/27101 so they can define easier if it’s, etc.

The inserter was also improved and behaves as popover. The editor now has an outline mode used in both Site Editor and Template mode.

Native Mobile APP Updates

  • File block merged and usable.
  • Post’s Save dialog fixes.
  • Background and text color support in Group, Paragraph and Quote blocks
  • Use new link picker in various blocks: Button, Image, Gallery
  • Improvements on Separator block style
  • E2E tests execution improvement.
  • Release process documentation improvements.

An app release is going to be skipped because of New Year’s and people taking holidays on these days.

Task Coordination

@annezazu

Helped a bit with 5.6 Q&A docs, light GH triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., continued working with @noisysocks on updating the features page and updating the issue templates, worked on FSE program preparation (including adding a welcome bot there and digging into current/recently merged PRs!), and dug in a bit to block directory adoption. Plans to do much of the same in the week ahead!.

@itsjonq

Continued the efforts of improving the Component System for Gutenberg.
The latest update is a (draft) pull-request to bring in the UI libraries/systems Has been working on (aka. “G2 Components”) https://github.com/WordPress/gutenberg/pull/27594. @itsjonq gave a thank you to @youknowriad and @gziolo for thoughts/guidance on integration.
@itsjonq said that t’s just the beginning, but it’s looking very promising. As always, @itsjonq tries Livestream design/dev updates on Twitch several times a week.
@itsjonq is also posting weekly updates on the project blogblog (versus network, site):
https://g2components.wordpress.com/.

@paaljoachim

Design triaged Bigger font for various handbooks.
Worked on several documentation tasks namely: Improving the intro page of the Block Editor Handbook and Re-examining introduction tutorials.

@youknowriad

Has been on working on some follow-ups to the addition of the “template mode” in the post editor.
The idea is that as we add features and enhancements, the code base becomes more complex as we take shortcuts so it’s important to circle back and “clean” the code a bit. Has been doing that with some a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., extracting common components and removing unnecessary complexity. Still has a few follow-ups planned. Some refactorings and some more features.

@jorgefilipecosta

Worked on an update that makes client preset metadata match the server. And another one that makes sure we are not passing some metadata to the client like selectors.
Did multiple reviews on Global Styles related work.
Proposed a solution to remove some of the presets we have being back-compatible with markup that uses them.
For the next week, plans on helping the effort to improve our WordPress components with PR reviews comments, feedback, etc. Wants to merge the Gutenberg side of theme.json i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. and iterate and merge the typography presets removal. Also plans on making some progress on the design tooling visibility issue.

@cguntur

Would like to help with the Gutenberg documentation.

@aristath

For next week his main focus will be splitting core block assets loading and revisit progressive loading for FSE.
Would also love it if we could focus on removing auto-drafts for theme-provided templates but that one is a bit tricky as it touches lots of things.

Open floor

@bph bring to the attention of the participants of the chat an issue/question https://github.com/WordPress/gutenberg/issues/27321. @youknowriad shared some guesses of what may be the cause of the issue and @ntsekouras offered to followup and share his findings on the issue.

Skipping coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor chats of 23rd and 30th December

@paaljoachim share the following in the agenda:

I suggest that we skip having a Core Editor meeting the 23rd and 30th December as many will be having their Christmas holiday

People discussed this suggestion, there was no opposition to this suggestion so participants of the chat decided to skip the chats of 23rd and 30th December.

Starting the FSE Outreach Program

@annezazu said the following:

After digging into some recent FSE related PRs and talking with a few people, I wanted to raise the idea of starting the #fse-outreach-experiment after the next Gutenberg release. I think this PR from @youknowriad on a template editing mode is a great place to start but wanted to hear thoughts. Right now though, there aren’t a ton of things lined up to do next. I think this will be okay though as it’ll give an extended period of time for people to test (might be good with this time of year) and it’ll make it easier to tweak what we’re doing after this first round. How does that sound to you all? P.S. I welcome people flagging possible additional things to run through for the group. I try my best to stay on top of things but definitely miss stuff.

@youknowriad shared he agrees that the template editing mode is a good flow to test. He believe the feature in itself is still a little bit rough around the edges but testable.

@annezazu supported riad’s thoughts and concluded that she will get to work fleshing out the details to kick off the program. She welcomes any collaborators who might be interested!

For anyone reading this summary, you can be a part of the program by joining #fse-outreach-experiment channel.

One week RC period

@youknowriad said:

The last releases saw a couple bugs being introduced and to address that I’d like us to discuss the possibility to try a one week RC in Gutenberg 9.6.

The participants of the chat showed support for this idea. The plan is to start having a one week RC period. The next release will still follow the normal schedule, so we give more time of notice to allow publishing the notes of the meeting (this post), and we have a fuller release otherwise it would be just a one-week release which would be very small.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting-notes

New createBlocksFromInnerBlocksTemplate Block API

There is a new 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. APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. in WordPress 5.6: createBlocksFromInnerBlocksTemplate, with which you can create blocks from InnerBlocks template.

Given an array of InnerBlocks templates or Block Objects, it returns an array of created Blocks from them.
It handles the case of having InnerBlocks as Blocks by converting them to the proper format to continue recursively.

This is especially useful for handling block variations, transformations and creation/replacement of blocks which use InnerBlocks template.

An example that would create new blocks from a block variation using InnerBlocks’ template and replace the block’s content is:

import { InnerBlocks } from '@wordpress/block-editor';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { Button, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { BlockControls, useBlockProps } from '@wordpress/block-editor';
import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';

function MyEditBlock( { clientId } ) {
    const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
    const variation = {
        name: 'my-variation',
        title: __( 'My variation' ),
        innerBlocks: [
            [ 'core/paragraph', { content: 'Hello' } ],
            [ 'core/paragraph', { placeholder: __( 'Write title…' ) } ],
        ],
    };
    const onClick = () => {
        replaceInnerBlocks(
            clientId,
            createBlocksFromInnerBlocksTemplate( variation.innerBlocks )
        );
    };
    return (
        <div { ...useBlockProps() }>
            <BlockControls>
                <ToolbarGroup>
                    <ToolbarButton onClick={ onClick }>
                        <span>Change InnerBlocks</span>
                    </ToolbarButton>
                </ToolbarGroup>
            </BlockControls>
            <InnerBlocks />
        </div>
    );
}

See the pull request for implementation details and more.

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

#5-6, #block-editor, #dev-notes

Changes to Toolbar components in WordPress 5.6

Toolbar shouldn’t be used within other toolbars

To better reflect its semantics, the Toolbar component shouldn’t be used to group a set of toolbar controls within another toolbar anymore and will show a deprecation warning if used like so. ToolbarGroup should be used instead.

Before

<BlockControls>
  <Toolbar>
    <ToolbarButton />
  </Toolbar>
</BlockControls>

After

<BlockControls>
  <ToolbarGroup>
    <ToolbarButton />
  </ToolbarGroup>
</BlockControls>

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. toolbars now require controls to be ToolbarButton or ToolbarItem elements

Rendering native <button> or other custom tabbable elements directly as toolbar items (for example, using BlockControls or BlockFormatControls) has been deprecated. In order to improve toolbar accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility), toolbar items now should use ToolbarButton for regular buttons, or ToolbarItem for any other kind of control (for example, dropdowns).

Before

<BlockControls>
  <button />
  <Button />
  <DropdownMenu />
</BlockControls>

After

<BlockControls>
  <ToolbarItem as="button" />
  <ToolbarButton />
  <ToolbarItem>
    { ( itemProps ) => ( <DropdownMenu toggleProps={ itemProps } /> ) }
  </ToolbarItem>
</BlockControls>

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

#5-6, #block-editor, #dev-notes

Editor styling changes in WordPress 5.6

These changes are important enhancements for both accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and user experience on small screens.

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. styles use relative instead of absolute values

Previously, blocks were using hardcoded pixel values for all their sizing properties (paddings, margins, font-sizes etc).

Starting with WordPress 5.6, default block-styles use font-size-relative units (em) making it easier for themes to change the default content font-size without having to rewrite/override all block styles.

Media & Text blocks show media on top in mobile view

Previously, if the stack on mobile behavior was not disabled, and media had the option to appear on the left (the default), on mobile, the media appeared on top and the text on the bottom. If media had the option to appear on the right on mobile when stacked media would appear at the bottom and text on top.

There was feedback that the left/right position of media should not map to top/bottom on mobile and that for a better UXUX User experience on mobile, media should always appear on top. Starting with WordPress, 5.6 media text blocks will have media on top on mobile unless the stack on mobile option is disabled, and in that case, media appears at the side of text like on desktop.

Props to @aristath and @jorgefilipecosta for writing these 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 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..

#5-6, #block-editor, #dev-notes

Reusable Blocks extracted into a separate package

Reusable blocks are a feature available in the post editor. They were previously part of the @wordpress/editor package. To make them available in other editors, they have been moved to a separate package called @wordpress/reusable-blocks.

How it works

To enable reusable blocks in your 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, simply change your <BlockEditorProvider /> as follows:

import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';

const { __experimentalReusableBlocks } = useSelect(
    ( select ) => select( 'core' ).getEntityRecords(
        'postType',
        'wp_block',
    )
);

return (
    <BlockEditorProvider
        settings={ {
            ...settings,
            __experimentalReusableBlocks,
        } }
        { ...props } // value, onInput, onChange, etc.
    >
        <ReusableBlocksMenuItems />
        { children }
    </BlockEditorProvider>
);

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

#5-6, #block-editor, #dev-notes

Block Supports In WordPress 5.6

Several coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and third party blocks share different customization tools. Things like color, background, font size, alignment and others are customizations options 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. authors are likely to add to their own block. To increase the consistency and also make it easier to introduce these options into their blocks, block authors can use the Block supports APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. WordPress 5.6 will see the introduction of a number of new block supports and allows dynamic blocks to use them as well.

Blocks can declare support for style properties

To enable the new block supports, add the desired keys to the “supports” property of the block.json file or directly into the registerBlockType function. The block editor will automatically show a UIUI User interface control for the user to set those values.

supports: {
    color: {
        background: true, // Enable background color UI control.
        gradient: true, // Enable gradient color UI control.
        text: true // Enable text color UI control.
    },
    fontSize: true, // Enable font size UI control.
    lineHeight: true // Enable line height UI control.
}

For some of these properties, the active theme may need to opt-in for them to be enabled. That’s the case of lineHeight, for example.

How it works

When the user interacts with the controls, they will automatically attach the style value to the wrapper element of the block. This works as it did before:

  • If the control offers some preset values and the user selects one of them, a class will be attached with the name .has-<value>-<preset-category> (i.e.: has-normal-font-size).
  • If the user selects a custom value, it’ll be attached as part of the style attribute of the wrapper.

Note that these are attached to the wrapper element of the block, so it works best with blocks that follow the newest apiVersion (see related dev note).

The UI controls that present users with a set of preset values, take them from the corresponding theme supports:

Dynamic blocks support

You can also use the block supports in dynamic blocks by making sure the config is added to the register_block_type server side (or the block.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.) and by rendering the block wrapper attributes in your block’s render callback function:

function my_block_render_callback_function( $attributes ) {
    $wrapper_attributes = get_block_wrapper_attributes();
    $content_markup = "something";
    return sprintf(
        '<div %1$s>%2$s</div>',
        $wrapper_attributes,
        $content_markup
    );
}

In depth

When blocks declare support for a style property, they also gain additional block attributes. These can also be used to set default values:

attributes: {
    backgroundColor: {
        type: 'string',
        default: 'value',
    },
    gradient: {
        type: 'string',
        default: 'value',
    },
    textColor: {
        type: 'string',
        default: 'value',
    },
    fontSize: {
        type: 'string',
        default: 'value'
    },
    style: {
        type: 'Object',
        default: {
            color: {
                background: 'value',
                gradient: 'value',
                link: 'value',
                text: 'value'
            },
            typography: {
                fontSize: 'value',
                lineHeight: 'value',
            }
        }
    }
}

The attributes backgroundColor, gradient, textColor, and fontSize hold any preset values the user has selected. When the user sets a custom value instead, these are stored in the corresponding key within the style attribute. Check out the documentation for more details.

#5-6, #block-editor, #dev-notes

Block API version 2

WordPress 5.6 will come with a new 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. APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. version, enabling blocks to render their own block wrapper element. This is part of a larger effort to lighten the editor content’s DOM tree so that it matches the saved content (and therefore the front-end of the site). The biggest benefit of this is that themes and plugins can more easily style the block content if the markup is the same in the editor.

Enabling API version 2

To use the new API, you must opt-in to to API version 2. If you opt-in to API version 2, you must also render your own block wrapper element with the new API. To opt-in, set the apiVersion property to 2 on the block configuration object.

registerBlockType( name, { apiVersion: 2 } );

useBlockProps

When using API version 2, you must use the new useBlockProps hook in the block’s edit function to mark the block’s wrapper element. The hook will insert attributes and event handlers needed to enable block behaviour. Any attributes you wish to pass to the block element must be passed through useBlockProps and the returned value be spread onto the element.

import { useBlockProps } from '@wordpress/block-editor';

function Edit( { attributes } ) {
    const blockProps = useBlockProps( {
        className: someClassName,
        style: { color: 'blue' },
    } );
    return <p { ...blockProps }>{ attributes.content }</p>;
}

If you wish to use the element ref, you can pass one to useBlockProps.

import { useBlockProps } from '@wordpress/block-editor';

function Edit( { attributes } ) {
    const ref = useRef();
    const blockProps = useBlockProps( { ref } );
    return <p { ...blockProps }>{ attributes.content }</p>;
}

The save function must also use the save equivalent of the hook, useBlockProps.save.

import { useBlockProps } from '@wordpress/block-editor';

function Save( { attributes } ) {
    const blockProps = useBlockProps.save( {
        className: someClassName,
        style: { color: 'blue' },
    } );
    return <p { ...blockProps }>{ attributes.content }</p>;
}

Supporting both versions

If you use API version 2, it is recommended to set the Requires at least  header field to 5.6 so your 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 only updates after WordPress updates to 5.6. If users use an older version of WordPress, they would sensibly also use an older version of your plugin, hopefully encouraging them to update WordPress. It’s possible to do security fixes by releasing patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. versions for the older plugin versions, in case that is a concern.

If you really wish to support both API versions, you will need to register a different edit and save function for the previous version, either by loading a different block registration file entirely, or by passing the WordPress version number to JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. on the front-end and conditionally setting the edit and save function at the time of block registration.

API version 1

The block wrapper element is added by the framework with the contents of Edit inside of it.

function Edit( { attributes } ) {
    return (
        <p className={ someClassName } style={ { color: 'blue' } }>
            { attributes.content }
        </p>
    );
}

API version 2

The block wrapper element must be marked by the Edit component with the useBlockProps hook.

import { useBlockProps } from '@wordpress/block-editor';

function Edit( { attributes } ) {
    const blockProps = useBlockProps( {
        className: someClassName,
        style: { color: 'blue' },
    } );
    return <p { ...blockProps }>{ attributes.content }</p>;
}

#5-6, #block-editor, #dev-notes

Editor chat summary: Wednesday, 21 October 2020

This post summarizes the weekly editor chat meeting on Wednesday, 21 October 2020, 14:00 UTC held in Slack.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 9.2 and WordPress 5.6 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1

@jorgefilipecosta announced Gutenberb 9.2 was released some hours before: https://make.wordpress.org/core/2020/10/21/whats-new-in-gutenberg-21-october/.

Regarding WordPress 5.6 Beta it was released on the previous day as planned: https://wordpress.org/news/2020/10/wordpress-5-6-beta-1/.

Unfortunately the WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Blocks were not part of the WordPress release. More context is available at https://core.trac.wordpress.org/ticket/51506#comment:13.

@jorgefilipecosta referred that there is a must-have board that contains the issues that should be addressed before the next WordPress release https://github.com/WordPress/gutenberg/projects/48. Some of these issues are not yet assigned to anyone so it is a good opportunity for someone looking to contribute and have an impact on the next WordPress release.

Monthly plan updates

Full Site Editing – Navigation – @vindl

  • Pages selector dropdown has been removed in #25620. This functionality is now accessible through the navigation sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., similar to templates.
  • The initial version of Document Settings dropdown in site editor has been completed. It contains basic template info and a button to view all templates.
  • Work is in progress for adding new functionality to the navigation sidebar, most notably the search featuretemplate creation flow, and RTL support.
  • Hover interaction for template parts is on hold after latest round of design feedback and will have to be reworked or abandoned.
  • Old PR for converting blocks selection to template part has been picked up again and updated.

Full Site Editing – Navigation – @ntsekouras

  • The Add sticky support in Query 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. (https://github.com/WordPress/gutenberg/pull/26279) a needs review.
  • Query block enhancements(loading and no results messages, focus Query on insertion)

Global Styles – @jorgefilipecosta

Widgets Screen – @zieladam

  • We are regrouping on #feature-widgets-block-editor to figure out what’s next – anyone interested in this project is welcome to join.
  • Widgets-related work had some positive effects such as widgets APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. endpoints or bringing in support for batch requests in WordPress (props especially to @timothybjacobs and @Jonny Harris).

Task coordination

@jasmussen

Submitted the following PR’s:

@annezazu

Shipped the Block Editor Release Process for Major Releases with major props to our host @jorgefilipecosta and @tellthemachines, reported 13 Widgets Screen related issues to GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/, and lots of additional testing including with the latest for FSE.

@ajlende

  • Woking on a new image-related feature: duotone 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. support #26361.
  • Some of the menu stuff is blocked by #26115 (which @ajlende is currently working on).
  • Cover block support is blocked by #25171.

@mapk

  • Query block
    • Introducing placeholder screen.
    • Creating a new post from block.
    • Swap out patterns for block.
  • Widgets screen
    • Going through feedback and helping with design related issues.

@youknowriad

  • Tried to help a bit with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. package updates and patches for 5.6.
  • Started working on documentation for the new APIs in 5.6.
  • Doing some prototyping related to FSE.
  • Helped a bit with e2e tests (please help there if you have time, we’re not on a great stop at the moment).

@zieladam

@mcsf

  • Focused a lot on rethinking our Block Supports implementation, starting with 26111, then discussing details with @youknowriad and @nosolosw in 26192 and follow-up PRs
  • PR reviews in general

@ntsekouras

  • Add sticky support in Query block(https://github.com/WordPress/gutenberg/pull/26279) – needs review
  • Query block enhancements(loading and no results messages, focus Query on insertion)
  • Recognize and convert old or derivative block types to their canonical form(https://github.com/WordPress/gutenberg/pull/26147)
  • 5.6 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. fixes

@jorgefilipecosta

  • Proposed a PR to generate preset classes on the client-side https://github.com/WordPress/gutenberg/pull/26224.
  • Proposed a PR to use the block settings on the global styles block panel instead of the global ones https://github.com/WordPress/gutenberg/pull/26319.
  • Merged the pass of dynamic editor settings to the block editor on the edit site screen.
  • Iterated and merged the video text tracks functionality.
  • Iterated and merged the columns and group block templateLock control functionality.
  • Fixed a timezone issue that was considered critical and will be backported for older versions. Did an audit to the way we format dates on the frontend and suggested a general fix (we still have issues currently when we use formats with a complete timestamp like ‘c’ used for time HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. elements)
  • Did some PR reviews.

For the next week, will see how we can proceed regarding date-time, review the related PRs, etc. Will improve the font size presets (having global styles rely on pixel values for font sizes exclusively is not a good idea). See what can be done regarding identifying if a block instance matches a global style selector (for cases like headings). Will continue the iterations on the PR’s that are open and do some PR reviews.

@vcanales

  • PR for moving away from momentjs and into date-fns: https://github.com/WordPress/gutenberg/pull/25782 — Needs review, all input appreciated — Most tests passing, and @vcanales is currently testing and trying to fix this issue related to post schedule date mismatch, with the library swapped out.

@frankklein

Got two FSE bug fix PRs open:

  • Template part generation fix (i.e. do not use text domain): https://github.com/WordPress/gutenberg/pull/26275 already reviewed, and ready for merge.
  • Fix theme exports (these don’t work at all at the moment) https://github.com/WordPress/gutenberg/pull/26268

@nosolosw

His focus has been lately on various things that were important to land on 5.6. Plans to get back to FSE/GS work this week.

@bph

Testing daily builds of the plugin.zip (for now published on Gutenberg Times).

@karmatosed

Now options iterations are in 5.6, moving to beyond those for next releases. Also shepherding 5.6 and picking up some little pieces along way.

@itsjonq

  • Continued with G2 Components explorations, with a focus on supporting Design Tools (starting with Typography)
  • Building in features like CSS validation and smarter unit parsing (e.g. px, or vmax) to expand Gutenberg’s abilities to handle custom values (as Global Styles evolves)
  • Continued knowledge sharing of all sorts (G2, design, UIUI User interface, dev) via Zoom sessions

Open floor

Updating WordPress trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. editor more frequently

@clorith said:

Continuous Gutenberg releases in trunk.Currently, changes to the Gutenberg 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 generally get merged to core a few days before beta-1 of a major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope. going out.

In that time period, months have likely to have passed, and the plugin would have had multiple releases (taking the 5.5 as an example, 9 releases of Gutenberg were bundled, the same rungs true of WP 5.4, 10 releases made it into 5.3). That’s a lot of changes, not all of them obvious, but having all of them land right before beta makes it harder to test their interaction purely in core, and separate between experimental plugin stuff, and what is actually planned for core.I would like to see a continuous integration between the two projects, I’ve outlined a proposed running timeline to get the discussion started around this:- Plugin has a new version releases

– The changes live in the plugin for 3 weeks

– After these 3 weeks the changes are merged to trunk

– Feedback on trunk/core can be provided on the features on how they work without all the other bells and whistles of the plugin.I chose the arbitrary number of 3 weeks, as that gives ample time to get plugin feedback from those using the plugin for testing, while also not keeping changes away from core for “too long”, and also doesn’t lead to excessive extra work for committers tasked with Gutenberg chores (ideally, I’d love a 2 week turnover, as I feel that gives ample time for plugin feedback, but this is what we’re here to discuss 🙂 )

@youknowriad said that our official plan is to actually merge after each release with trunk. The only blockerblocker A bug which is so severe that it blocks a release. is that  we don’t  have the resources to do so. And added that the part that can be automated is already automated: updating the packages and the e2e tests against core. The rest (PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher changes) can’t be automated.

Multi-line Code blocks regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.

@getdave said:

There is a regression in the latest Gutenberg release on the Code block (and possibly also the Classic Block) where formatting is completely broken.

https://github.com/WordPress/gutenberg/issues/26301

It looks like this was introduced by changing from PlainText to the RichText component. All the link breaks are now returned as br tags which causes everything to render on a single line.

My personal website for example now shows all my code snippets in one unformatted long line which isn’t great (at all).

Not sure how complex this is to fix, but should we look to address it as a high(ish) priority?

@jorgefilipecosta said he thinks @ellatrix  is already aware of this issue and looking into a solution.

Should we have an issue per PR?

@paaljoachim said:

It seems fairly easy today to create a PR and have someone review and have it merged without even someone from design or accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) have gone through the PR. The question that comes up… should all PRs have an associated issue?

As it seems an issue will have greater visibility and it is easier I believe for someone to add the correct labels to get it looked at.

@jorgefilipecosta and @youknowriad manifested their thoughts against the idea of forcing an issue per PR.

It seems the biggest issue is having PR’s without labels that don’t get the deserved attention, and we should all make sure our PR’s are properly labelled. In case you have PR’s open please verify if all of them include labels.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting-notes

Editor chat summary: Wednesday, 2 September 2020

This post summarizes the weekly editor chat meeting on Wednesday, 2 September 2020, 14:00 UTC held in Slack.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 8.9

@jorgefilipecosta announced Gutenberb 8.9 was going to be released in some hours.

The big highlight of the release is that Widgets moved out of experiments. On the FSE front, multiple FSE blocks were implemented and are now available for testing in the FSE experience (“Site Editor”). With regards to the widgets screen, more details are shared below.

Aside from these two focuses, Gutenberg 8.9 contains some small new features, multiple 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. fixes, and some performance improvements.

Monthly plan updates

Global Styles

The PR that implements the Global styles sidebar on the edit site is now out of the draft state. https://github.com/WordPress/gutenberg/pull/24250. The PR allows us to have something more concrete to test the global styles mechanism and should probably be merged soon.

Besides the main global styles PR, @jorgefilipecosta said that we have proposals for font family and font-weight picking in https://github.com/WordPress/gutenberg/pull/24868 and https://github.com/WordPress/gutenberg/pull/24978.

Navigation screen and Navigation 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.

Regarding the navigation block task @andraganescu said:

They’re both being worked on. For the Navigation editor (screen) the goal currently is to bring it into a sort of MVP state (outlined in https://github.com/WordPress/gutenberg/issues/24875 and then take the same steps that we took for the Widgets editor.
Recently the editor got drag and drop into its version of the ListView.
The Navigation block is getting updates via the work on the editor.
One thing that is a bit of a blockerblocker A bug which is so severe that it blocks a release. now is the uncertainty around the “edit in toolbar” feature suggested for the LinkControl, feature which is also present in some of the editor’s interactions.

Widgets screen

Besides the big update that widgets are going to move out of the experimental state on WordPress 8.9, @andraganescu added that call for testing post in progress, and it should soon make it on the make coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site).

Full Site Editing

Regarding full site editing @ntsekouras, is experimenting with the query block. Namely, adding tags, order, and some orderby support and transform multiple heading blocks to list or paragraphs.

Monthly plan preview

@annezazu shared a small preview of the monthly plan for September:

  • Global Styles & Editor focused APIs: hope is that work on editor focused APIs can be wrapped up in the month ahead.
  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Screen: launched out of experimental, hoping for lots of feedback, working on an updated design, and have a nice set of a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues to work through.
  • Navigation Screen: discussing blockers to this being moved out of experimental & working on various items including nestinga fresh designenabling edit links in toolbar etc.
  • Full Site Editing: focused on milestone #2.

Task coordination

@jorgefilipecosta

Shared the following update:

Last week I was involved in helping the editor side tasks of WordPress 5.5.1. I reviewed multiple global styles related PR’s and shared some insights in the discussions that were happening. And I proposed the font family and weight picking mechanism.

Next week I will continue the reviews on global styles related PR’s. I will try to take the open PR’s I have to the finish line, and I will try to have a prototype of how to use and load third-party fonts.

@youknowriad

  • Working on 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. APIs to control the editor.
  • Adding spacing controls to the group block
  • Custom CSSCSS Cascading Style Sheets. for the group block (depending on the available time)

@mapk

  • Finalized Widget Screen design iterations.
  • Digging into Query block.
  • Reviewed and helped iterate on text-only topbar.

@itsjonq

@itsjonq shared the following update:

I’m continuing to work on the G2 Components project. Currently focusing on creating (also supporting the creation) of larger pieces.
One of the ways this is manifesting is through prototyping more complete UIs/experience (e.g. Navigation, and soon FSE/Global styles).
Also exploring how G2 components could be used in WP-Adminadmin (and super admin). Another focus to evaluate potential integration into Gutenberg (via `@wordpress/components`).
One of the results from this is splitting parts from the core system so that smaller chunks can be migrated (e.g. Style system)I’ve continued to host Zoom session calls + blog G2 components updates on the blog:
https://g2components.wordpress.com/Also updating the documentation as I go:
https://g2-components.com/As always, open to feedback + suggestions! From UIUI User interface designs to workflows, to documentation, etc…
I’ve received a few already, which have been lovely.

@michaelarestad

@nosolosw

Shared the following update on the agenda:

  • This week: I’ve made progress on adding an initial prototype for the global styles sidebar in the Site Editor. Just today the PR moved from draft state to open for reviews. It still needs some tweaks, but, fundamentally, it’s a candidate for merging. I’ve also been helping here and there with feedback and reviews.
  • Next week: keep pushing this work forward.

Open floor

Justify use of “Needs… Feedback”

@isabel_brison wrote on the agenda post:

I’m wondering if we should try/encourage adding comments to justify use of “Needs… Feedback” labels in Gutenberg, as it’s not always obvious which aspect of the issue/PR needs feedback. It would help if the person adding the label elaborated a little on where feedback would be useful.

@jorgefilipecosta said it makes sense that when someone uses a feedback label to also include a comment saying exactly what feedback is needed. As sometimes, the discussions get big passed by many topics, and it is not easy to know what actionable feedback is needed.

@youknowriad said that adding process over process is just raising the bar for contribution. And added that it’s also fine to ask “Why did you add the Needs thing feedback”?

@mapk referred he noticed that many designers do list out the feedback they’re looking for when a design is proposed. @jorgefilipecosta said that we should probably expand that practice to non-design PR’s.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting-notes