Embed Block: Refactor setting panel to use ToolsPanel #69636

shimotmk · 2025-03-20T00:57:59Z

What?

Make the settings panel more consistent with other blocks

Testing Instructions

Open a post or page.
Insert a embed block
Open the settings panel
You can see that you can set it up just like before Media settings.

<!-- wp:embed /-->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=Ok6JKHMAkH8\u0026t","type":"video","providerNameSlug":"youtube","responsive":true,"className":"add wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube add wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=Ok6JKHMAkH8&amp;t
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://twitter.com/WordPress/status/1902028052193792485","type":"rich","providerNameSlug":"twitter","responsive":true,"className":"add"} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter add"><div class="wp-block-embed__wrapper">
https://twitter.com/WordPress/status/1902028052193792485
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://wordpress.org/about/","type":"wp-embed","providerNameSlug":"wordpress-org"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-wordpress-org wp-block-embed-wordpress-org"><div class="wp-block-embed__wrapper">
https://wordpress.org/about/
</div></figure>
<!-- /wp:embed -->

Screenshots or screencast

before

before.mp4

after

after.mp4

github-actions · 2025-03-20T00:58:10Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

github-actions · 2025-03-20T00:58:14Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

carolinan · 2025-04-12T12:35:40Z

Hi
Can you please explain how the className changes are related to the ToolsPanel, it is not clear to me only from reading the code.

carolinan · 2025-04-12T12:45:30Z

I copied this from the editor after placing the example code in my post.

On trunk, without the PR:

<figure tabindex="0" draggable="true"
class="block-editor-block-list__block wp-block add wp-embed-aspect-16-9 wp-has-aspect-ratio wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube"

With the PR applied:

<figure tabindex="0" draggable="true" 
class="block-editor-block-list__block wp-block add wp-embed-aspect-16-9 wp-has-aspect-ratio wp-block-embed add wp-embed-aspect-16-9 wp-has-aspect-ratio is-type-video is-provider-youtube wp-block-embed-youtube"

I don't think these duplicated class names are correct?

t-hamano

Thanks for the PR!

What do you think about the approach of making toggleResponsive a function? If we do that, we won't need to add new props to the EmbedControls component.

I think it would look something like this:

function toggleResponsive( newAllowResponsive ) {
	const { className } = attributes;
	const { html } = preview;
	setAttributes( {
		allowResponsive: newAllowResponsive,
		className: getClassNames(
			html,
			className,
			responsive && newAllowResponsive
		),
	} );
}

shimotmk · 2025-05-25T21:54:32Z

Thanks for the review.
The new toggleResponsive seems to work fine!

I don't think these duplicated class names are correct?

The duplicate class names seem to be a separate issue.
I won't fix it in this PR, but will make a separate one.
This also occurs in trunk.

packages/block-library/src/embed/embed-controls.js

t-hamano

LGTM! Finally, could you merge the trunk branch into this PR or rebase this PR with the trunk branch?

I don't think these duplicated class names are correct?

This issue can be reproduced on trunk by following the steps below:

Insert an Embed block.
Embed a YouTube URL (Example: https://www.youtube.com/watch?v=Ok6JKHMAkH8)
Class names:
- block-editor-block-list__block
- wp-block
- is-selected
- wp-embed-aspect-16-9
- wp-has-aspect-ratio
- wp-block-embed
- is-type-video
- is-provider-youtube
- wp-block-embed-youtube,
Disable the "Resize for smaller devices" setting.
Class names:
- block-editor-block-list__block
- wp-block
- is-selected
- wp-block-embed
- is-type-video
- is-provider-youtube
- wp-block-embed-youtube
Enable the "Resize for smaller devices" setting again.
Class names:
- block-editor-block-list__block
- wp-block
- is-selected
- wp-embed-aspect-16-9
- wp-has-aspect-ratio
- wp-block-embed
- wp-embed-aspect-16-9
- wp-has-aspect-ratio
- is-type-video
- is-provider-youtube,
- `wp-block-embed-youtube

This issue only occurs in the editor and is not caused by this PR.

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

shimotmk · 2025-05-27T09:43:32Z

Thanks for the review!

* Embed Block: Refactor setting panel to use ToolsPanel * fix toggleResponsive * fix onDeselect * Update packages/block-library/src/embed/embed-controls.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Update packages/block-library/src/embed/embed-controls.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Update packages/block-library/src/embed/embed-controls.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --------- Co-authored-by: shimotmk <shimotomoki@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org>

shimotmk requested review from ajitbohra and fabiankaegy as code owners March 20, 2025 00:57

shimotmk mentioned this pull request Mar 20, 2025

Standardize Block Inspector Settings to use ToolsPanel - Tracking Issue #67813

Closed

t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Embed Affects the Embed Block labels Mar 27, 2025

t-hamano linked an issue May 25, 2025 that may be closed by this pull request

Refactor "Settings" panel of Embed block to use ToolsPanel instead of PanelBody #70208

Closed

t-hamano reviewed May 25, 2025

View reviewed changes

shimotmk force-pushed the enhancement/refactor-embed-block-control-panel branch from aa4f9b8 to 7b2d957 Compare May 25, 2025 21:08

t-hamano reviewed May 26, 2025

View reviewed changes

packages/block-library/src/embed/embed-controls.js Outdated Show resolved Hide resolved

packages/block-library/src/embed/embed-controls.js Outdated Show resolved Hide resolved

packages/block-library/src/embed/embed-controls.js Outdated Show resolved Hide resolved

t-hamano approved these changes May 26, 2025

View reviewed changes

shimotmk and others added 6 commits May 26, 2025 18:13

Embed Block: Refactor setting panel to use ToolsPanel

9a15eab

fix toggleResponsive

2eea9af

fix onDeselect

e6c3a4c

Update packages/block-library/src/embed/embed-controls.js

a54677d

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

Update packages/block-library/src/embed/embed-controls.js

2111153

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

Update packages/block-library/src/embed/embed-controls.js

5565ca3

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

shimotmk force-pushed the enhancement/refactor-embed-block-control-panel branch from 3bebe8c to 5565ca3 Compare May 26, 2025 09:14

t-hamano merged commit 5d41556 into WordPress:trunk May 27, 2025
89 of 126 checks passed

github-actions bot added this to the Gutenberg 21.0 milestone May 27, 2025

shimotmk deleted the enhancement/refactor-embed-block-control-panel branch May 27, 2025 04:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Embed Block: Refactor setting panel to use ToolsPanel #69636

Embed Block: Refactor setting panel to use ToolsPanel #69636

Uh oh!

shimotmk commented Mar 20, 2025

Uh oh!

github-actions bot commented Mar 20, 2025

Uh oh!

github-actions bot commented Mar 20, 2025 •

edited

Loading

Uh oh!

carolinan commented Apr 12, 2025

Uh oh!

carolinan commented Apr 12, 2025

Uh oh!

t-hamano left a comment

Uh oh!

shimotmk commented May 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

shimotmk commented May 27, 2025

Uh oh!

Uh oh!

Embed Block: Refactor setting panel to use ToolsPanel #69636

Embed Block: Refactor setting panel to use ToolsPanel #69636

Uh oh!

Conversation

shimotmk commented Mar 20, 2025

What?

Testing Instructions

Screenshots or screencast

before

after

Uh oh!

github-actions bot commented Mar 20, 2025

Uh oh!

github-actions bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carolinan commented Apr 12, 2025

Uh oh!

carolinan commented Apr 12, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

shimotmk commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shimotmk commented May 27, 2025

Uh oh!

Uh oh!

github-actions bot commented Mar 20, 2025 •

edited

Loading

shimotmk commented May 25, 2025 •

edited

Loading