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

Post Editor: Prevent popover from being hidden by metabox #63939

Merged
merged 2 commits into from
Jul 27, 2024

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Jul 25, 2024

Fixes #62998
Alternative to #63809 and #63834

What?

This PR fixes an issue where popovers rendered from editor content is hidden behind meta boxes if the metabox is enabled.

Why?

#62681 fixed the block toolbar hiding the header shadow by applying isolation: isolate; to the editor area and making the editor area a stacking context, but this meant that if the editor rendered any popovers, they would be hidden under the metabox.

How?

This PR changes the elements that are considered as stacking contexts as follows:

Post Editor:

<div class="editor-editor-interface edit-post-layout is-mode-visual has-metaboxes interface-interface-skeleton has-footer">
	<div class="interface-interface-skeleton__editor">
		<div class="interface-navigable-region interface-interface-skeleton__header"></div>
		<div class="interface-interface-skeleton__body"> <!-- ←⚠️Stacking context -->
			<div class="interface-navigable-region interface-interface-skeleton__content">
				<div class="editor-visual-editor edit-post-visual-editor"></div>
				<div class="edit-post-layout__metaboxes"></div>
			</div>
		</div>
	</div>
</div>

Site Editor:

<div class="editor-editor-interface edit-site-editor__editor-interface interface-interface-skeleton has-footer">
	<div class="interface-interface-skeleton__editor">
		<div class="interface-navigable-region interface-interface-skeleton__header"></div>
		<div class="interface-interface-skeleton__body"> <!-- ←⚠️Stacking context -->
			<div class="interface-navigable-region interface-interface-skeleton__content">
				<div class="editor-visual-editor edit-post-visual-editor is-iframed"></div>
			</div>
		</div>
	</div>
</div>

This ensures that the editor area and the media box belong to the same context, and the popover will not be obscured by either area.

Testing Instructions

First, add the following code to gutenberg.php. This code adds a button to the meta box. When you click the button, it will display absolutely positioned content that intentionally jumps out of the meta box area.

function my_meta_box(){
	add_meta_box( 'my_meta_box', 'My Metabox', 'my_meta_box_content', 'post' );
}
function my_meta_box_content(){
	echo '<div style="position:relative;height:500px">
		<div id="my_popover" style="display:none;border:1px solid;background:#eee;position:absolute;width:150px;height:150px;bottom:100%;left:0;">Popover!</div>
		<button id="popover_button">Popover Toggle Button</button>
	</div>
	<script>
		document.getElementById("popover_button").addEventListener("click", function() {
			const popover = document.getElementById("my_popover");
			popover.style.display = popover.style.display === "none" ? "block" : "none";
		});
	</script>
	';
}
add_action( 'admin_menu', 'my_meta_box' );
  • Post Editor:
    • Trigger the highlight popover on the bottom-most text in your content.
    • The popover should appear above the meta box when positioned at the bottom.
    • Click a button inside the meta box. The popover should appear above the editor area.
    • Activate the meta box in the Yoast plugin and highlight the text at the very bottom of your content.
    • Verify that the issue fixed in #62681 hasn't reoccurred.
  • Site Editor:
    • Verify that the issue fixed in #62681 hasn't reoccurred.

Screenshots or screencast

1cbf41dd024bb7656fec9d84caa4d5a5.mp4

Note

When you merge this PR, don't forget to add the following people as co-authors, who helped resolve this issue:
@Rishit30G @dhananjaykuber

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Meta Boxes A draggable box shown on the post editing screen labels Jul 25, 2024
@t-hamano t-hamano self-assigned this Jul 25, 2024
Copy link

github-actions bot commented Jul 25, 2024

Size Change: +6 B (0%)

Total Size: 1.76 MB

Filename Size Change
build/editor/style-rtl.css 9.32 kB +5 B (+0.05%)
build/editor/style.css 9.32 kB +1 B (+0.01%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.29 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.59 kB
build/block-editor/content.css 4.59 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/index.min.js 254 kB
build/block-editor/style-rtl.css 16.2 kB
build/block-editor/style.css 16.2 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 310 B
build/block-library/blocks/button/editor.css 310 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 336 B
build/block-library/blocks/buttons/editor.css 336 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 221 B
build/block-library/blocks/comments-pagination/editor.css 211 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 668 B
build/block-library/blocks/cover/editor.css 669 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 314 B
build/block-library/blocks/embed/editor.css 314 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 342 B
build/block-library/blocks/form-input/style.css 342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 402 B
build/block-library/blocks/group/editor.css 402 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 862 B
build/block-library/blocks/image/editor.css 861 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 204 B
build/block-library/blocks/latest-posts/editor.css 204 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 663 B
build/block-library/blocks/navigation-link/editor.css 664 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 527 B
build/block-library/blocks/post-comments-form/style.css 528 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 341 B
build/block-library/blocks/post-featured-image/style.css 341 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 225 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 193 B
build/block-library/blocks/search/editor.css 193 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 63 B
build/block-library/blocks/tag-cloud/editor.css 63 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 553 B
build/block-library/blocks/video/editor.css 554 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.9 kB
build/block-library/editor.css 11.9 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 216 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.6 kB
build/block-library/theme-rtl.css 702 B
build/block-library/theme.css 707 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.3 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/index.min.js 221 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.81 kB
build/core-data/index.min.js 72.8 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 12.6 kB
build/edit-post/style-rtl.css 2.31 kB
build/edit-post/style.css 2.31 kB
build/edit-site/index.min.js 213 kB
build/edit-site/posts-rtl.css 6.78 kB
build/edit-site/posts.css 6.79 kB
build/edit-site/style-rtl.css 12 kB
build/edit-site/style.css 12 kB
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 99.4 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 506 B
build/format-library/style.css 505 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.78 kB
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.16 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.59 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.36 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.54 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

Copy link

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: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

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

Copy link
Contributor

@stokesman stokesman 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 putting this together! I tested and found everything as it should be. This approach seems closer to how things used to be while not regressing anything.

I'm not sure it matters too much but I might have opted to make the stacking context the interface skeleton’s __content element because now I've considered it has overflow: auto applied and so clips its children. That’s to say, with the PR as is, its children can intermingle with the z-indexes outside yet they can’t appear outside its rect. To me that makes it seem a slightly more suitable place for the stacking context.

The other thought I had was that now that `EditorInterface` exists in the editor package and is used in both the Site and Post editors its styles could apply the rule and avoid the the bit of duplication here.
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 47f277bea3..5fdaceaa00 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -3,11 +3,6 @@
 	clear: both;
 }
 
-.edit-post-layout .interface-interface-skeleton__body {
-	// Make this a stacking context to contain the z-index of children elements.
-	isolation: isolate;
-}
-
 // Adjust the position of the notices
 .components-editor-notices__snackbar {
 	position: fixed;
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 28360b6864..b157057062 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -3,11 +3,6 @@
 	transition: opacity 0.1s ease-out;
 	@include reduce-motion("transition");
 
-	.interface-interface-skeleton__body {
-		// Make this a stacking context to contain the z-index of children elements.
-		isolation: isolate;
-	}
-
 	&.is-loading {
 		opacity: 0;
 	}
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
index 77f621acc9..d9b91b820f 100644
--- a/packages/editor/src/components/editor-interface/style.scss
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -2,6 +2,11 @@
 	height: $header-height + $border-width;
 }
 
+.interface-interface-skeleton__body {
+	// Make this a stacking context to contain the z-index of children elements.
+	isolation: isolate;
+}
+
 .editor-visual-editor {
 	flex: 1 0 auto;
 }

I suppose you might have already considered any points I mentioned and trust your judgement on whether to change anything. LGTM.

@t-hamano t-hamano force-pushed the try/fix-metabox-popover branch from 071a5bd to 89eb0bb Compare July 26, 2024 08:23
@t-hamano
Copy link
Contributor Author

@stokesman Thanks for the review!

As you feared, it seems the .__body selector was not appropriate 😅

As the E2E test failure indicates, the header buttons in the pre-publish panel are located below the global header:

publish-panel

I think this has to do with the pre-publish sidebar being a child of the .__body element.

Therefore, I used the __body selector as you suggested.

I also added the .editor-editor-interface selector to ensure that this style is not applied globally.

Copy link
Contributor

@stokesman stokesman left a comment

Choose a reason for hiding this comment

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

I gave it another test and it all worked as intended. I missed that a test failed last time 😅. Now it looks 🚢 shape.

@t-hamano t-hamano merged commit 159d01a into trunk Jul 27, 2024
62 checks passed
@t-hamano t-hamano deleted the try/fix-metabox-popover branch July 27, 2024 04:02
@github-actions github-actions bot added this to the Gutenberg 19.0 milestone Jul 27, 2024
@Mamaduka Mamaduka added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Aug 2, 2024
@Mamaduka
Copy link
Member

Mamaduka commented Aug 2, 2024

Added label for WP minor release backport. Seems like a good candidate.

vcanales pushed a commit that referenced this pull request Sep 4, 2024
* Post Editor: Prevent popover from being hidden by metabox

* Use `.interface-interface-skeleton__content` instead of `.interface-interface-skeleton__body`

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
talldan added a commit that referenced this pull request Sep 4, 2024
* Fix canvas issues by removing VisualEditor’s height (#63724)

Unlinked contributors: wp-seopress.

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

* Post Editor: Prevent popover from being hidden by metabox (#63939)

* Post Editor: Prevent popover from being hidden by metabox

* Use `.interface-interface-skeleton__content` instead of `.interface-interface-skeleton__body`

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>

* Global Styles: Fix block custom CSS pseudo element selectors (#63980)

Unlinked contributors: harlet.

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: dballari <dballari@git.wordpress.org>
Co-authored-by: wongjn <wongjn@git.wordpress.org>

* Avoid errors for post types without a 'menu_icon' (#64015)


Unlinked contributors: karan4official.

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

* Data Views: Don't render action modal when there are no eligible items (#64250)


Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

* Post editor: apply space below content using a pseudo-element instead of padding-bottom (#64639)

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: PC888 <kracked888@git.wordpress.org>

* Featured Image Block: Reduce CSS specificity (#64463)

Co-authored-by: dsas <dsas@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

* Inserter: use lighter grammar parse to check allowed status (#64902)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

* Prepare JSON schemas for Draft 7 update (#63582)

Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>

* Fix missing ref support for textAlign and textColumns in theme.json schema (#63625)

* Add missing ref support for textAlign and textColumns

* Update the theme.json reference docs

Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>

* Don't allow duplicating template parts in non-block-based themes (#64379)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>

* Fix bumped specificity for layout styles in non-iframed editor (#64076)

* Fix too specific layout styles in non-iframed editor

* Ensure first/last child rules take precedence

* Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing

* Update tests

* Update client side layout selectors to match theme json

* Add backport changelog

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

* Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)

* Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors

* Add extra test for :where with a pseudo selector

----
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org>

* Revert "Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)"

This reverts commit 53a370e.

* Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)

* Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors

* Add extra test for :where with a pseudo selector

----
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org>

* Post Editor: fix click space after post content to append (#64992)

* Fix minimally

* Revise comment

* Stop propagation and don’t prevent default

* Insert default block if no blocks are present

* re-build package lock to match format

* Revert "Inserter: use lighter grammar parse to check allowed status (#64902)"

This reverts commit 9b9bbe8.

---------

Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: dballari <dballari@git.wordpress.org>
Co-authored-by: wongjn <wongjn@git.wordpress.org>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: PC888 <kracked888@git.wordpress.org>
Co-authored-by: Dean Sas <dean@deansas.org>
Co-authored-by: dsas <dsas@git.wordpress.org>
Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes:

* [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors]
* [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity]
* [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor]
* [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes]
* [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items]
* [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height]
* [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append]
* [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox]
* [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom]
* [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon']
* [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors]

Props vcanales.
Fixes #61982.
See #61704, #61769, #61829.

git-svn-id: https://develop.svn.wordpress.org/trunk@58988 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes:

* [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors]
* [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity]
* [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor]
* [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes]
* [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items]
* [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height]
* [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append]
* [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox]
* [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom]
* [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon']
* [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors]

Props vcanales.
Fixes #61982.
See #61704, #61769, #61829.
Built from https://develop.svn.wordpress.org/trunk@58988


git-svn-id: http://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes:

* [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors]
* [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity]
* [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor]
* [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes]
* [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items]
* [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height]
* [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append]
* [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox]
* [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom]
* [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon']
* [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors]

Props vcanales.
Fixes #61982.
See #61704, #61769, #61829.
Built from https://develop.svn.wordpress.org/trunk@58988


git-svn-id: https://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes:

- [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors]
- [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity]
- [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor]
- [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes]
- [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items]
- [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height]
- [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append]
- [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox]
- [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom]
- [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon']
- [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors]

Reviewed by jorbin, hellofromTonya.
Merges [58988] to the 6.6 branch.

Props vcanales.
Fixes #61982.
See #61704, #61769, #61829.


git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58989 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes:

- [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors]
- [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity]
- [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor]
- [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes]
- [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items]
- [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height]
- [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append]
- [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox]
- [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom]
- [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon']
- [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors]

Reviewed by jorbin, hellofromTonya.
Merges [58988] to the 6.6 branch.

Props vcanales.
Fixes #61982.
See #61704, #61769, #61829.

Built from https://develop.svn.wordpress.org/branches/6.6@58989


git-svn-id: http://core.svn.wordpress.org/branches/6.6@58385 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@cbravobernal
Copy link
Contributor

Removing the label as it was already backported and included in WP 6.6.2

@cbravobernal cbravobernal removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Meta Boxes A draggable box shown on the post editing screen [Type] Bug An existing feature does not function as intended
Projects
Status: ✅ Done 6.6.2
Development

Successfully merging this pull request may close these issues.

Inline popover hides behind metabox
4 participants