Editor chat summary: Wednesday, 23 October 2019

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

Gutenberg 6.8

Gutenberg 6.8 RC is scheduled for release next week Monday.

Weekly Priorities

These week priorities are same as last week. There has been some progress on the PRs and some are getting close to merge.

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@ella

@andraganescu

@youknowriad

@jorgefilipecosta

  • Worked on the gradient related tasks.
  • Submitted a core patch to make KSES allow gradient backgrounds.
  • Proposed a solution for automatic editor styles generation.
  • Will work on oprn PR/Patch.
  • Will work on iteration to custom gradient picker.

@get_dave

@gziolo

  • Helped with Storybook, explored unit test generation for stories.
  • Fixed ESLint warnings.
  • Ensured repository works with Node 12.x.
  • Reviews and general help with tasks:
    • Card components.
    • Accessible toolbar.
    • prettier code formatter integration.
    • new packages with the base styles.
  • Will start work on Patterns API for blocks and continue working on items listed.

@karmatosed

  • Triaged and organized the project board.

@retrofox

@vindl

Open Floor

  • @bharath asked for update on adding background image support for group block https://github.com/WordPress/gutenberg/issues/14744.
  • There was some discussion around removing cover block in favor of group block with background image support.
  • @gziolo mentioned for backward compatibility reasons Cover block will have to exists forever.

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

What’s new in Gutenberg? (16 October)

Work on stability and performance continues, and these bug-fixes have now been included in WordPress 5.3 RC 1.

In addition, this release starts the work on gradient backgrounds. First, the support is added to the Button block. Improvements to the gradients palette API and support in more blocks will be worked on for future releases.

Storybook

For Developers, this release also introduces a Storybook.

Accessible on this link for the master version, but also available on each Pull Request (https://deploy-preview-{PR_number}--gutenberg-playground.netlify.com/design-system/components/). Storybook is an isolated environment where the reusable WordPress UI components (@wordpress/components) are developed, tested and showcased.

Down the road, the netlify integration and the exact URLs can be adapted. This tool is meant to be directly integrated into WordPress Developer Docs.

6.7

Features

Bug Fixes

Performance

Enhancements

Experiments

Documentation

Various

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 6.7.0 5.52s 51.98ms
Gutenberg 6.6.0 5.57s 51.47ms
WordPress 5.2 6.53s 61.13ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Editor chat summary: Wednesday, 9 October 2019

This post summarizes the weekly editor chat meeting on Wednesday, 9 October 2019, 14:00 WEST held in Slack.

Weekly Priorities

WordPress 5.3 is planned for next week, there are still some issues we need to fix before then:

Some of the priorities are being worked, but others are not taken yet. If you think you can help with some of these tasks, please leave a comment on the issue!

It is also essential to address some browser issues, namely on IE. People with a windows dev setup could be beneficial here.

We are getting close to the WordPress 5.3 release; testing is essential, namely on the mobile phone you use, given the wide variety of devices that exist.

Task coordination

Note: If you’re reading this summary outside of the meeting, please drop a comment if you can/want to help with something!

@youknowriad

  • Working on the Media Upload errors handling.
  • Working on a fix to the navigation mode.
  • Lots of reviews and coordination.
  • Exploring some improvements to Block nesting selection with a new Block Breadcrumb.

@get_dave

  • Continues the work on DimensionControl https://github.com/WordPress/gutenberg/pull/16791, and ResponsiveBlockControls https://github.com/WordPress/gutenberg/pull/16790 PRs.
  • Started on the implementation of a potential new Link insert/edit interface as per https://github.com/WordPress/gutenberg/issues/17557

@gziolo

  • Helped @epiqueras to land the initial version of the Components Storybook.
  • Is focused on some optimizations related to eliminating dead code (mostly for experimental features) from WordPress 5.3 release.

@jorgefilipecosta

  • Worked on some changes to the custom gradient picker. Now, it is possible to move the control points using arrow keys, and the code was reorganized. It should be ready for a more in-depth review; a11y feedback would also be valuable.
  • Focused on some 5.3 must-haves.
  • Helped (reviewed tested, or suggested commits) in navigation block (related PR’s), DimensionControl, ResponsiveBlockControl, and other smaller PR’s.
  • Will continue the work on must-haves, apply a refactor that makes media&text work on IE, and fix some generic block editor issues.

@karmatosed

@brentswisher

  • Hoping to revisit displaying a notice of some kind in the inserter when there are disabled blocks (https://github.com/WordPress/gutenberg/pull/17338).
  • Help out with any 5.3 issues that he can.
  • Will try to help get through some of the new issues, label them, and get additional attention to them if he thinks they are WordPress 5.3 must-haves.

Open floor

@jeffreycarandang asked for an updated to PR https://github.com/WordPress/gutenberg/pull/17617 and to issue https://github.com/WordPress/gutenberg/issues/17809.

Regarding PR https://github.com/WordPress/gutenberg/pull/17617 @youknowriad and @jorgefilipecosta both had some comments on the problem the PR faces. The basic idea is that when a format is applied to a rich text, the focus goes back to the rich text (e.g., when we press a “bold button” it is expected I can continue typing) this behavior was always present. Some time ago, mainly because of accessibility reasons, a change was applied to popovers that automatically closes them when the focus is outside. The two previous behaviors together have some impact on formats that are applied in a popover (the popover may close in an unexpected situation). This is a high priority very complex problem, and a solution is being worked.

Regarding issue https://github.com/WordPress/gutenberg/issues/17809, @youknowriad pointed $wp_version variable as a possible solution and provided a way to make it available in JavaScript.

@welcher asked more detailed feedback on https://github.com/WordPress/gutenberg/pull/16384 which adds a priority mechanism to the Slot&Fill pattern.

@mcsf and @youknowriad shared strong reservations.

It seems that priority and order are very visually focused, in stark contrast with how Gutenberg has tried to use SlotFill so far.

In Gutenberg, we talk about advanced settingsinspector, etc., instead of the visual element sidebar. Coming back to priority, what does it mean for SlotFill as far as selective rendering goes? how is a sequence determined semantically? etc.Why does this matter? Well, the bridging of different platforms and environments under Gutenberg is an important factor. If a codebase needs to work transparently across Web and Mobile, for example, its semantics needs to be clear and independent of a particular visual expression (e.g. Web on Desktop)

@mcsf

@mkaz had a docs related question:

How do y’ll feel about ES5 support in documentation? Most of the code and package docs are ESNext, but we show ES5 examples first in docs. I don’t have a proposal together yet, but I feel we should move people quicker to ESNext since it is what they most likely will experience everywhere.

People agreed that the default docs should be ESNext but ES5 examples should still be present.

#core-editor, #editor-chat, #meeting, #summary

Editor Chat Summary: October 2nd, 2019

This post summarizes the weekly editor chat meeting on 13:00 UTC, October 2nd, 2019 held in Slack.

The agenda can be found here.

WordPress 5.3

Slack transcript.

Gutenberg 6.6 was released and has been included in WordPress 5.3 beta 2.

Weekly Priorities

Slack Transcript.

The main current focus is still WordPress 5.3. Tasks are being tracked in this Github board. Starting work towards the content-block areas.

Task Coordination

Slack Transcript.

Open Floor

Slack Transcript.

@mikeschroder raised that WordPress 5.3 comes with an update to image uploads: if the server sends a HTTP 500 error (for example, because it couldn’t finish the thumbnail resizing) the process will be retried. This is implemented in the Media Library and Media Modal, but not in the REST API and Gutenberg yet.

@maximeculea mentioned that the mobile team is running an experiment with styled components (CSS in JS) as a way to learn whether styles can be shared between web and mobile.

@paaljoachim brough up that there is a PR that address some of Gutenberg float issues. @youknowriad and @joen noted that, currently, this falls in theme-land. We should make progress on some refactorings to the block list that are a better approach, leaving the current behavior as it is.

#core-editor, #editor-chat, #summary

What’s new in Gutenberg? (2 October)

This is release is essentially focused on stability and performance. These bug-fixes and improvements have now been included in WordPress 5.3 beta 2.

At the same time, architectural work is continuing to prepare the block content areas editing capabilities.

6.6

Enhancements

New APIs

  • Implement EntityProvider and use it to refactor the meta block attributes.

Experimental

Bugs

Performance

Various

Documentation

Mobile

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 6.6.0 4.7s 38.96ms
Gutenberg 6.5.0 4.68s 42.96ms
WordPress 5.2 5.69s 57.65ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Block Editor Theme-related updates in WordPress 5.3

WordPress 5.3 includes a lot of additions and refactoring to existing blocks in order to support new features. Some of this features require special care from theme authors in order to optimize the Block Editor theme integration.

The Group block

A Group block to act as an all-purpose container for other blocks has been introduce. If a theme does not support wide and full alignments, no CSS changes should be necessary. 

If a theme does support for wide and full alignments, some additional theme styles may be required to ensure child blocks appear as intended: depending on how your CSS is written, a theme’s usual alignwide and alignfull styles may not appear as intended when they’re applied inside of a Group block. 

The Group block contains an inner container (wp-block-group__inner-container) to help make styling easier. In many cases, that div can be used as a proxy for entry-content styles, allowing wide and full child blocks to appear as intended without modification. 

To illustrate this, here’s a simplified example of a common method for implementing wide and full block layout on the front end, using negative margins:

.entry-content {
	width: 60vw;
	margin: 0 auto;
}

.alignwide {
	margin-left: -10vw;
	width: 80vw;
}

.alignfull {
	margin-left: -20vw;
	width: 100vw;
}

In this scenario, only a few additional lines of code are necessary to implement Group block styles: 

// Apply entry-content styles to the group block’s inner container as well. 
.entry-content,
.wp-block-group__inner-container {
	width: 60vw;
	margin: 0 auto;
}

// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.alignwide,
.wp-block-group.alignwide .alignfull {
	margin-left: -10vw;
	width: 80vw;
}

.alignfull {
	margin-left: -20vw;
	width: 100vw;
}

// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
	max-width: 100%;
	margin-left: 0;
}

Related PRs: 13964.

Reduced Block Styles specificity

In WordPress 5.3, the specificity of block editor CSS has been reduced. Specifically it changes how default block margins are applied, now targeting [data-block]. This should give more control to theme and plugin developers.

By default, all blocks will be born with a base margin. You can set that margin to zero in an editor-style:

[data-block] {
	margin-top: 0;
	margin-bottom: 0;
}

Related PRs: 14407.

Using class names for text alignment

In the previous versions of WordPress, inline styles were used to change the text alignment for the following core blocks:

  • Heading
  • Paragraph
  • Quote
  • Verse

This produced high CSS specificity making it very hard for theme authors to customize the look of those blocks. WordPress 5.3 uses classnames for text alignment to address these issues:

  • has-text-align-right – when block’s text is aligned to the right
  • has-text-align-center – when block’s text is aligned to the center
  • has-text-align-left – when block’s text is aligned to the left

All previously published posts should work as before. The affected blocks will automatically get converted to use the corresponding class names as soon as they are opened and saved in the block editor.

Related PRs: 16035, 16777, 16779, 16794.

Columns block classnames

The columns block have been updated to support custom widths per column. This led to the removal of the has-x-columns classname. Themes could have potentially relied on this classname to set the width of the columns.

Related PRs: 16129.

Color support for the separator block

The separator block now supports custom colors, this may impact themes that defines the separator color manually in their stylesheets. Themes should assign default colors to the separator only if the user didn’t apply a color explicitly. You can check the fix that was applied to the Twenty Nineteen theme to see how to achieve this.
https://core.trac.wordpress.org/attachment/ticket/47811/47811.patch

Related PRs: 16784.

Table block markup update

The table block is now wrapped in a <figure> element, so that <table class="wp-block-table"> has been replaced by  <figure class="wp-block-table"><table>. This is to allow large tables to horizontally scroll within the figure container instead of forcing cell content to break and become unreadable on small screens.

Themes may be impacted by this change if they have used chained selectors like table.wp-block-table for styling. Themes should now instead use .wp-block-table to target the container, or .wp-block-table table to target the table element itself.

Related PRs: 16324.

Gallery block markup update

The gallery block is now wrapped in a <figure> element as well and may optionally contain a <figcaption> as a caption for the whole gallery.

Themes can style the caption using the classname .blocks-gallery-caption. The markup change will affect any themes using chained selectors such as ul.wp-block-gallery to style galleries. Themes should now instead use only .wp-block-gallery to style the container and the new .blocks-gallery-grid classname to style the ul element itself.

Related PRs: 17101.


Props to @kjellr, @joen, @gziolo, @assassinateur and @isabel_brison for helping with this dev note.

+make.wordpress.org/themes

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

Editor chat summary: 25 September 2019

This post summarizes the weekly editor chat meeting on Wednesday, 25 September 2019 at 1300 UTC held in Slack.

The agenda can be found here.

News

  • WordPress 5.3 beta 1 is out

Weekly Priorities

  • Weekly Priorities are the remaining important issues and tasks needed for WordPress 5.3: https://github.com/WordPress/gutenberg/projects/34?fullscreen=true
    • still considering the Block content areas related work as a priority for the project

Task coordination

Note: If you’re reading this summary outside of the meeting, please drop a comment if you can/want to help with something!

  • @andraganescu
    • refactored the MediaFlow component to be a drop in component nstead of a HoC. it looks kind of ready https://github.com/WordPress/gutenberg/pull/16200
    • the PR implementing a smarter block appender could use a new review https://github.com/WordPress/gutenberg/pull/16708
  • @youknowriad
    • works on the WP 5.3 board above,
    • also working on dev notes,
    • Trying to help fix bugs
    • Reviewing Block Content areas work as time allows.
  • @mapk
    • I’m watching the project board like a hawk.
    • Testing @getdave’s responsive spacing PR: https://github.com/WordPress/gutenberg/pull/16790
    • Helping with the Inserter Panel Previews. https://github.com/WordPress/gutenberg/pull/17493
    • Keeping movement on the Block Patterns: https://github.com/WordPress/gutenberg/issues/17335
  • @brentswisher
    • will be back to his PRs
  • @getdave
    • works on the DimensionControl component and needs feedback https://github.com/WordPress/gutenberg/pull/16791
    • needs feedback on ResponsiveBlockControl too https://github.com/WordPress/gutenberg/pull/16790
  • @jorgefilipecosta
    • implements the first version of custom Gradient picker
    • needs review on https://github.com/WordPress/gutenberg/pull/17154
    • also working on compiling WordPress 5.3 Gutenprops. If you have not yet associated your GitHub to your WP.org profile, please do so, to make the props work easier and to make sure props are attributed!
  • @mcsf
    • focusing back on improving remote vs. local autosaves

Open floor

  • @paaljoachim raised some issues for discussion
    • there was a discussion on an option to use text link instead of auto embed ended with needing to clarify more on the issue
    • there was a discussion on the social block features needed for it to make it in WP 5.3 resulted in not having a light version because of the risk that we’d introduce breaking changes in core
  • @desaiuditd and @youknowriad discussed about https://github.com/WordPress/gutenberg/pull/17311

The next meeting is on 02 October 2019 at 13:00 UTC.

#core-editor, #editor-chat, #summary

Editor Chat Agenda: September 25th

Note taker: @andraganescu.

This is the agenda for the weekly editor chat scheduled for September 25, 2019 at 1300 UTC.

This meeting is held in the #core-editor channel in the Making WordPress Slack.

  • WordPress 5.3
  • Weekly Priorities
  • Task Coordination
  • Open Floor

If you have anything to share for the Task Coordination section, please leave it as a comment on this post.

As always, if you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #editor-chat

New Block APIs in WordPress 5.3

In addition to a number of improvements and features for the block editor, WordPress 5.3 comes with new Block-related APIs for developers.

Server-side block style variations API

It includes server-side helpers that simplify registering and unregistering block styles.

Previously, in order to register block styles, one was required to write a JavaScript script performing the registration and ensure that the script was enqueued properly. With WordPress 5.3, you can use the register_block_style and unregister_block_style PHP helpers for the whole process.

register_block_style

The register_block_style function receives the name of the block as the first argument and an array describing properties of the style as the second argument.

The properties of the style array must include name and label:

  • name: The identifier of the style used to compute a CSS class.
  • label: A human-readable label for the style.

Besides the two mandatory properties, the styles properties array should also include an inline_style or a style_handle property:

  • inline_style: Contains inline CSS code that registers the CSS class required for the style.
  • style_handle: Contains the handle to an already registered style that should be enqueued in places where block styles are needed.

The following code sample registers a style for the quote block named “Blue Quote”, and provides an inline style that makes quote blocks with the “Blue Quote” style have blue color:

register_block_style(
    'core/quote',
    array(
        'name'         => 'blue-quote',
        'label'        => __( 'Blue Quote' ),
        'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
    )
);

Alternatively, if a stylesheet was already registered containing the CSS for the style variation, it is possible to just pass the stylesheet’s handle so register_block_style function will make sure it is enqueued properly.

wp_register_style( 'myguten-style', get_template_directory_uri() . '/custom-style.css' );

register_block_style(
    'core/quote',
    array(
        'name'         => 'fancy-quote',
        'label'        => 'Fancy Quote',
        'style_handle' => 'myguten-style',
    )
);

unregister_block_style

unregister_block_style allows unregistering a block style previously registered on the server using register_block_style.

The function’s first argument is the registered name of the block, and the name of the style as the second argument.

The following code sample unregisteres the style named ‘fancy-quote’ from the quote block:

unregister_block_style( 'core/quote', 'fancy-quote' );

Important: The function unregister_block_style only unregisters styles that were registered on the server using register_block_style. The function does not unregister a style registered using client-side code.

Related PRs: 16356.

Block Example API

WordPress 5.3 also includes the ability to preview blocks from the library before inserting them. This can help users figure out at a glance which block they want to insert.

To support this feature in your custom blocks, make sure to define the example property in your block settings.

 const blockSettings = {
  // ... other settings

  example: {
      attributes: { 
          content: __( 'Content of the block' )
      },
      innerBlocks: []
  }

}

registerBlockType( name, settings );

Related PRs: 17124.

Props to @jorgefilipecosta for helping with this dev note.

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

Editor chat summary: 18 September 2019

This post summarizes the weekly editor chat meeting on Wednesday, 18 September 2019 at 1300 UTC held in Slack.

The agenda can be found here.

Many folks were in transit, which made this a less busy meeting than usual.

Gutenberg 6.5 Release

Releasing shortly. You can see the RC here.

This will be the last release that goes completely into WordPress 5.3.

This is released now!

Weekly Priorities

Help test the RC!

Now released and in trunk — Please help test!

Task Coordination

  • @nadir is working with @joen on improvements to the Separator block (may end up as new Divider block), and looking into making the Stylelint config more strict.

Open Floor

@paaljoachim wanted to bring attention to a couple tickets:

@mikeschroder brought up https://github.com/WordPress/gutenberg/issues/6652, which is in regards to adding height and width attributes back to images in Gutenberg.

This ticket had conversation that started on Twitter with a tweet from Jen Simmons. There is a WICG recommendation that Mozilla is testing (and sounds like Chrome is planning as well) that makes rendering faster if height and width attributes are provided for images.

@desaiuditd is looking for feedback on https://github.com/WordPress/gutenberg/pull/17311, specifically regarding details on how the proposed useFilter would work.


Note: If you’re reading this summary outside of the meeting, please leave a comment if you can/want to help with something.

The next meeting is on 25 August 2019 at 13:00 UTC.

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