Fix responsive embeds on widget screen by talldan · Pull Request #26263 · WordPress/gutenberg

talldan · 2020-10-19T10:10:33Z

Description

WordPress keeps some internal state to determine whether the current screen is a block editor. Setting this to true has the side effect of enabling responsive embeds in the editor, solving the issues seen in #26104:
https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/admin-header.php#L192-L199

How has this been tested?

Paste a youtube link into a widget area on the widget screen
The video should eventually appear and be playable within the editor

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

talldan · 2020-10-19T10:13:02Z

I've left a note on WordPress/wordpress-develop#603 that this will have to be implemented in core too.

talldan · 2020-10-19T10:18:29Z

lib/widgets-page.php

+	 * to work.
+	 * See wp_enqueue_registered_block_scripts_and_styles in wp-includes/script-loader.php
+	 */
+	$current_screen->is_block_editor( true );


I copied most of the comment from the site editor:

gutenberg/lib/edit-site-page.php

Lines 90 to 102 in 277506e

global $current_screen;

if ( ! gutenberg_is_edit_site_page( $hook ) ) {

return;

}

/**

* Make the WP Screen object aware that this is a block editor page.

* Since custom blocks check whether the screen is_block_editor,

* this is required for custom blocks to be loaded.

* See wp_enqueue_registered_block_scripts_and_styles in wp-includes/script-loader.php

*/

$current_screen->is_block_editor( true );

Two questions:

Is there a reason the site editor uses global $current_screen instead of get_current_screen()?

The comment implies this duplicates what we've implemented here, can this code now be removed? -

gutenberg/lib/widgets-page.php

Lines 135 to 143 in 277506e

function gutenberg_widgets_editor_load_block_editor_scripts_and_styles( $is_block_editor_screen ) {

if ( is_callable( 'get_current_screen' ) && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) {

return true;

}

return $is_block_editor_screen;

}

add_filter( 'should_load_block_editor_scripts_and_styles', 'gutenberg_widgets_editor_load_block_editor_scripts_and_styles' );

The only difference between get_current_screen() and global $current_screen is that the former will instantiate WP_Screen if it hasn't already been instantiated. What you did here looks good to me.

Yes, we should be able to remove all of that. It worked when I tried it in Add block-based widget editor wordpress-develop#603 🙂

github-actions · 2020-10-19T10:20:30Z

Size Change: 0 B

Total Size: 1.21 MB

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.78 kB	0 B
`build/api-fetch/index.js`	3.45 kB	0 B
`build/autop/index.js`	2.84 kB	0 B
`build/blob/index.js`	665 B	0 B
`build/block-directory/index.js`	8.72 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/index.js`	130 kB	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.97 kB	0 B
`build/block-library/editor.css`	8.97 kB	0 B
`build/block-library/index.js`	146 kB	0 B
`build/block-library/style-rtl.css`	7.83 kB	0 B
`build/block-library/style.css`	7.84 kB	0 B
`build/block-library/theme-rtl.css`	837 B	0 B
`build/block-library/theme.css`	838 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.1 kB	0 B
`build/components/index.js`	172 kB	0 B
`build/components/style-rtl.css`	15.2 kB	0 B
`build/components/style.css`	15.2 kB	0 B
`build/compose/index.js`	9.81 kB	0 B
`build/core-data/index.js`	12.3 kB	0 B
`build/data-controls/index.js`	772 B	0 B
`build/data/index.js`	8.77 kB	0 B
`build/date/index.js`	31.8 kB	0 B
`build/deprecated/index.js`	768 B	0 B
`build/dom-ready/index.js`	571 B	0 B
`build/dom/index.js`	4.46 kB	0 B
`build/edit-navigation/index.js`	11.2 kB	0 B
`build/edit-navigation/style-rtl.css`	881 B	0 B
`build/edit-navigation/style.css`	885 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.4 kB	0 B
`build/edit-post/style.css`	6.39 kB	0 B
`build/edit-site/index.js`	22.1 kB	0 B
`build/edit-site/style-rtl.css`	3.88 kB	0 B
`build/edit-site/style.css`	3.88 kB	0 B
`build/edit-widgets/index.js`	26.4 kB	0 B
`build/edit-widgets/style-rtl.css`	3.12 kB	0 B
`build/edit-widgets/style.css`	3.12 kB	0 B
`build/editor/editor-styles-rtl.css`	480 B	0 B
`build/editor/editor-styles.css`	482 B	0 B
`build/editor/index.js`	43.1 kB	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/editor/style.css`	3.85 kB	0 B
`build/element/index.js`	4.65 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/index.js`	7.7 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`	623 B	0 B
`build/i18n/index.js`	3.57 kB	0 B
`build/is-shallow-equal/index.js`	712 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.34 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.42 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.43 kB	0 B
`build/priority-queue/index.js`	791 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/reusable-blocks/index.js`	3.06 kB	0 B
`build/rich-text/index.js`	13.2 kB	0 B
`build/server-side-render/index.js`	2.77 kB	0 B
`build/shortcode/index.js`	1.69 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.84 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

talldan · 2020-10-19T11:23:45Z

Just noting that https://core.trac.wordpress.org/ticket/51566 and #26180 are tracking the issue of actually displaying the embed in the frontend.

draganescu

Tested this and works as described. It's not clear to me if we need to act on this comment.

kevin940726

Tested and LGTM 👍

noisysocks

Remove the now redundant should_load_block_editor_scripts_and_styles filter that we're adding in lib/widegts-page.php and then we'll be cooking with gas 😎

talldan · 2020-11-02T08:52:35Z

I've changed this PR to use the admin_body_class filter for now as per the discussion here - WordPress/wordpress-develop#603 (comment) (cc @noisysocks)

outdated

draganescu

Tested again and it works!

talldan added [Type] Bug An existing feature does not function as intended [Block] Embed Affects the Embed Block [Feature] Widgets Screen The block-based screen that replaced widgets.php. labels Oct 19, 2020

talldan requested review from TimothyBJacobs and spacedmonkey as code owners October 19, 2020 10:10

talldan mentioned this pull request Oct 19, 2020

Add block-based widget editor WordPress/wordpress-develop#603

Closed

talldan commented Oct 19, 2020

View reviewed changes

talldan requested review from adamziel and noisysocks October 19, 2020 10:38

draganescu previously approved these changes Oct 19, 2020

View reviewed changes

kevin940726 previously approved these changes Oct 20, 2020

View reviewed changes

noisysocks previously requested changes Oct 22, 2020

View reviewed changes

talldan force-pushed the fix/responsive-embeds-in-widgets-screen branch 2 times, most recently from ca79442 to 4595803 Compare October 29, 2020 09:42

talldan added 4 commits November 2, 2020 16:34

Ensure is_block_editor is true on widgets screen

4d89d8d

Remove redundant filter

fbf2209

Revert previous changes

2fa9ae1

Use admin body class filter to add responsive embed body class

e333254

talldan force-pushed the fix/responsive-embeds-in-widgets-screen branch from 4595803 to e333254 Compare November 2, 2020 08:49

draganescu approved these changes Nov 3, 2020

View reviewed changes

talldan merged commit 02cb893 into master Nov 4, 2020

talldan deleted the fix/responsive-embeds-in-widgets-screen branch November 4, 2020 00:54

github-actions bot added this to the Gutenberg 9.4 milestone Nov 4, 2020

talldan mentioned this pull request May 26, 2021

is_block_editor() returns inconsistent result in core versus in plugin #32215

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix responsive embeds on widget screen#26263

Fix responsive embeds on widget screen#26263
talldan merged 4 commits intomasterfrom
fix/responsive-embeds-in-widgets-screen

talldan commented Oct 19, 2020

Uh oh!

talldan commented Oct 19, 2020

Uh oh!

talldan Oct 19, 2020

Uh oh!

noisysocks Oct 22, 2020

Uh oh!

github-actions bot commented Oct 19, 2020 •

edited

Loading

Uh oh!

talldan commented Oct 19, 2020

Uh oh!

draganescu left a comment

Uh oh!

kevin940726 left a comment

Uh oh!

noisysocks left a comment

Uh oh!

talldan commented Nov 2, 2020

Uh oh!

draganescu left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	global $current_screen;

	if ( ! gutenberg_is_edit_site_page( $hook ) ) {
	return;
	}

	/**
	* Make the WP Screen object aware that this is a block editor page.
	* Since custom blocks check whether the screen is_block_editor,
	* this is required for custom blocks to be loaded.
	* See wp_enqueue_registered_block_scripts_and_styles in wp-includes/script-loader.php
	*/
	$current_screen->is_block_editor( true );

	function gutenberg_widgets_editor_load_block_editor_scripts_and_styles( $is_block_editor_screen ) {
	if ( is_callable( 'get_current_screen' ) && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) {
	return true;
	}

	return $is_block_editor_screen;
	}

	add_filter( 'should_load_block_editor_scripts_and_styles', 'gutenberg_widgets_editor_load_block_editor_scripts_and_styles' );

Conversation

talldan commented Oct 19, 2020

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

Uh oh!

talldan commented Oct 19, 2020

Uh oh!

talldan Oct 19, 2020

Choose a reason for hiding this comment

Uh oh!

noisysocks Oct 22, 2020

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

talldan commented Oct 19, 2020

Uh oh!

draganescu left a comment

Choose a reason for hiding this comment

Uh oh!

kevin940726 left a comment

Choose a reason for hiding this comment

Uh oh!

noisysocks left a comment

Choose a reason for hiding this comment

Uh oh!

talldan commented Nov 2, 2020

Uh oh!

draganescu left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Oct 19, 2020 •

edited

Loading