Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RichText changes and custom blocks backwards compatibility for WP 5.3 #17405

Closed
afercia opened this issue Sep 11, 2019 · 3 comments · Fixed by #17439

Comments

@afercia
Copy link
Contributor

commented Sep 11, 2019

Describe the bug
Recent changes related to the RichText component (tested in Gutenberg 6.4.0) seem to break backwards compatibility with custom blocks that work on WordPress 5.2 (not sure what the Gutenberg version is there).

To reproduce

  • on WordPress trunk 5.3 alpha
  • install latest Yoast SEO 12.0
  • create a post and add a "How-to" block
  • see the block UI works as expected:
    • clicking the 3 editable fields (actually they're 3 RichText) sets focus on the fields
    • the placeholder stays visible because the block uses keepPlaceholderOnFocus={ true }
    • when clicking the "step title" or the "step description", additional buttons appear within the UI
    • screenshot:

Screenshot 2019-09-11 at 15 18 48

  • activate the Gutenberg plugin: I tested latest master 6.4.0 50fb29b
  • click multiple times on the editable fields and see the fields area is only partially clickable, and sometimes clicking doesn't set focus on the fields
  • click the "step title" or the "step description": the additional buttons UI doesn't appear

Expected behavior
The custom blocks to work in the same way they work with the previous Gutenberg version.

Additional context

To my understanding, there are a few potential breaking changes in Gutenberg 6.4.0. Briefly:

The RichText is now split in two components:
#15212

There will be two RichText components in each package, where the one in the block-editor package wraps the one in the rich-text package and adds block context.

Also, there are several renamed props marked as “unstable”, for example isSelected is now __unstableIsSelected (besides unstableOnFocus).

There's a few temporary unstable props added that aid this wrapping, but in the future these props should be stabilised. Some props might disappears, some need to be renamed for the "bare" RichText component.

Looks like there's no backwards compatibility with custom blocks that make use of the RichText component out of the way Gutenberg uses it. I do realise Yoast SEO implementation is "custom" but that usage of RichText used to be legitimate and now it breaks on Gutenberg 6.4.0. There may be other potential breakages with other plugins as well.

The Yoast SEO blocks can be explored at https://github.com/Yoast/wordpress-seo/tree/trunk/js/src/structured-data-blocks

Also, the keepPlaceholderOnFocus prop was removed. This removal is undocumented so far. See #16733

Worth also reminding that wp.editor.RichText is now deprecated and wp.blockEditor.RichText should be used instead. When developers switch to wp.blockEditor.RichText they will get the new RichText which brings in props with different names. The old props names should be translated to the new names in some way: this specific point was mentioned by @gziolo

This issue was discussed during today's weekly editor meeting on Slack, see https://wordpress.slack.com/archives/C02QB2JS7/p1568208422122500

Agreed with the Gutenberg team to create a new issue to ensure backwards compatibility.

@afercia

This comment has been minimized.

Copy link
Contributor Author

commented Sep 11, 2019

Raising the priority as I'd tend to think these backwards compatibility concerns should be double checked in time for the WordPress 5.3 Beta phase, which is in a few weeks.

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 15, 2019

  1. wp.blockEditor.RichText has been introduced a while time ago (by @youknowriad I believe) and has nothing to do with the RichText component abstraction, which you can find in the rich-text package. That component is not meant to be used in blocks, but is used by the wp.blockEditor.RichText internally.
  2. isSelected has not been renamed. It should still be there.

When developers switch to wp.blockEditor.RichText they will get the new RichText which brings in props with different names.

@afercia Which props are you talking about?

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 15, 2019

I believe this issue can be closed with the merge of #17439.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.