Riad Benguella 11:53 am on April 17, 2019
Tags: core-editor, editor ( 103 ), gutenberg ( 100 )

What’s new in Gutenberg? (17th April)

More than 48 contributors participated in this Gutenberg release. It marks the addition of the very expected Group block (sometimes referred to as container or section block). It’s a minimal version at the moment and improvements about the flows to add inner blocks, group/ungroup blocks are expected in follow-up releases.

The bug fixes from this release will be backported to WordPress Core in order to ship in the upcoming WordPress 5.2 release.

This release includes a lot of improvements to existing blocks and flows.

5.5

Features

Add a new Group block.
Add vertical alignment support to the Media & Text block.
Add the image fill option to the Media & Text block.

Enhancements

Improvements to the Image Block flows.
Automatically add `mailto:` to email addresses when linking.
Add visual handles for side resizers for various blocks.
Improve the performance of the annotations by avoiding excessive memoization.
Announce the color accessibility issues to screen readers.
Add enum block attributes validation to browser block parser.
Use a consistent grey background in the Shortcode block.
Improve accessibility of video block select poster image.
Respect prefers-reduced-motion for fixed backgrounds in Cover block.
Prevent ArrowLeft key press in multi-line selection from prematurely triggering multi-selection.

Bug Fixes

Avoid keeping the RichText value in cache indefinitely.
Fix the post title input borders in the code editor.
Fix the block restrictions to insert, replace or move blocks.
Select gallery images on focus.
Fix removing gallery images on delete/backspace key press.
Fix small visual regression in the block autocompete popover.
Fix the data module resolver resolution status.
Avoid saving metaboxes when previewing changes.
Fix selecting the separator block.
Fix displaying the color palette tooltips on hover.
Fix Firefox/NVDA bug not announcing the toggle settings button.
Fix arrow navigation in paragraph blocks with backgrounds.
Fix the columns block click to select.
Fix post dirtiness after fetching reusable blocks.
Fix the hover and focus styles for buttons with the isBusy prop.
Remove the box shadow from the side inserter button.
Changing the region navigation shortcuts to avoid conflicts.
Fix space insertion in the Button block in Firefox.
Prevent the link popover from animating constantly as we type.
Fix the warning triggered by clearing the height of the spacer block.
Fix undo behavior after fresh post loading.

Documentation

Add design documentation to the Modal component.
Clarify the CSS naming coding guidelines.
Add InspectorControls usage example.
Tweaks and typos: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13.

Various

Bootstrap the design of the new widgets screen (non functional yet).
Reorganization of the block-library code base:
- Use a babel plugin to load block.json files.
- Introduce block.json metadata for all client side blocks.
- Move the edit functions and the icons to separate files.
- Move the transforms and save functions to separate files.
Add forwardRef support to the PlainText component.
Support Button Block Appender in the InnerBlocks component.
Unset the focal point attributes from the Cover block if not needed.
Consistently return promises from the data module action calls.
Remove obsolete CSS currentColor usage.
Improve the e2e test CLI arguments and docs.
Improve the e2e test login stability on MacOS.
Remove is-plain-obj package dependency.
Remove invalid urls and ids from media test fixtures.
Remove the deprecated Gutenberg plugin functions slated for 5.4 and 5.5.
remove or rename undocumented RichText package functions and constants.
Adjust paragraph block spacing to use standardised variables.
Allow spaces in file paths for package build process.
Update pre-commit to check modified files only.
Improve the performance of the webpack build configuration.
Update dependencies with known vulnerabilities.
Fix typo in variable names.

Mobile

Accessibility improvements to the Button component.
Enhance the unsupported block type.
Fix image upload progress not being displayed consistently.
Support copy/pasting images.
Add the list block.
Visual refinements for the native nextpage block.
Fix importing the column block.
Remove DOM logic from the list block toolbar.
Put the caret at the end of the text field after merging blocks.
Fix caret position after inline paste.

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience, but is adequate for spotting variations in performance.

Version	Loading Time	KeyPress event (typing)
Gutenberg 5.5.0	6.4s	71.1ms
Gutenberg 5.4.0	6.5s	78.5ms
Gutenberg 4.8 (WordPress 5.1)	8.6s	154.1ms
Gutenberg 4.7 (WordPress 5.0)	11.2s	191.44ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Riad Benguella 4:13 pm on April 3, 2019
Tags: core-editor, editor ( 103 ), gutenberg ( 100 )

What’s new in Gutenberg? (3rd April)

Foundational work and initial UI explorations to implement the block-based widgets screen are on-going. In the meantime, the contributors worked on a number of bug fixes and improvements. All the bug-fixes will be included in the next beta of WordPress 5.2.

5.4

Features

Add vertical alignment support for the columns block.
Add playsinline support for the video block.

Enhancements

Add the Media Library button to the gallery block appender.
Improve appearance of the block hover state on colored backgrounds.
Move the color and font size caption styles into theme styles.
Replace the verse block icon.
Standardize align and className attributes for dynamic blocks.
Remove the title from mobile inserters.
Capitalize button labels.
Remove menu toggling on checkbox, radio buttons clicks.
Make the invisible image resize handlers bigger.
Improve the alt text field description.

Bug Fixes

Improve the format boundary styles.
Convert void blocks properly when converting or pasting content.
Fix the ClipboardButton component behavior in Safari.
Fix expanding the text selection when using shift + vertical arrows.
Fix the alignment of the third-party block settings items.
Fix invalid HTML in some more menu items.
Fix JavaScript error in the columns block.
Fix radio button appearance on small screens.
Save line breaks in the preformatted block.
Fix edge case in the is_gutenberg_page plugin function.
Fix toolbar position in full size aligned blocks on small screens.
Fix double scrollbar issue in Full Screen mode.
Fix JavaScript error when downgrading to an old Gutenberg version.
Fix the WordPress embed block resolution.
Fix embedding links with trailing slashes.
Fix the preloading apiFetch middleware when initialized empty.
Fix php notice when using widgets without description.
Better horizontal edge detection to fix the arrow key navigation in the table block.
Fix error in API Fetch initialization.
Fix unwanted margin in Column block.
Fixes issue where emoji would be destroyed.

Documentation

Document the block editor module.
Add design documentation for the Panel component.
Document webpack config extensibility.
Clarify experimental and unstable API guidelines.
Setup automatic API documentation for the data module.
Improve the automatic API documentation tool.
Enhance the components documentation:
- FormFileUpload component.
- MediaPlaceholder component.
- Notice component.
- TextControl component.
Updates the blocks creation tutorial.
Typos & tweaks: 1, 2, 3, 4, 5, 6, 7, 8, 9.

Various

Implement a built-in static Gutenberg Playground.
Override core block server-side code when using the plugin.
Make the block editor module more reusable.
Expose the lazy and Suspence React features in the element package.
Avoid assuming persisted preferences state shape.
Remove dead code from the calendar block renderer.
Extract global CSS resets into reusable mixins.
Replace image urls by base 64 encoded images in reusable CSS files.
Add default empty implementation for the block types save function.
Add a new data action to replace the inner blocks.
Support parent data registry inheritance in the data module.
Add extra props support for the Dashicon component.
Add a BaseControl.VisualLabel component for purely visual labels.
Refactor setupEditor effects to actions.
Refactor the core/data store to be independent from the registry object.
Remove componentWillMount usage from LatestPostEdit component.
Add a generic e2e test for block transforms and work on its stability.
Allow e2e test failures for php versions lower than 5.6.
Add eslint rule to prevent incorrect truthy length property checks.
Add eslint rule to prevent unsafe setTimeout usage in components.
Run the local gutenberg environment in debug mode.
Disable debug mode in local e2e tests.
Exclude test files while rebuilding packages.
Make E2E tests resilient against transforms added by plugins.
Add LGPL as an OSS license.

Performance Benchmark

Version	Loading Time	KeyPress event (typing)
Gutenberg 5.4.0	5.61s	74.88ms
Gutenberg 5.3.0	5.65s	73.37ms
Gutenberg 4.8 (WordPress 5.1)	8.21s	150.22ms
Gutenberg 4.7 (WordPress 5.0)	14.15s	201.27ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Riad Benguella 1:04 pm on April 1, 2019
Tags: core-editor, gutenberg ( 100 ), meta ( 5 )

The Block Registration RFC and the Gutenberg RFC process

While Slack is a critical tool for keeping in sync for project status and priorities, it has proven to be an ineffective platform to engage in detailed, long-lived discourse around complex engineering problems.

Inspired by other open source projects like React, Yarn, Rust… we started experimenting with a new RFC (Request For Comments) process in the Gutenberg repository in order to propose, discuss and adopt technical solutions for these big features or complex technical challenges.

The Block registration RFC

The first open RFC in the Gutenberg repository concerns the Block Registration API and intends to address the server-side awareness of blocks and simplify the block discovery for the block directory project.

The block registration API is the most important API in the block editor with a lot of technical challenges. Its implementation should fulfill a number of requirements:

A block type registration should be declarative and context-agnostic. Any runtime (PHP, JS, or other) should be able to interpret the basics of a block type (see “Block API” in the sections below) and should be able to fetch or retrieve the definitions of the context-specific implementation details. The following things should be made possible:
- Fetching the available block types through REST APIs.
- Fetching block objects from posts through REST APIs.
- This API should be backward compatible with what we have at the moment.
- It should be possible to statically analyze a block type in order to support advanced use-cases like the block discovery required by the Block Directory project.
It should not require a build tool compilation step (e.g. Babel, Webpack) to author code which would be referenced in a block type definition.
It should allow to dynamically load (“lazy-load”) block types, or parts of block type definitions. In practical terms, it means that the editor should be able to be loaded without enqueuing all the assets (scripts and styles) of all block types. What it needs is the basic metadata (title, description, category, icon, etc…) to start with. It should be fine to defer loading all other code (edit, save, transforms, and other JavaScript implementations) until it is explicitly used (inserted into the post content).

This RFC has already received a lot of feedback and technical explorations already started to clarify feasibility already started but I’d like to encourage everyone to chime-in and share thoughts.

What type of features/problems should be submitted as RFCs

All ideas/PRs/proposals require discussions before moving to implementation. When the proposed changes are small then a GitHub issue is fine but in addition to the block registration API, all the features and technical problems with impact across different areas of the code base, new patterns for extensibility APIs, technical problems that are hard to solve without making compromises are good candidates for RFCs.

Some examples for the Gutenberg project include:

The Block Registration API.
The Block Invalidation and Deprecation handling.
Block areas storage mechanism and widgets migration.
Block Bahaviour reuse (colors, alignments…).
Responsive Image Handling and Block Alignment awareness in nested contexts.
Editor Styles.

The RFC workflow

The flow to propose a new RFC is the following:

Create a RFC document for your proposal.
Submit a pull request to the Gutenberg repository (markdown file added to the `docs/rfc` folder).
Discuss and incorporate feedback into the PR
After discussions in the weekly meetings, RFCs may or may not be accepted.
If the RFC is accepted, the PR is merged.

Accepted RFCs means the proposed feature is approved for implementation. Once implemented, the RFC becomes the de-facto documentation for it.

What makes a good RFC document

A good RFC document can be broken into the following sections:

Description of the problems solved by the RFC
Current status and previous attempts
Solution Proposal
Unsolved Problems

Who can submit an RFC

Anyone can submit an RFC.

We’re looking forward to start receiving RFC proposals!

#core-editor, #gutenberg, #meta

Marcus Kazmierczak 1:04 pm on March 25, 2019
Tags: core-editor, core-js ( 31 ), javascript ( 65 )

Building JavaScript

The Gutenberg Handbook shows JavaScript examples in two syntaxes: ES5 and ESNext. These are version names for the JavaScript language standard definitions. You may also see elsewhere the names ES6, or ECMAScript 2015 mentioned. See the ECMAScript Wikipedia article for all the details.

ES5 code is compatible with WordPress’s minimum target for browser support. It can run straight in your browser and does not require an additional build step. In many cases, it will be perfectly fine to follow the same approach to start experimenting with your plugin or theme quickly. As soon as your codebase grows to hundreds of lines, it might be a good idea to take advantage of all the great JavaScript features included in ESNext syntax.

With the release of Gutenberg 5.3, the @wordpress/scripts package was updated to include webpack and Babel configurations. The update makes setting up an ESNext development environment much easier for building blocks and creates a standard method for developers to set up their plugin.

The documentation in the JavaScript tutorial and the ESNext examples in the gutenberg-examples repository are both updated to include the new process.

Here is a quick overview of how to set up an environment. First, you need to install @wordpress/scripts package:

npm install --save-dev @wordpress/scripts

You can then update the scripts section of your package.json to include:

"scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
}

No webpack config (e.g., webpack.config.js) or Babel config (e.g., .babelrc) is needed.

The scripts expect the source file to be found at src/index.js and will output the build to build/index.js. So if you are migrating an existing plugin, you will need to move your source and enqueueing to these new locations.

With the setup in place, the standard workflow is:

Install dependencies: npm install
Start development builds: npm start
Develop. Test. Repeat.
Create production build: npm run build

In general, the package should be used with the set of recommended config files. While it is possible to override every single config file provided, if you have to, it means that your use case is more complicated than anticipated. We’d love hearing about it as we’d like to iterate on the current setup and offer more flexibility in the future. At the moment, our recommendation would be to use the underlying tools (webpack, Babel) directly.

See the JavaScript Build Setup documentation for a full explanation and walk through, and see the scripts package documentation for all the details.

Props to @gziolo and @nosolosw for their efforts.

#core-editor, #core-js, #javascript

Riad Benguella 12:20 pm on March 20, 2019
Tags: core-editor, editor ( 103 ), gutenberg ( 100 )

What’s New in Gutenberg? (20th March)

This is the last Gutenberg release that will be entirely included in WordPress 5.2 and it’s an exciting one.

First, it introduces a block management modal with the ability to enable/disable blocks from the block inserter.

The release also includes the possibility to nest different kind of blocks in a Cover Block container.

Title, paragraph and buttons nested in a Cover Block.

The journey to improve different parts of the editor UI is continuing as well with improvements to the hover and selected block states with better a11y and less distraction.

5.3 🇵🇹

Features

Add the block management modal: Ability to hide/show blocks in the inserter.
Support nested blocks for the Cover Block.
Add an experimental Legacy Widget Block (enabled only in the plugin for the moment).

Enhancements

Update the block outlines for the hover and selected states.
Allow undoing automatic pattern block transformations.
Add a RichText collapsed format toolbar for code, inline image and strikethrough formats.
Allow collapsing inserter panels when searching.
Add ability to transform video shortcodes to video blocks.
Add ability to transform audio shortcodes to audio blocks.
Add new wordpress/data actions to invalidate the resolvers cache.
Support custom classNames in the ToggleControl component.
Clarify the button to exit the post lock modal.
Improve the block validation error message.
Automatically use the WordPress babel config when using wordpress/scripts CLI.
Add keyboard shortcuts to indent/outdent list items.
Use links instead of buttons in the document outline.
Use <s> for strikethrough, not <del>.
Center the tooltips content.
Update wording of the block switcher tooltip.
Add support for the reduced motion browser mode.

Bug Fixes

Always show the current month in the Calendar block for All CPTs but post.
In the Latest posts block, avoid full line clickable titles.
Avoid relying on DOM nodes to add the empty line in RichText component. This fixes a number of lingering empty lines.
Fix the MediaPlaceholder icon color on dark backgrounds.
Fix the Classic block toolbar in RTL languages.
Fix the more tag in the Classic block.
Fix the quote to heading block transformation.
Fix “null” appearing when merging empty headings and paragraphs.
Fix the block insertion restrictions in the global inserter.
Fix the prepareEditableTree custom RichText Format API.
Changes to the internal RichText format representation to separate objects (inline image..) from formats (bold…). This fixes a number of RichText issues.
Fix the Spinner component styling in RTL languages.
Fix focus loss when using the Set Featured Image buttons.
Fix template lock not being taken into consideration.
Fix composed characters at the beginning of RichText.
Fix several block multi-selection bugs.
Allow using a float number as a step when using the RangeControl component.
Fix error when pasting a caption shortcode without an image tag.
Fix focus loss when combining sidebars and modals (or popovers).
Escape the greater than character when serializing the blocks content into HTML.
Fix pasting links into the classic block.
Include missing CSS in the classic block.

Documentation

Enhance the i18n process documentation with a complete example.
Add design guidelines to several components:
- The Button component
- The CheckboxControl component
- The MenuItemsChoice component.
- The MenuGroup component.
Update the JavaScript setup tutorial to rely on the wordpress/scripts package.
Lowercase block editor and classic editor terms to conform to the copy guidelines.
Use a central script to generate the JavaScript API documentation and run in parallel.
Update the packages release process.
Update the plugin release docs to rely on a lighter SVN checkout.
Add automatic generation of JavaScript API documentation for:
Link to the editor user documentation and remove the user documentation markdown file.
Typos and tweaks: 1, 2, 3, 4, 5.

Various

Upgrade to React 16.8.4 (React Hooks).
Fix the dependencies of the e2e-tests and the e2e-test-utils npm packages.
Avoid disabling regeneratorRuntime in the babel config to avoid globals in npm packages.
Work on various e2e tests stability improvements.
Regenerate RSS/Search block test fixtures.
Move to travis.com as a CI server.
Add clickBlockToolbarButton e2e test utility.
Add e2e tests:
- to check the keyboard navigation through blocks.
- to verify that the default block is selected after removing all the blocks.
- to check the InnerBlocks allowed blocks restrictions.
Add unit tests for the isKeyboardEvent utility.
Remove CC-BY-3.0 from the GPLv2 compatible licenses.
Polish the wordpress/block-editor module:
- Move the block specific components to the package.
- Update the classnames to follow the CSS guidelines.
Update eslint rules npm packages.
Simplify the hierarchical term selector strings.
Update the Latest comments block to use the “align support config” instead of a custom implementation.
Remove the block snapshots tests.
Remove post install scripts and only run these in CI to improve test performance.
Tweak the plugin build zip script to avoid prompting when the build environment is clean.
Add withRegistry higher-order component to the wordpress/data module.
Add missing module entry point to the notices package.json.
Remove the Gutenberg 5.3 deprecated functions.
Ensure sourcemaps published to npm contain safe relative paths.
Remove the replace_block filter usage and extend core editor settings instead.
Improve handling of transpiled packages in unit tests.
Add CLI arguments to launch e2e tests in interactive mode more easily.
Select a unique radio input in a group when using the tabbables utility.

Performance Benchmark

Version	Loading Time	KeyPress event (typing)
Gutenberg 5.3.0	17.19 s	42.57 ms
Gutenberg 5.2.0	16.79 s	41.85 ms
Gutenberg 4.8 (WordPress 5.1)	23.43 s	82.75 ms
Gutenberg 4.7 (WordPress 5.0)	27.60 s	99.13 ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Darren Coutts 1:05 pm on March 14, 2019
Tags: agenda ( 331 ), core-editor, editor ( 103 ), gutenberg ( 100 )

Editor chat summary: March 13th

This post summarizes the latest weekly Editor meeting, held in the #core-editor Slack channel, on Wednesday, March 13, 2019, 14:00 UTC.

Block Directory Proposal

@youknowriad shared the block directory proposal post and raised that the current block registration APIs do not allow for this kind of plugins, and therefore this would need to be be resolved before building the directory. It is proposed that a private API is created first for use only with core blocks to allow iterations.

Discussions are to continue on the above post and the relevant pull requests.

Code Owners Experimentation Feedback

A few weeks ago, a code owners flow has been introduced to the Gutenberg repository. This allows to automatically ping people to review pull requests based on their interests on a certain area of the codebase.

A Discussion took place on the goal for this and whether it was achieved.

@aduth raised that one of the goals is to raise awareness and to get more core contributors.
@nosolosw felt that sometimes too many pings were sent out, and as a new contributor couldn’t commit the required time to review the codebase.
@youknowriad feels that the new workflow is not useful for occasional contributors.
@mcsf feels that the file paths do not map to the topics that people are interested in.

The new workflow will be kept for now, and reviewed at a later date.

Key Pull Requests

Block Management – @aduth is actively working on this PR, some minor decisions still to be made, including wording.
Section Block – General consensus is that this should be shipped as an experimental block first. This is hoped to land soon, and will be iterated upon.
Block outlines UI – The PR is close to merge, it improves the Block outlines for the hover and selected state. @kjellr would like some feedback and testing on this PR.
React 16.8 Upgrade – React is going to be updated on time for WordPress 5.2

Tasks Coordination

@aduth @mapk and the design team will be shipping the block management UI shortly
@get_dave and @danr are working on the section block (and related items) and will hopefully land a v1 shortly
@kjellr @joen @mapk and others are improving the hover and selected block outlines
@gziolo is working on the Block Registration API v2 and Axe tool integration
@youknowriad is working on the block editor module
@nerrad will resume working on the effects -> controls migration
@nosolosw and @gziolo are working on wp-scripts CLI improvements
@marekhrabe is working on improvements to the Media & Text resizer
@jorgefilipecosta is working on inserter improvements, e2e tests and the widget screen APIs

The meeting archive is here.

The agenda for the next meeting is here, please add anything you want to discuss.

#meeting-notes, #core-editor, #editor, #gutenberg

#agenda, #editor, #gutenberg

Riad Benguella 1:24 pm on March 6, 2019
Tags: core-editor, editor ( 103 ), gutenberg ( 100 )

What’s New in Gutenberg? (6th March)

As we dive into the block-based widgets screen, foundational work is required to support using the Gutenberg editor outside the Post Editor context. This release falls into this category of releases where it’s more about building the foundations and making the Gutenberg modules more flexible to support these new use-cases.

It introduces a new @wordpress/block-editor module allowing building block editors outside the post editor context and even outside the WordPress Admin context. This has some costs on the performance of the keypress events while working on very long posts that we hope to alleviate in the upcoming releases.

5.2 Enhancements

Update the button block description wording.
Design and a11y improvements for the custom color picker.
Tweak the FontSizePicker height to match regular select elements.
Improvements to the local state persistence behavior.
Improvements to the URL input popover design.
Disable block navigation and document outline items in text mode.
Improve the quote block icons.
Animate the sidebar tabs switching.

Bug Fixes

Select the last block when pasting content.
Fix the block validation when the default attribute value of a block is changed.
Forces the min/max value validation in the RangeControl component.
Display HTML properly in the post titles of the latest posts block.
Fix drag and dropping a column block on itself.
Fix new lines in the preformatted block.
Fix text underline shortcut.
Fix calling gutenberg plugin functions in the frontend context.
Fix pasting a single line from Google Docs (ignoring the strong element).
Fix FocalPointPicker rendering unlabelled input fields.
Show the images uploaded in the gallery block in the media modal.
Fix wordwise selection on Windows.
Preserve empty table cells when pasting content.
Fix focus loss when deleting the last block.

Documentation

Add the Block specific toolbar button sample to the format api tutorial.
Introduce a package to automatically generate the API documentation.
Tweaks: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.

Various

Introduce a generic block editor module.
Creates an empty page that will contain the future widget screen explorations.
Fix emoji in the demo content.
Warn when the user is using an inline element as a RichText container.
Make Babel import JSX pragma plugin aware of the createElement usage.
Include the JSX pragma plugin into the default WordPress babel config.
Update the non-embeddable URLs wording.

Chore

Refactoring of the block fixtures tests.
Refactoring the eslint custom import lint rule.
Refactoring the selection of previous/next blocks actions.
Refactoring the post editor effects to use actions and resolvers instead.
Use forEach instead of map when appropriate and enforce it with an eslint rule.
Remove TinyMCE external dependency mapping.
Extract webpack config into the scripts package.
Improve e2e tests stability.t
Avoid mutating webpack imported config.
Upgrade Jest to version 24.
Add repository.directory field to the npm packages and an linting rule to enforce it.
Update server blocks script to use core equivalent function.
Remove the vendor scripts registration.
Use the editor settings to pass a mediaUpload handler.
Remove deprecated Gutenberg plugin functions and features moved to core.
Remove unnecessary Enzyme React 16 workarounds from the unit tests.
Remove wp-editor-font stylesheet override.
Preserve inline scripts when overriding core scripts.
Support referencing the IconButton component.
Refactor the i18n setup of the Gutenberg plugin.

Mobile

Add an image placeholder when the size is being computed.
Update the image thumbnail when the image is being uploaded.
Support the Format Library.
Bottom Sheet design improvements.
Update the default block appender placehoder.
Support pasting content using the Gutenberg paste handler.
Fix alignment issues for the appender and paragraph block placeholders.

Performance Benchmark

Version	Loading Time	KeyPress event (typing)
Gutenberg 5.2.0	11.7 seconds	57.8 ms
Gutenberg 5.1.0	11.4 seconds	22.25 ms
Gutenberg 4.8 (WordPress 5.1)	15.1 seconds	126 ms
Gutenberg 4.7 (WordPress 5.0)	16 seconds	185.2 ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Darren Coutts 4:39 pm on February 22, 2019
Tags: agenda ( 331 ), core-editor, editor ( 103 ), gutenberg ( 100 )

Editor chat summary: February 20th

This post summarizes the latest weekly Editor meeting, held in the #core-editor Slack channel, on Wednesday, February 20, 2019, 14:00 UTC.

Gutenberg Release 5.1

Gutenberg 5.1 has been released which marks the end of the widget to blocks project. There are a range of essential enhancements which have been made in this release; details can be found on the release post.

WordPress 5.2 Planning

Based on the proposed schedule and scope for 5.2, a proposal to synchronize the Gutenberg plugin release dates with the WordPress feature-freeze date have been shared. Some concerns were raised about the short timeframes. This will be adapted to the final WordPress 5.2 release schedule.

The WordPress 5.2 scope has been discussed including the need for block discovery and management solutions as many users are feeling overwhelmed with the available choices.

Concerns about the short time frame to achieve these goals for 5.2 were shared and it was suggested that being able to turn blocks on/off. Favourite blocks could form part of 5.2. The wp.org directory could be independent of this roadmap.

Updating wordpress.org/gutenberg

The role and the necessary updates for this page were discussed:

The copy of the content needs to be refreshed.
Consistency with the marketing terminology is important.
Whether the page should be a feature page, or more related to the project roadmap.

@joostdevalk shared a call for ideas and thoughts over the next couple of days.

Tasks Coordination

For the next week, this is what everyone is working on:

@gziolo is starting to implement the new Block Registration API.
@mkaz is continuing on the documentation effort (i18n and JavaScript setup).
@youknowriad is starting to plan the block management and the widget screen work.
@youknowriad and @aduth will work on landing the generic block editor module.
@nosolosw is going to continue on the React deprecated APIs and JS documentation auto-generation.
@getdave and @marekhrabe are working on vertical alignment for the columns and media+text blocks.
@talldanwp and @andrei are working on the section block.
@jorgefilipecosta is working on improvements for the Calendar block, MediaPlaceholder and block insertion restrictions.

Open Floor

@getdave raised that there is a lack of test for our core blocks which makes it difficult to develop upon them.
- Information on the tests we have can be found here: https://github.com/WordPress/gutenberg/tree/master/packages/e2e-tests/specs/blocks
- It was acknowledged that further development in this area is required.

The meeting archive is here.

The agenda for the next meeting is here, please add anything you want to discuss.

#meeting-notes, #core-editor, #editor, #gutenberg

#agenda, #editor, #gutenberg

Riad Benguella 10:37 am on February 20, 2019
Tags: core-editor, editor ( 103 ), gutenberg ( 100 )

What’s New in Gutenberg? (20th February)

More than 51 contributors participated in this release. It marks an important milestone for Phase 2, as it’s the end of the porting widgets to blocks project. Next releases will be focused on explorations around the Widgets screen.

This release also includes a big refactoring to the formatting buttons and the RichText component, allowing us to fix a significant number of issues and to improve the writing flow.

Core blocks (aside from the Classic block) are not using TinyMCE under the hood anymore. This change should not have any perceivable impact, as the APIs of the RichText component and the custom formats registration have not changed.

In addition, contributors have worked on a number of improvements to existing blocks and UI micro-animations.

5.1

Features

Add a new Search block.
Add a new Calendar block.
Add a new Tag Cloud block.

Enhancements

Add micro-animations to the editor UI:
- Opening Popovers.
- Opening Sidebars.
Restore the block movers for the floated blocks.
Consistency in alignment options between archives and categories blocks.
Set the minimum size for form fields on mobile.
Disable the block navigation in the code editor mode.
Consistency for the modal styles.
Improve the FormToggle styling when used outside of WordPress context.
Use the block icons in the media placeholders.
Fix rounded corners for the block svg icons.
Improve the CSS specificity of the paragraph block styles.
Require an initial click on embed previews before being interactive.
Improve the disabled block switcher styles.
Do not split paragraph line breaks when transforming multiple paragraphs to a list.
Enhance the Quote block styling for different text alignments.
Remove the left padding from the Quote block when it’s centered.
A11y:
- Improve the permalink field label.
- Improve the region navigation styling.
Remove the 3 keywords limit for the block registration.
Add consistent background colors to the hovered menu items.
Allow the editor notices to push down the content.
Rename the default block styles.
Add inline image resizing UI.

Bug Fixes

Fix a number of formatting issues:
- Multiple formats.
- Flashing backgrounds when typing.
- Highlighted format buttons.
- Inline code with backticks.
- Spaces deleted after formats.
- Inline boundaries styling issues.
- Touch Bar format buttons.
Fix a number of list block writing flow issues:
- Allow line breaks in list items.
- Empty items not being removed.
- Backspace merging list items.
- Selecting formats at the beginning of list items.
Fix the color picker styling.
Set default values for the image dimensions inputs.
Fix sidebar panels spacing.
Fix wording of the nux tip nudging about the sidebar settings.
Fix the translator comments pot extraction.
Fix the plugins icons color overriding.
Fix conflicting notices styles when using editor styles.
Fix controls recursion in the redux-routine package.
Fix the generic embed block when using Giphy as provider.
Fix the i18n message used in the Gallery block edit button.
Fix the icon size of the block switcher menu.
Fix the loading state of the FlatTermSelector (tags selector).
Fix the embed placeholders styling.
Fix incorrectly triggered auto-saves for published posts.
Fix missing classname in the Latest comments block.
Fix HTML in shortcodes breaking block validation.
Fix JavaScript errors when typing quickly and creating undo levels.
Fix issue with mover colors in dark themes.
Fix internationalisation issue with permalink slugs.

Various

Implement the inline format boundaries without relying on the DOM.
Introduce the Registry Selectors in the data module.
Introduce the Registry Controls in the data module.
Allow extending the latest posts block query by using get_posts.
Extend the range of allowed years in the DateTime component.
Allow null values for the DateTime component.
Do not render the FontSizePicker if no sizes defined.
Add className prop support to the UrlInput component.

Chore

Update lodash and deasync dependencies.
Use addQueryArgs consistently to generate WordPress links.
Remove merged PHP code:
- jQuery to Hooks heartbeat proxyfying.
- References to the classic editor.
- gutenberg_can_edit_post function.
Disable CSS animations in e2e tests.
ESLint
- Add a rule to ensure the consistency of the import groups.
- Add a rule to protect against invalid sprintf use.
Remove obsolete CSS rules.
Add e2e tests for tags creation.
Add the feature flags setup.
Implement block editor styles using a filter.

Documentation

Add a new tutorial about the editor notices.
Add JavaScript build tools documentation.
Enhance the block’s edit/save documentation and code examples.
Use Title Case consistently.
Add e2e test utils documentation.
Small enhancements and typos: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

Mobile

Add bottom sheet settings for the image block:
- alt description.
- Links.
Implement the media upload options sheet.
Implementing Clear All Settings button on Image Settings.
Avoid hard-coded font family styling for the image blocks.
Improve the post title component.
Fix the bottom sheet styling for RTL layouts.
Support the placeholder prop in the RichText component.

Performance Benchmark

Version	Loading Time	KeyPress event (typing)
Gutenberg 5.1.0	9.4 seconds	16.4ms
Gutenberg 5.0.0	10.4 seconds	16.4ms
Gutenberg 4.8 (WordPress 5.1)	13.6 seconds	158.2ms
Gutenberg 4.7 (WordPress 5.0)	15.1 seconds	203.5ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Jorge Costa 10:28 am on February 20, 2019
Tags: core-editor, core-js ( 31 ), javascript ( 65 ), meeting notes ( 36 )

JavaScript chat summary, February 19th, 2019

Below is a summary of this week’s JavaScript chat (agenda, Slack Transcript). Have a topic for discussion for the next meeting? Leave a suggested edit on next week’s agenda.

Agenda: NPM Mono-Repo Subdirectory Declaration

https://github.com/npm/rfcs/blob/latest/implemented/0010-monorepo-subdirectory-declaration.md

@adamsilverstein quoted @aduth‘s note that we should consider implementing the npm monorepo declaration in the WordPress npm packages.

@aduth added that implementing this declaration would be a straightforward task that would help make npm more “aware” of where to find the specific source for a package in a mono-repository, hopefully improving links.

The idea was well received.

@aduth has created issues related to this task:

#13946 Packages: Assign repository.directory field for each package – https://github.com/WordPress/gutenberg/issues/13946
#13947 Packages: Enforce repository.directory in package.json lint script – https://github.com/WordPress/gutenberg/issues/13947

Feel free to share your thoughts and provide feedback related to this subject in the issues.

Agenda: Feature Flags

https://github.com/WordPress/gutenberg/pull/13324

Feature flags were merged in the Gutenberg repository. Quoting @gziolo:

feature flags in Gutenberg, it’s very simple approach which will allow us to enable new features only for the plugin while keep it completely removed from WordPress core using dead code elimination.

We went into more detail of what feature flags are and what they allow.

@atimmer noted that most commonly feature flags allow to enable or disable specific features while Gutenberg feature flags apply to a whole set of features e.g.: “phase 2 features”.

@aduth referred that the reason behind this decision may be related at least partly to the objective of simplifying dead code removal.
More information can be found at https://github.com/WordPress/gutenberg/pull/13324.

@adamsilverstein shared that he wants to introduce a feature in the hooks package whose code should only be included when the SCRIPT_DEBUG flag is set. Any feedback to this is welcome and can be provided in https://github.com/WordPress/gutenberg/pull/12038.

During the discussions, it was referred that, although dead code removal is a common and used by famous libraries like React, there are no good resource/references available online to help developers understand how dead code removal works.
If you know any good resource feel free to share the link in the comments or the core-js channel.

Agenda: Build support for wordpress/scripts

Relevant PR’s:

https://github.com/WordPress/gutenberg/pull/13814 – extracts shared webpack config and moves it to @wordpress/scripts.
https://github.com/WordPress/gutenberg/pull/13877 – consumes @wordpress/scripts when running existing wp-scripts build and wp-scripts start npm i @wordpress/scripts --save-dev && "build": "wp-scripts build" in package.json is our goal for plugin development.

According to @gziolo both PR’s are almost ready, but they need additional testing given the complexity of running the scripts with default configuration in various external projects.

@adamsilverstein noted that webpack setup is a significant barrier to entry for new developers and the more we can improve our tools the better.

@gziolo referred that a tutorial was already created and it will be simplified after latest changes are published.

Open floor

@nerrad referred that he would like to use the new version of React, more specifically React hooks, and asked when a React upgrade should be considered and when a WordPress release will contain the next version of React.

Answering to @nerrad, @aduth noted that upgrading React should be a non-issue although we may need some scrutiny on what is exposed. Regarding the WordPress releases, @aduth expects that anything merged to Gutenberg repository between now and mid-March should be part of the WordPress 5.2 release, but this specific subject will be clarified during the next #core-editor meeting https://make.wordpress.org/core/2019/02/19/editor-chat-agenda-february-20th/.

@nosolosw announced that in the past days the first auto-generated API documentation was merged to the Gutenberg repository: https://github.com/WordPress/gutenberg/pull/13856.
The tool that autogenerated the documentation is proposed in https://github.com/WordPress/gutenberg/pull/13329.
The next package/component that will be used as a testbed for the tool is not yet decided and every suggestion is welcome.

#core-js, #javascript, #meeting-notes

Welcome!

Communication

5.5 🇨🇿

Features

Enhancements

Bug Fixes

Documentation

Various

Mobile

Performance Benchmark

5.4 🇬🇧

Features

Enhancements

Bug Fixes

Documentation

Various

Performance Benchmark

The Block registration RFC

What type of features/problems should be submitted as RFCs

The RFC workflow

What makes a good RFC document

Who can submit an RFC

5.3 🇵🇹

Features

Enhancements

Bug Fixes

Documentation

Various

Performance Benchmark

Block Directory Proposal

Code Owners Experimentation Feedback

Key Pull Requests

Tasks Coordination

5.2 🇩🇿

Enhancements

Bug Fixes

Documentation

Various

Chore

Mobile

Performance Benchmark

Gutenberg Release 5.1

WordPress 5.2 Planning

Updating wordpress.org/gutenberg

Tasks Coordination

Open Floor

5.1 🏳️‍🌈

Features

Enhancements

Bug Fixes

Various

Chore

Documentation

Mobile

Performance Benchmark

Agenda: NPM Mono-Repo Subdirectory Declaration

Agenda: Feature Flags

Agenda: Build support for wordpress/scripts

Open floor

5.5

5.4

5.2

5.1