Skip to content

Block API: light block edit/save symmetry#25644

Merged
ellatrix merged 4 commits intomasterfrom
try/block-api-symmetry
Sep 30, 2020
Merged

Block API: light block edit/save symmetry#25644
ellatrix merged 4 commits intomasterfrom
try/block-api-symmetry

Conversation

@ellatrix
Copy link
Copy Markdown
Member

@ellatrix ellatrix commented Sep 25, 2020 •
edited
Loading

Description

Replaces the earlier attempt #20721.
Things have changed now with the replacement of the block component by a hook in #23034.

This PR mirrors useBlockProps for light blocks in the save component, much like we do now for InnerBlocks and RichText. The benefit of this is that we could automatically add blocks classes with this component (if not opting out), making it seem less like a magical things that gets added during serialisation.

Another benefit is that a block could potentially render something around the actual block (such as an alignment wrapper), which is possible right now in the edit function, but not in the save function.

This must be done before stabilising the new (light) block API, because we're using the supports flag to adjust serialisation.
It creates a bit of consistency in the API, the only difference being that for edit it's a hook adding behaviours and for save it's a simple function useBlockProps.save to insert (filtered) attributes on the block wrapper.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@ellatrix ellatrix added the [Feature] Block API API that allows to express the block paradigm. label Sep 25, 2020
This was referenced Sep 25, 2020
Closed
Merged
@github-actions
Copy link
Copy Markdown

github-actions bot commented Sep 25, 2020 •
edited
Loading

Size Change: +190 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/block-editor/index.js 128 kB +17 B (0%)
build/block-library/index.js 135 kB +108 B (0%)
build/blocks/index.js 47.5 kB +65 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.52 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.53 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.57 kB 0 B
build/block-library/editor.css 8.58 kB 0 B
build/block-library/style-rtl.css 7.61 kB 0 B
build/block-library/style.css 7.6 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/index.js 167 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.42 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 1.27 kB 0 B
build/data/index.js 8.43 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.7 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.25 kB 0 B
build/edit-post/style.css 6.24 kB 0 B
build/edit-site/index.js 20.5 kB 0 B
build/edit-site/style-rtl.css 3.54 kB 0 B
build/edit-site/style.css 3.54 kB 0 B
build/edit-widgets/index.js 17.9 kB 0 B
build/edit-widgets/style-rtl.css 2.82 kB 0 B
build/edit-widgets/style.css 2.82 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.4 kB 0 B
build/editor/style-rtl.css 3.83 kB 0 B
build/editor/style.css 3.82 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.55 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.7 kB 0 B
build/server-side-render/index.js 2.61 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

youknowriad
youknowriad reviewed Sep 25, 2020
View reviewed changes
@ellatrix ellatrix force-pushed the try/block-api-symmetry branch from 58d34c6 to 568d0be Compare September 25, 2020 13:23
@ellatrix ellatrix force-pushed the try/block-api-symmetry branch from 568d0be to 3f6715a Compare September 25, 2020 13:29
youknowriad
youknowriad reviewed Sep 25, 2020
View reviewed changes
packages/block-library/src/audio/save.js Outdated
* WordPress dependencies
*/
import { RichText } from '@wordpress/block-editor';
import { getBlockProps } from '@wordpress/blocks';
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad Sep 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually wonder about the best place to export this, maybe useBlockProps.save()?

Copy link
Copy Markdown
Member Author

@ellatrix ellatrix Sep 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's possible too. I don't mind either way. I'll update it :)

Copy link
Copy Markdown
Member Author

@ellatrix ellatrix Sep 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks much nicer actually! :)

Copy link
Copy Markdown
Member

@ZebulanStanphill ZebulanStanphill Sep 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how I feel about exposing it through useBlockProps.save(). It feels a little weird to me, but I also don't outright dislike it. I'm okay with it either way. I suppose one benefit is that it more closely ties it to useBlockProps.

Copy link
Copy Markdown
Contributor

@youknowriad youknowriad Sep 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reasoning for proposing this is that later we might have useInnerBlocks.save() , useRichText.save()

Copy link
Copy Markdown
Member Author

@ellatrix ellatrix Sep 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I like this pattern. Good idea!

@ZebulanStanphill ZebulanStanphill added the [Type] New API New API to be used by plugin developers or package users. label Sep 25, 2020
@youknowriad
Copy link
Copy Markdown
Contributor

youknowriad commented Sep 25, 2020

I like this personally, i'd like more opinions here @mcsf @mtias @jorgefilipecosta

@ellatrix ellatrix force-pushed the try/block-api-symmetry branch from b32086b to 84aeb9e Compare September 25, 2020 15:22
youknowriad
youknowriad reviewed Sep 25, 2020
View reviewed changes
youknowriad
youknowriad reviewed Sep 25, 2020
View reviewed changes
@ellatrix ellatrix force-pushed the try/block-api-symmetry branch from 100e873 to 062d519 Compare September 25, 2020 16:25
youknowriad
youknowriad approved these changes Sep 25, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having more opinions is better but this is looking good for me.

@ellatrix
Copy link
Copy Markdown
Member Author

ellatrix commented Sep 25, 2020

I'll let it sit over the weekend. Would be nice to ship early Monday so we can stabilise it for the release.

@mcsf
Copy link
Copy Markdown
Contributor

mcsf commented Sep 28, 2020

Nice work here.

There are some aspects that I like:

What I don't like as much:

  • the occasional gotchas in block-library — e.g. how in RichText-based blocks we traded Richtext.Content tagName={} for a nesting of TagName > RichText.Content;
  • not knowing for sure that we don't introduce issues by introducing the coupling between blockType.save and wp.blocks.getSaveElement — e.g. are there blocks out there that consume save within edit, or do some other fancy footwork that could break?

All in all, I lean more towards yes than no, but it feels a little like a step in the dark.

@ellatrix
Copy link
Copy Markdown
Member Author

ellatrix commented Sep 28, 2020

  • the occasional gotchas in block-library — e.g. how in RichText-based blocks we traded Richtext.Content tagName={} for a nesting of TagName > RichText.Content;

It doesn't really matter, you can do both. You can also pass the props to RichText.Content.
The goal is to also have useRichTextProps and useRichTextProps.save.

  • not knowing for sure that we don't introduce issues by introducing the coupling between blockType.save and wp.blocks.getSaveElement — e.g. are there blocks out there that consume save within edit, or do some other fancy footwork that could break?

Similarly, edit is coupled to the block-editor. It will fail in other contexts.

@ellatrix
Copy link
Copy Markdown
Member Author

ellatrix commented Sep 28, 2020

  • e.g. are there blocks out there that consume save within edit, or do some other fancy footwork that could break?

Nothing would break, since this API is opt-in.

@ellatrix
Copy link
Copy Markdown
Member Author

ellatrix commented Sep 30, 2020

Let's do it. :)

@ellatrix ellatrix merged commit 6604831 into master Sep 30, 2020
@ellatrix ellatrix deleted the try/block-api-symmetry branch September 30, 2020 12:22
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Sep 30, 2020
@ellatrix ellatrix mentioned this pull request Oct 12, 2020
Merged
6 tasks
@mcsf mcsf mentioned this pull request Oct 14, 2020
Closed
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ZebulanStanphill ZebulanStanphill ZebulanStanphill left review comments

@youknowriad youknowriad youknowriad approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@ajlende ajlende Awaiting requested review from ajlende

@mkaz mkaz Awaiting requested review from mkaz

@Soean Soean Awaiting requested review from Soean

@talldan talldan Awaiting requested review from talldan

@mcsf mcsf Awaiting requested review from mcsf

@mtias mtias Awaiting requested review from mtias

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

Assignees

No one assigned

Labels

[Feature] Block API API that allows to express the block paradigm. [Type] New API New API to be used by plugin developers or package users.

Projects

None yet

Milestone

Gutenberg 9.2

Development

Successfully merging this pull request may close these issues.

4 participants

@ellatrix @youknowriad @mcsf @ZebulanStanphill