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 embed block to single block with block variations #24090

Merged
merged 48 commits into from
Aug 10, 2020

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Jul 21, 2020

Resolves: #22660

Above issue is part of #16209 that is a direction toward server-side awareness of block types.

This PR refactors embed block to be a single block ( single block.json ) with block variations, so as to register in on the server to be exposed in the REST API endpoint with block definitions.

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.

@ntsekouras ntsekouras added [Type] Task Issues or PRs that have been broken down into an individual action to take [Block] Embed Affects the Embed Block labels Jul 21, 2020
@ntsekouras ntsekouras self-assigned this Jul 21, 2020
@github-actions
Copy link

github-actions bot commented Jul 21, 2020

Size Change: +72 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/index.js 125 kB +132 B (0%)
build/block-editor/style-rtl.css 10.6 kB -146 B (1%)
build/block-editor/style.css 10.6 kB -142 B (1%)
build/block-library/index.js 132 kB -196 B (0%)
build/block-library/style-rtl.css 7.76 kB +1 B
build/block-library/style.css 7.77 kB +2 B (0%)
build/block-library/theme-rtl.css 729 B +1 B
build/block-library/theme.css 730 B +1 B
build/blocks/index.js 48.4 kB +98 B (0%)
build/components/index.js 200 kB -5 B (0%)
build/components/style-rtl.css 15.7 kB +2 B (0%)
build/components/style.css 15.7 kB +2 B (0%)
build/edit-post/index.js 304 kB +273 B (0%)
build/edit-post/style-rtl.css 5.62 kB +5 B (0%)
build/edit-post/style.css 5.61 kB +4 B (0%)
build/edit-site/index.js 17 kB +10 B (0%)
build/editor/index.js 45.3 kB +29 B (0%)
build/element/index.js 4.65 kB +1 B
ℹ️ 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/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.59 kB 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/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-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/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 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

Copy link
Contributor

@mcsf mcsf left a comment

Choose a reason for hiding this comment

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

Nice work so far! I need to come back for another pass.

packages/block-library/src/index.native.js Show resolved Hide resolved
packages/block-library/src/embed/util.js Outdated Show resolved Hide resolved
packages/block-library/src/embed/util.js Outdated Show resolved Hide resolved
packages/block-library/src/embed/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/embed/edit.js Show resolved Hide resolved
@mcsf
Copy link
Contributor

mcsf commented Jul 21, 2020

One thing we can't forget is to make sure the old types are still supported, i.e. core/embed-foo.

One way is to add support at the parser level, as was done for Social Icons:

// Convert derivative blocks such as 'core/social-link-wordpress' to the
// canonical form 'core/social-link'.
if ( name && name.indexOf( 'core/social-link-' ) === 0 ) {
// Capture `social-link-wordpress` into `{"service":"wordpress"}`
attributes.service = name.substring( 17 );
// Display social link service name for mobile platform
name = Platform.OS === 'web' ? 'core/social-link' : name;
}

There's also this comment from Greg about a different way of managing this, but we don't need to solve that now:

https://github.com/WordPress/gutenberg/pull/19887/files#r375181162

@mcsf
Copy link
Contributor

mcsf commented Jul 21, 2020

I pushed 6d3f5fe to scratch a personal itch: some of these effects become a lot clearer (and more autonomous?) by keeping their specific logic in one place.

@ntsekouras ntsekouras force-pushed the refactor/embed-block-variations branch 2 times, most recently from 70c3142 to a5abd79 Compare July 23, 2020 06:48
@ntsekouras ntsekouras force-pushed the refactor/embed-block-variations branch from c627a4d to 83c1738 Compare July 27, 2020 07:21
@ntsekouras ntsekouras marked this pull request as ready for review July 27, 2020 13:41
@ntsekouras ntsekouras force-pushed the refactor/embed-block-variations branch from bacbf07 to 66854bf Compare July 28, 2020 08:36
@ntsekouras ntsekouras force-pushed the refactor/embed-block-variations branch from 6399f50 to 65111df Compare July 28, 2020 15:11
@ntsekouras ntsekouras requested a review from hypest July 28, 2020 15:30
@mcsf
Copy link
Contributor

mcsf commented Jul 28, 2020

I noticed something when testing this with the Gutenberg demo (/wp-admin/post-new.php?gutenberg-demo):

  1. Open the demo post
  2. Scroll down to the Vimeo embed block
  3. Switch to Code mode, then back to Visual

Observed in master: no change in the embed's alignment and size:

before

Observed in this branch: the embed looks fine before switching modes, but not after:

after-2

@cameronvoell
Copy link
Member

On the native mobile side, we do not support any embed blocks yet, but we did see an issue after this change related to how we direct users to edit unsupported (native mobile) blocks from the mobile editor. A GIF demonstrating that flow can be seen on this PR. We left a note with mobile devs who worked on that flow and should have more info soon on necessary mobile side changes.

@hypest
Copy link
Contributor

hypest commented Jul 29, 2020

We left a note with mobile devs who worked on that flow and should have more info soon on necessary mobile side changes.

Thanks for the ping @ntsekouras and for looking into this @cameronvoell ! If possible Nik, can we momentarily hold merging this PR until we get a better idea on how to fix/avoid the mobile breakage (@etoledom is looking deeper into this)? Let me know if there is any kind of urgency for landing this PR though, thanks!

Copy link
Contributor

@mcsf mcsf left a comment

Choose a reason for hiding this comment

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

Great job here!

@ntsekouras ntsekouras merged commit 0259002 into master Aug 10, 2020
@ntsekouras ntsekouras deleted the refactor/embed-block-variations branch August 10, 2020 11:58
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 10, 2020
@ockham
Copy link
Contributor

ockham commented Aug 10, 2020

It seems to me that preview is always undefined in createUpgradedEmbedBlock. This is only relevant for WordPress embeds (since they're the only embed that doesn't just look at the URL but the preview HTML). IIRC, the preview used to be generated through some component lifecycle methods; maybe something there got broken.

(Please take with a grainof salt, this is the result of some preliminary testing; I'll continue to look into this tomorrow.)

@ockham
Copy link
Contributor

ockham commented Aug 13, 2020

ping @ntsekouras about my #24090 (comment):

It seems to me that preview is always undefined in createUpgradedEmbedBlock. This is only relevant for WordPress embeds (since they're the only embed that doesn't just look at the URL but the preview HTML). IIRC, the preview used to be generated through some component lifecycle methods; maybe something there got broken.

Can you have a look what might've changed there? 🙏


Furthermore, related to this comment: Automattic/wp-calypso#39935 (comment):

There is proper backwards compatibility with core but I've noticed in .com the above field providerNameSlug is not filled by some middleware you have there, I guess. This will cause problems with older embed blocks as it compares them with current version and the providerNameSlug adds css classes based on provider, that makes them invalid.

So you'll have to fill this property properly. If you need any help please let me know!

I'm having trouble understanding the point of the providerNameSlug. AFAICS, it's identical to the embed's name field in all cases. Doesn't that make it redundant? (If it is, I'd suggest removing it, to avoid confusion)

Furthermore, does it work like it's supposed to? For example, if I embed any recent posts from ma.tt, the providerNameSlug I get from them is always matt-mullenweg rather than wordpress. 🤔

@ntsekouras
Copy link
Contributor Author

Can you have a look what might've changed there? 🙏

Preview is retrieved from getEmbedPreview core' selector and I haven't changed anything there. Since this is async, it certainly is undefined` in some React lifecycles.

In time of development I had observed a weird behaviour of WordPress embed blocks and I had discussed it with @mcsf. For example the providerNameSlug is indeed related to the site and not wordpress as I might have expected. Also related: #21029.

We came to a conclusion not to alter any related functionality as that PR's main goal was the refactoring to a single block and not take a deep dive into WordPress embed block.

I'm having trouble understanding the point of the providerNameSlug. AFAICS, it's identical to the embed's name field

For now it's the same but I don't know if it would be best to remove it. It feels like a convention to extract information from name for the provider property. Maybe in the future we'll have blocks from the same provider but different services, ex youtube could be the provider for more than one services? I'm not really sure about this though..

@ockham
Copy link
Contributor

ockham commented Aug 17, 2020

Thanks for getting back to me!

Can you have a look what might've changed there? pray

Preview is retrieved from getEmbedPreview core' selector and I haven't changed anything there. Since this is async, it certainly is undefined` in some React lifecycles.

The point is that it always seems to be undefined for me now if I paste the URL of a WordPress site, whereas prior to this PR, it would indeed contain a preview of the given site. Can you repro this?

In time of development I had observed a weird behaviour of WordPress embed blocks and I had discussed it with @mcsf. For example the providerNameSlug is indeed related to the site and not wordpress as I might have expected. Also related: #21029.

We came to a conclusion not to alter any related functionality as that PR's main goal was the refactoring to a single block and not take a deep dive into WordPress embed block.

I'm a bit confused since I thought you said that the matching algorithm was changed to respect providerNameSlug per #24090 🤔

Overall, I agree on the approach of not making functional changes in a refactor PR -- I'm really just trying to find out what might've inadvertently broken the WordPress embed transformation.

I'm having trouble understanding the point of the providerNameSlug. AFAICS, it's identical to the embed's name field

For now it's the same but I don't know if it would be best to remove it. It feels like a convention to extract information from name for the provider property.

That makes sense for data that we fetch from 3rd party resources (like those embeds), but not so much for a hardcoded JSON, does it? 🤔

Maybe in the future we'll have blocks from the same provider but different services, ex youtube could be the provider for more than one services? I'm not really sure about this though..

This seems like a textbook case of the YAGNI pattern -- we might need something in the future, but for now, the providerNameSlug is always identical to the name. I'd vote to remove -- if we need to add or modify functionality later, and that requires us to add a different field, we can do that then.

@ntsekouras
Copy link
Contributor Author

The point is that it always seems to be undefined for me now if I paste the URL of a WordPress site, whereas prior to this PR, it would indeed contain a preview of the given site. Can you repro this?

I can't because I had tried this when working on this PR and wasn't able to get Preview in the editor from master as well.
It seemed to be working on the front-end, both master and mine branch. Then the discussion happened not to dig into this, as we haven't changed the related functionality. I can give it a try again though.. Can you share a link that previously could fetch a preview and now can't?

I'm a bit confused since I thought you said that the matching algorithm was changed to respect providerNameSlug per #24090 🤔

There was no change regarding the handling of WordPress embed block. The matching algorithm had to change as previously the other embeds were different blocks with different names. It doesn't affect the preview though from getEmbedPreview selector.

That makes sense for data that we fetch from 3rd party resources (like those embeds), but not so much for a hardcoded JSON, does it? 🤔
This seems like a textbook case of the YAGNI pattern

Yes it does and it overrides the property conditionally in getAttributesFromPreview. I'm not opposed to removing the attribute and it seems to be only used in embed block. The conditionally part should be checked though because there might be a need there for it after all, that is not clear to me at least. --cc @youknowriad @mcsf

@youknowriad
Copy link
Contributor

Question here: What happens to existing blocks? Do we keep them as hidden or something? Do we want to write a dev note about this change?

@ntsekouras
Copy link
Contributor Author

Question here: What happens to existing blocks? Do we keep them as hidden or something?

Backwards compatibility is handled in parser level in a similar fashion with social block:

if ( name && name.indexOf( 'core-embed/' ) === 0 ) {

Do we want to write a dev note about this change?

A dev note about informing the change of embed block to a single block?

@youknowriad
Copy link
Contributor

@ntsekouras yes, what happens if a user is using the old blocks in a CPT template for instance where the parser is not used?

@gziolo
Copy link
Member

gziolo commented Oct 15, 2020

It would be great to expose embed block type on the server, similar to all other core blocks:

'block_folders' => array(

We should also expose it in WordPress core, it needs to be added at least here:
https://github.com/WordPress/wordpress-develop/blob/701dee26f19b4bfdcbc1cc636f5fdecd8a753432/tools/webpack/packages.js#L118

@mcsf
Copy link
Contributor

mcsf commented Oct 15, 2020

Good catch.

jeherve added a commit to Automattic/jetpack that referenced this pull request Aug 26, 2021
See Automattic/wp-calypso#55357

Before WP 5.6 and this PR: WordPress/gutenberg#24090
WordPress had multiple embed blocks, one for each service, all starting with core-embed/. After WP 5.6, we now have a single embed block, core/embed, with variations for each service.

Let's support both formats in the Responsive Videos.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Embed Affects the Embed Block [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Block Library: Refactor Embed block to use block.json and block variations
9 participants