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

Use register_block_type_from_metadata function #7970

Merged
merged 41 commits into from Jul 5, 2021

Conversation

spacedmonkey
Copy link
Contributor

@spacedmonkey spacedmonkey commented Jun 17, 2021

Context

Summary

The register_block_type_from_metadata function will be added in WordPress 5.5. The web stories plugin should use the register_block_type_from_metadata function and register on attributes in block.json.

Relevant Technical Choices

I copied the block.json file into the assets/js directory so it would used on the built version of the plugin.

To-do

User-facing changes

Testing Instructions

QA

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

  1. Create a new post
  2. Insert web stories block.
  3. Block should work as before.

UAT

  • UAT should use the same steps as above.

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This PR contains automated tests (unit, integration, and/or e2e) to verify the code works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #3331

@spacedmonkey spacedmonkey added Type: Enhancement New feature or improvement of an existing feature Group: WordPress Changes related to WordPress or Gutenberg integration Pod: WP & Infra labels Jun 17, 2021
@spacedmonkey spacedmonkey self-assigned this Jun 17, 2021
@google-cla google-cla bot added the cla: yes label Jun 17, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Jun 17, 2021

Size Change: +1.58 kB (0%)

Total Size: 2.2 MB

Filename Size Change
assets/js/edit-story.js 553 kB +3.03 kB (+1%)
assets/js/stories-dashboard.js 451 kB +182 B (0%)
assets/js/vendors-edit-story-stories-dashboard-********************.js 231 kB -962 B (0%)
assets/js/web-stories-block.js 565 kB -691 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/carousel-view-rtl.css 701 B 0 B
assets/css/carousel-view.css 701 B 0 B
assets/css/edit-story-rtl.css 277 B 0 B
assets/css/edit-story.css 277 B 0 B
assets/css/stories-dashboard-rtl.css 276 B 0 B
assets/css/stories-dashboard.css 276 B 0 B
assets/css/vendors-edit-story-rtl.css 706 B 0 B
assets/css/vendors-edit-story.css 706 B 0 B
assets/css/web-stories-block-rtl.css 3.21 kB 0 B
assets/css/web-stories-block.css 3.24 kB 0 B
assets/css/web-stories-embed-rtl.css 288 B 0 B
assets/css/web-stories-embed.css 288 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.24 kB 0 B
assets/css/web-stories-list-styles.css 2.25 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 264 B 0 B
assets/css/web-stories-widget-rtl.css 484 B 0 B
assets/css/web-stories-widget.css 484 B 0 B
assets/js/carousel-view.js 3.72 kB 0 B
assets/js/chunk-fonts-********************.js 45.4 kB 0 B
assets/js/chunk-web-stories-template-0-********************.js 472 B +1 B (0%)
assets/js/chunk-web-stories-template-10-********************.js 7.94 kB 0 B
assets/js/chunk-web-stories-template-12-********************.js 466 B 0 B
assets/js/chunk-web-stories-template-16-********************.js 7.86 kB 0 B
assets/js/chunk-web-stories-template-18-********************.js 478 B -1 B (0%)
assets/js/chunk-web-stories-template-22-********************.js 8.11 kB 0 B
assets/js/chunk-web-stories-template-24-********************.js 425 B 0 B
assets/js/chunk-web-stories-template-28-********************.js 9.73 kB 0 B
assets/js/chunk-web-stories-template-30-********************.js 458 B 0 B
assets/js/chunk-web-stories-template-34-********************.js 8.54 kB 0 B
assets/js/chunk-web-stories-template-36-********************.js 450 B +1 B (0%)
assets/js/chunk-web-stories-template-4-********************.js 7.96 kB 0 B
assets/js/chunk-web-stories-template-40-********************.js 6.99 kB 0 B
assets/js/chunk-web-stories-template-42-********************.js 443 B +1 B (0%)
assets/js/chunk-web-stories-template-46-********************.js 9.2 kB 0 B
assets/js/chunk-web-stories-template-48-********************.js 462 B 0 B
assets/js/chunk-web-stories-template-52-********************.js 6.06 kB 0 B
assets/js/chunk-web-stories-template-54-********************.js 481 B +1 B (0%)
assets/js/chunk-web-stories-template-58-********************.js 7.98 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 497 B -1 B (0%)
assets/js/chunk-web-stories-template-60-********************.js 487 B -1 B (0%)
assets/js/chunk-web-stories-template-64-********************.js 7.84 kB 0 B
assets/js/chunk-web-stories-template-66-********************.js 510 B +1 B (0%)
assets/js/chunk-web-stories-template-70-********************.js 8.33 kB 0 B
assets/js/chunk-web-stories-template-72-********************.js 445 B 0 B
assets/js/chunk-web-stories-template-76-********************.js 8.65 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 5.29 kB 0 B
assets/js/chunk-web-stories-textset-1-********************.js 6.81 kB 0 B
assets/js/chunk-web-stories-textset-2-********************.js 7.92 kB 0 B
assets/js/chunk-web-stories-textset-3-********************.js 15.4 kB 0 B
assets/js/chunk-web-stories-textset-4-********************.js 4.43 kB 0 B
assets/js/chunk-web-stories-textset-5-********************.js 5.71 kB 0 B
assets/js/chunk-web-stories-textset-6-********************.js 5.5 kB 0 B
assets/js/chunk-web-stories-textset-7-********************.js 10.4 kB 0 B
assets/js/lightbox.js 986 B 0 B
assets/js/tinymce-button.js 3.48 kB 0 B
assets/js/vendors-chunk-ffmpeg-********************.js 5.6 kB +3 B (0%)
assets/js/vendors-edit-story-********************.js 64.2 kB +15 B (0%)
assets/js/vendors-web-animations-js-********************.js 14.6 kB -1 B (0%)
assets/js/web-stories-activation-notice.js 65.1 kB 0 B
assets/js/web-stories-embed.js 493 B +1 B (0%)
assets/js/web-stories-widget.js 984 B 0 B

compressed-size-action

@spacedmonkey spacedmonkey requested a review from miina June 17, 2021 14:41
@spacedmonkey spacedmonkey added this to the 1.9.0 milestone Jun 17, 2021
Copy link
Contributor

@miina miina left a comment

Choose a reason for hiding this comment

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

The tests are failing, is this because of the dependency on WP minimum version?

Would be good to have QA on this one, too, to ensure the block is working as expected.

assets/src/web-stories-block/block/block.json Outdated Show resolved Hide resolved
assets/src/web-stories-block/block/block.json Show resolved Hide resolved
@miina
Copy link
Contributor

miina commented Jun 18, 2021

@spacedmonkey Can you confirm the block can still be found via search to insert to a post, and everything is working as expected? I tried to search it by "stories" and it did not appear, whereas on main it appears as expected.

@spacedmonkey
Copy link
Contributor Author

@spacedmonkey Can you confirm the block can still be found via search to insert to a post, and everything is working as expected? I tried to search it by "stories" and it did not appear, whereas on main it appears as expected.

@miina Have you run checked it out locally, and run npm i; npm run dev. After doing that it worked fine.

Screenshot 2021-06-21 at 11 55 39

@miina
Copy link
Contributor

miina commented Jun 21, 2021

Have you run checked it out locally, and run npm i; npm run dev. After doing that it worked fine.

I did, will try again.

@miina
Copy link
Contributor

miina commented Jun 21, 2021

Yep, seems to work ok, the search 👍

@codecov
Copy link

codecov bot commented Jun 21, 2021

Codecov Report

Merging #7970 (c8cbb44) into main (399cf65) will decrease coverage by 3.59%.
The diff coverage is 28.57%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #7970      +/-   ##
==========================================
- Coverage   83.41%   79.81%   -3.60%     
==========================================
  Files        1252     1385     +133     
  Lines       18482    23948    +5466     
==========================================
+ Hits        15416    19114    +3698     
- Misses       3066     4834    +1768     
Flag Coverage Δ
karmatests 76.20% <ø> (-0.16%) ⬇️
unittests 61.89% <100.00%> (-0.25%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
includes/Block/Web_Stories_Block.php 8.64% <0.00%> (ø)
assets/src/web-stories-block/block/index.js 100.00% <100.00%> (ø)
assets/src/web-stories-block/block/transforms.js 13.33% <100.00%> (+6.19%) ⬆️
.../components/thumbnail/components/LayerThumbnail.js 28.57% <0.00%> (-21.43%) ⬇️
assets/src/edit-story/elements/video/icon.js 85.71% <0.00%> (-14.29%) ⬇️
...rc/edit-story/components/carousel/secondaryMenu.js 90.90% <0.00%> (-9.10%) ⬇️
...rc/edit-story/components/header/buttons/publish.js 91.89% <0.00%> (-8.11%) ⬇️
assets/src/edit-story/components/layout/index.js 100.00% <0.00%> (ø)
assets/src/edit-story/app/media/useUploadMedia.js 57.62% <0.00%> (ø)
assets/src/edit-story/components/tablist/styles.js 100.00% <0.00%> (ø)
... and 166 more

@swissspidy
Copy link
Collaborator

Note that there are some failing JS unit tests. Looks like the package lock file got messed up.

Apart from that, still not sure about this point:

I copied the block.json file into the assets/js directory so it would used on the built version of the plugin.

I see why this was needed, but it begs the question whether it wouldn't be easier to simply move this elsewhere to another directory so we don't have to look for this file in both places (src and js)

Copying the block.json file to assets/js, checking for its existence, loading it from assets/src as a fallback, etc. is a lot of work for little advantage.

register_block_type(
self::BLOCK_NAME,
register_block_type_from_metadata(
$base_path,
[
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is this second parameter still needed? All the attributes could theoretically be defined in block.json alone, right?

Except probably for the 'default' => __( 'Web Story', 'web-stories' ) bit as it would not be translatable in block.json. That said, that default could perhaps be enforced some other way.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, the reason is those translatable default values. We could do that some other way, I am not sure the point of it.

Copy link
Collaborator

Choose a reason for hiding this comment

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

If we'd do those some other way, then block.json would really be the single source of truth. Hence the question.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I am not sure how we would do that.

@@ -87,10 +80,25 @@ public function register() {
$this->get_script_settings()
);

$base_path = $this->assets->get_base_path( 'assets/js/block.json' );
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is there a reason why this call isn't just within register_block_type()? Seems a bit superfluous to have this $base_path param.

@swissspidy
Copy link
Collaborator

Note that there are some failing JS unit tests. Looks like the package lock file got messed up.

Apart from that, still not sure about this point:

I copied the block.json file into the assets/js directory so it would used on the built version of the plugin.

I see why this was needed, but it begs the question whether it wouldn't be easier to simply move this elsewhere to another directory so we don't have to look for this file in both places (src and js)

Copying the block.json file to assets/js, checking for its existence, loading it from assets/src as a fallback, etc. is a lot of work for little advantage.

What if the file would live in blocks/embed/block.json?

@spacedmonkey
Copy link
Contributor Author

What if the file would live in blocks/embed/block.json?

Do you mean in src or includes? What about the built version of the plugin?

# Conflicts:
#	package-lock.json
#	package.json
@swissspidy
Copy link
Collaborator

What if the file would live in blocks/embed/block.json?

Do you mean in src or includes? What about the built version of the plugin?

Just /blocks/embed/block.json in the plugin root folder.

Screenshot 2021-07-01 at 18 45 54

@spacedmonkey
Copy link
Contributor Author

Just /blocks/embed/block.json in the plugin root folder.

But block.json is used in JS as well.
https://github.com/google/web-stories-wp/blob/399cf6562acd352b71e4152b2748b70a5fe33ebe/assets/src/web-stories-block/block/index.js#L29

We would have to change this reference here as well, I am not sure I like that.

How about just building JS in PHP Unit tests in CI?

@swissspidy
Copy link
Collaborator

Just /blocks/embed/block.json in the plugin root folder.

But block.json is used in JS as well.
https://github.com/google/web-stories-wp/blob/399cf6562acd352b71e4152b2748b70a5fe33ebe/assets/src/web-stories-block/block/index.js#L29

We would have to change this reference here as well, I am not sure I like that.

Yeah it would mean changing one path there, but also means we don't need CopyWebpackPlugin and don't need to check for two paths in Web_Stories_Block.

I'll create a quick PR to demo what this could look like.

How about just building JS in PHP Unit tests in CI?

PHP unit tests right now work without having to build anything and I think we should keep it that way.

@spacedmonkey
Copy link
Contributor Author

@swissspidy Can you review again?

web-stories.php Outdated
@@ -114,6 +114,7 @@ function web_stories_get_compat_instance() {
$compatibility->set_wp_version( WEBSTORIES_MINIMUM_WP_VERSION );
$compatibility->set_required_files(
array(
WEBSTORIES_PLUGIN_DIR_PATH . '/blocks/embed/block.json',
Copy link
Collaborator

Choose a reason for hiding this comment

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

This can be removed again now as this is not a generated file.

Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

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

LGTM with one nit

web-stories.php Outdated Show resolved Hide resolved
@swissspidy swissspidy merged commit 01e9b14 into main Jul 5, 2021
@swissspidy swissspidy deleted the use/register_block_type_from_metadata branch July 5, 2021 13:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: WordPress Changes related to WordPress or Gutenberg integration Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use register_block_type_from_metadata function
3 participants