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

Refactor server-side block support flags support #24351

Merged
merged 6 commits into from
Aug 6, 2020

Conversation

youknowriad
Copy link
Contributor

This PR refactors the code to add block support flags support in the server for dynamic blocks.
It also allows support flags to register extra attributes automatically (done for the align one for the moment).

Testing instructions

  • Make sure the FSE post blocks still support alignment, colors, and typography properly on the frontend.

@youknowriad youknowriad added [Type] Code Quality Issues or PRs that relate to code quality [Feature] Full Site Editing Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Aug 4, 2020
@youknowriad youknowriad self-assigned this Aug 4, 2020
@github-actions
Copy link

github-actions bot commented Aug 4, 2020

Size Change: -17 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/index.js 125 kB +28 B (0%)
build/block-editor/style-rtl.css 10.8 kB +8 B (0%)
build/block-editor/style.css 10.8 kB +6 B (0%)
build/block-library/editor-rtl.css 7.59 kB -5 B (0%)
build/block-library/editor.css 7.59 kB -5 B (0%)
build/block-library/index.js 132 kB -49 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-library/style-rtl.css 7.76 kB 0 B
build/block-library/style.css 7.77 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.3 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 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 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 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.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 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.56 kB 0 B
build/primitives/index.js 1.41 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.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@oandregal
Copy link
Member

🤔 if this code is responsible for converting block attributes into the corresponding classes & inline styles for dynamic blocks, shouldn't this be part of the block API in the server? In other words, why would we want this code separate from the WP_Block class?

@youknowriad
Copy link
Contributor Author

These are seen as "extensions", We have the same thing on frontend, we don't bundle this code is block registration.
Writing as extensions is just a way to allow adding/removing extensions as needed. It's perfect for scalability.

@oandregal
Copy link
Member

I like that core absorbs this functionality -as we're doing in the client- so the block authors don't have to implement it for every block. I also like that we're thinking on how to extend the code. I guess what I'm missing is why this specific bit of code needs to be extension: is there any case in which we don't want to attach classes/styles to dynamic blocks?

@youknowriad
Copy link
Contributor Author

I guess what I'm missing is why this specific bit of code needs to be extension: is there any case in which we don't want to attach classes/styles to dynamic blocks?

Right now in this PR we have three files: align.php, taxonomy.php and colors.php
I consider each one of these as an extension (hook) similar to the hooks we have on the frontend align.js, color.js
If we need to add more, we'd need to add a new file and call the functions in index.php
Does that answer the question?

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

Thanks for taking the time to refactor this, it does look much better and will definitely be more easily scalable this way.

Im still finding a couple issues and have some minor questions

lib/block-supports/colors.php Outdated Show resolved Hide resolved
// Ideally we need a hook to extend the block registration
// instead of mutating the block type.
foreach ( $registered_block_types as $block_type ) {
gutenberg_register_alignment_support( $block_type );
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we be doing the same for colors and typography to initialize named and the style attribute? While only align seemed to be causing issues with the uses of ServerSideRender component, it would seem to be thorough to register the attributes used in all the hooks similarly.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, we should, I just left it for a separate PR.

lib/block-supports/align.php Show resolved Hide resolved
@oandregal
Copy link
Member

oandregal commented Aug 5, 2020

Right now in this PR we have three files: align.php, taxonomy.php and colors.php

Ouch, what a misunderstanding 😅 Let me clarify. I definitely think that file organization is nice.

My question was about why do we hook this code to the render_block filter instead of making a call from the WP_Block class given that this piece of code is executed for all dynamic blocks.

Note that I'm not familiar with this part of the codebase so may be missing some context, hence why I ask.

@youknowriad
Copy link
Contributor Author

youknowriad commented Aug 5, 2020

Well I don't have a strong preference but we're on the plugin so we can't touch that code and second because I feel it's nicer to write things as extensions/plugins in Core, it proves our extensions API, the same question can be asked about the JS filters, why not embed the behavior in BlockEdit instead of using filters/hooks.

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

This looks good and tests well for me. There is one more spot we probably want to use gutenberg_experimental_get.

It's a bit hard to tell where exactly things have been changed since we moved files as well, but I think you highlighted most of the changes and after reading through things again everything appears to be good as far as I can tell (plus it all tests well ✅ ).

Thanks again for cleaning this up and improving it a bit!

lib/block-supports/align.php Outdated Show resolved Hide resolved
lib/block-supports/index.php Show resolved Hide resolved
@youknowriad
Copy link
Contributor Author

The failures in the tests here are due to npm being down at the moment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants