From 7f30335c4f796385f280d0560f736677cfcba37e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 7 Aug 2024 11:14:37 -0700 Subject: [PATCH 01/17] Use iframe even with metaboxes --- .../src/components/layout/use-should-iframe.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index 248ea53109f250..e36a4773c4a1fd 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -6,11 +6,6 @@ import { useSelect } from '@wordpress/data'; import { store as blocksStore } from '@wordpress/blocks'; import { store as blockEditorStore } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; - const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; export function useShouldIframe() { @@ -18,7 +13,6 @@ export function useShouldIframe() { isBlockBasedTheme, hasV3BlocksOnly, isEditingTemplate, - hasMetaBoxes, isZoomOutMode, } = useSelect( ( select ) => { const { getEditorSettings, getCurrentPostType } = select( editorStore ); @@ -31,14 +25,13 @@ export function useShouldIframe() { return type.apiVersion >= 3; } ), isEditingTemplate: getCurrentPostType() === 'wp_template', - hasMetaBoxes: select( editPostStore ).hasMetaBoxes(), isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); return ( - ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) && - ! hasMetaBoxes ) || + hasV3BlocksOnly || + ( isGutenbergPlugin && isBlockBasedTheme ) || isEditingTemplate || isZoomOutMode ); From 0ce4b1af455ff664051d184a4f1040632ba688af Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 7 Aug 2024 11:15:08 -0700 Subject: [PATCH 02/17] Split content view when metaboxes are open --- .../edit-post/src/components/layout/style.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 5fdaceaa002be9..235e939021366d 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,6 +1,20 @@ .edit-post-layout__metaboxes { flex-shrink: 0; clear: both; + overflow: auto; + filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.; + + &:has(.postbox:not(.closed)) { + flex: 1 1 50%; + } +} + +.edit-post-meta-boxes-area:first-child .postbox-header { + border-top: none; +} + +.has-metaboxes .editor-visual-editor { + flex: 1 1 50%; } // Adjust the position of the notices From 1b6266365468d42f1edc1cffca8d096fb09af2d7 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 8 Aug 2024 11:11:17 -0700 Subject: [PATCH 03/17] Fix styling issues Co-authored-by: t-hamano --- packages/edit-post/src/components/layout/style.scss | 8 ++------ .../src/components/meta-boxes/meta-boxes-area/style.scss | 7 ++++++- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 235e939021366d..6ed88900fa484c 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -2,17 +2,13 @@ flex-shrink: 0; clear: both; overflow: auto; - filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.; + filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. - &:has(.postbox:not(.closed)) { + &:has(.postbox:not(.closed, .is-hidden)) { flex: 1 1 50%; } } -.edit-post-meta-boxes-area:first-child .postbox-header { - border-top: none; -} - .has-metaboxes .editor-visual-editor { flex: 1 1 50%; } diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss index 6637cdcaf17f4c..4307c8bf589553 100644 --- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss +++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss @@ -20,10 +20,15 @@ } .postbox-header { - border-top: $border-width solid $gray-300; border-bottom: 0; } + // Headers of postboxes that follow another visible postbox. + .postbox:not(.is-hidden) + .postbox .postbox-header, + &:has(.postbox:not(.is-hidden)) + & .postbox-header { + border-top: $border-width solid $gray-300; + } + /* Match width and positioning of the meta boxes. Override default styles. */ #poststuff { margin: 0 auto; From 495267185d00f5a6b9214fe394d3f242ebd47a68 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 11 Aug 2024 20:36:02 -0700 Subject: [PATCH 04/17] Update e2e tests Co-authored-by: ellatrix --- .../specs/editor/plugins/meta-boxes.spec.js | 18 +++++++++++------- .../editor/plugins/wp-editor-meta-box.spec.js | 2 +- .../editor/various/publish-button.spec.js | 7 +++---- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/test/e2e/specs/editor/plugins/meta-boxes.spec.js b/test/e2e/specs/editor/plugins/meta-boxes.spec.js index 1b7adc18760ff8..511b3837f80303 100644 --- a/test/e2e/specs/editor/plugins/meta-boxes.spec.js +++ b/test/e2e/specs/editor/plugins/meta-boxes.spec.js @@ -26,7 +26,7 @@ test.describe( 'Meta boxes', () => { await expect( saveDraft ).toBeDisabled(); // Add title to enable valid non-empty post save. - await page + await editor.canvas .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'Hello Meta' ); @@ -44,7 +44,7 @@ test.describe( 'Meta boxes', () => { page, } ) => { // Publish a post so there's something for the latest posts dynamic block to render. - await page + await editor.canvas .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'A published post' ); await page.keyboard.press( 'Enter' ); @@ -53,7 +53,7 @@ test.describe( 'Meta boxes', () => { // Publish a post with the latest posts dynamic block. await admin.createNewPost(); - await page + await editor.canvas .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'Dynamic block test' ); await editor.insertBlock( { name: 'core/latest-posts' } ); @@ -70,10 +70,12 @@ test.describe( 'Meta boxes', () => { editor, page, } ) => { - await page + await editor.canvas .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'A published post' ); - await page.getByRole( 'button', { name: 'Add default block' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); await page.keyboard.type( 'Excerpt from content.' ); const postId = await editor.publishPost(); @@ -89,9 +91,11 @@ test.describe( 'Meta boxes', () => { page, } ) => { await editor.openDocumentSettingsSidebar(); - await page.getByRole( 'button', { name: 'Add default block' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); await page.keyboard.type( 'Excerpt from content.' ); - await page + await editor.canvas .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'A published post' ); diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js index 710e06b35e124f..c5eafdafe918db 100644 --- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js +++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js @@ -20,7 +20,7 @@ test.describe( 'WP Editor Meta Boxes', () => { await admin.createNewPost(); // Add title to enable valid non-empty post save. - await page + await editor.canvas .locator( 'role=textbox[name="Add title"i]' ) .type( 'Hello Meta' ); diff --git a/test/e2e/specs/editor/various/publish-button.spec.js b/test/e2e/specs/editor/various/publish-button.spec.js index 631ddcd0fe61ba..cdc9c1a9936361 100644 --- a/test/e2e/specs/editor/various/publish-button.spec.js +++ b/test/e2e/specs/editor/various/publish-button.spec.js @@ -70,13 +70,12 @@ test.describe( 'Post publish button', () => { admin, page, requestUtils, + editor, } ) => { await requestUtils.activatePlugin( 'gutenberg-test-plugin-meta-box' ); await admin.createNewPost(); - await page - .getByRole( 'textbox', { - name: 'Add title', - } ) + await editor.canvas + .getByRole( 'textbox', { name: 'Add title' } ) .fill( 'Test post' ); const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); From cf8294e4dad077d03ed93e58e3b9ef10629b75b5 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 15 Aug 2024 15:24:53 -0700 Subject: [PATCH 05/17] Make metaboxes a details element in short viewports --- .../edit-post/src/components/layout/index.js | 28 ++++++++++++++----- .../src/components/layout/style.scss | 28 ++++++++++++++++--- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 519b32691c6a49..fe4112eed68493 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -37,7 +37,7 @@ import { addQueryArgs } from '@wordpress/url'; import { decodeEntities } from '@wordpress/html-entities'; import { store as coreStore } from '@wordpress/core-data'; import { SlotFillProvider } from '@wordpress/components'; -import { useViewportMatch } from '@wordpress/compose'; +import { useMediaQuery, useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -151,6 +151,25 @@ function useEditorStyles() { ] ); } +function MetaBoxesWide() { + const isShort = useMediaQuery( '(max-height: 599px)' ); + if ( isShort ) { + return ( +
+ { __( 'Meta Boxes' ) } + + +
+ ); + } + return ( +
+ + +
+ ); +} + function Layout( { postId: initialPostId, postType: initialPostType, @@ -354,12 +373,7 @@ function Layout( { } extraContent={ ! isDistractionFree && - showMetaBoxes && ( -
- - -
- ) + showMetaBoxes && } > diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 6ed88900fa484c..d459872a6099ad 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,16 +1,36 @@ .edit-post-layout__metaboxes { - flex-shrink: 0; clear: both; overflow: auto; + background-color: $white; filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. - &:has(.postbox:not(.closed, .is-hidden)) { - flex: 1 1 50%; + &:not(details) { + max-height: 50%; + } + + // The component renders as a details element in short viewports. + &:is(details) { + & > summary { + cursor: pointer; + color: $gray-900; + background-color: $white; + height: $button-size-compact; + line-height: $button-size-compact; + font-size: 13px; + padding-left: $grid-unit-30; + } + + &[open] > summary { + position: sticky; + top: 0; + z-index: 1; + border-block-end: $border-width solid $gray-200; + } } } .has-metaboxes .editor-visual-editor { - flex: 1 1 50%; + flex: 1; } // Adjust the position of the notices From c9145bae5889fb0c13f5b65eaa287f06705dc75d Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 15 Aug 2024 20:00:40 -0700 Subject: [PATCH 06/17] =?UTF-8?q?Make=20metabox=20area=20resizable=20when?= =?UTF-8?q?=20viewport=20isn=E2=80=99t=20short?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edit-post/src/components/layout/index.js | 38 ++++++++++++++++--- .../src/components/layout/style.scss | 37 ++++++++++++++++-- .../meta-boxes/meta-boxes-area/style.scss | 7 +--- 3 files changed, 68 insertions(+), 14 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index fe4112eed68493..eac9d5564be907 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -36,7 +36,7 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library import { addQueryArgs } from '@wordpress/url'; import { decodeEntities } from '@wordpress/html-entities'; import { store as coreStore } from '@wordpress/core-data'; -import { SlotFillProvider } from '@wordpress/components'; +import { ResizableBox, SlotFillProvider } from '@wordpress/components'; import { useMediaQuery, useViewportMatch } from '@wordpress/compose'; /** @@ -163,10 +163,38 @@ function MetaBoxesWide() { ); } return ( -
- - -
+ { + target.setPointerCapture( pointerId ); + } } + onResizeStart={ ( event, direction, elementRef ) => { + // Avoids an height jump in case the max-height is limiting it. + elementRef.style.height = `${ elementRef.offsetHeight }px`; + // Stops max-height from being applied. + elementRef.classList.add( 'has-user-size' ); + } } + > +
+ + +
+ ); } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index d459872a6099ad..0253b965911588 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,15 +1,47 @@ +$shadow: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. + +.edit-post-layout__metaboxes-resizable-area { + padding-top: 23px; + filter: $shadow; + background-color: $white; + + &:not(.has-user-size) { + max-height: 50%; + } + + & .components-resizable-box__handle-top { + top: 0; + box-shadow: 0 $border-width $gray-300; + } + & .components-resizable-box__side-handle::before { + border-radius: 0; + top: 0; + height: $border-width; + } + & .components-resizable-box__handle::after { + background-color: $gray-300; + box-shadow: none; + border-radius: 4px; + height: $grid-unit-05; + top: calc(50% - #{$grid-unit-05} / 2); + width: 100px; + right: calc(50% - 50px); + } +} + .edit-post-layout__metaboxes { clear: both; overflow: auto; background-color: $white; - filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. &:not(details) { - max-height: 50%; + max-height: 100%; } // The component renders as a details element in short viewports. &:is(details) { + filter: $shadow; + & > summary { cursor: pointer; color: $gray-900; @@ -24,7 +56,6 @@ position: sticky; top: 0; z-index: 1; - border-block-end: $border-width solid $gray-200; } } } diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss index 4307c8bf589553..6637cdcaf17f4c 100644 --- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss +++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss @@ -20,13 +20,8 @@ } .postbox-header { - border-bottom: 0; - } - - // Headers of postboxes that follow another visible postbox. - .postbox:not(.is-hidden) + .postbox .postbox-header, - &:has(.postbox:not(.is-hidden)) + & .postbox-header { border-top: $border-width solid $gray-300; + border-bottom: 0; } /* Match width and positioning of the meta boxes. Override default styles. */ From 6f62680f4303b46fd6be1e9d6bbcfc57d1bb642e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 15 Aug 2024 20:02:06 -0700 Subject: [PATCH 07/17] Tweak details element usage --- packages/edit-post/src/components/layout/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index eac9d5564be907..39d4cb1e97667d 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -152,10 +152,10 @@ function useEditorStyles() { } function MetaBoxesWide() { - const isShort = useMediaQuery( '(max-height: 599px)' ); + const isShort = useMediaQuery( '(max-height: 549px)' ); if ( isShort ) { return ( -
+
{ __( 'Meta Boxes' ) } From ed739ad3948a752a97be78d68332e220ac9fce96 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 18 Aug 2024 14:15:29 -0700 Subject: [PATCH 08/17] Add max-height when resized by user --- packages/edit-post/src/components/layout/index.js | 6 ++++-- packages/edit-post/src/components/layout/style.scss | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 39d4cb1e97667d..e838cce3461c28 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -175,6 +175,8 @@ function MetaBoxesWide() { bottomRight: false, bottomLeft: false, } } + // This is overriden by an !important rule that applies until user resizes. + maxHeight="100%" bounds="parent" boundsByDirection // Avoids hiccups while dragging over objects like iframes and ensures that @@ -184,9 +186,9 @@ function MetaBoxesWide() { target.setPointerCapture( pointerId ); } } onResizeStart={ ( event, direction, elementRef ) => { - // Avoids an height jump in case the max-height is limiting it. + // Avoids height jumping in case it’s limited by max-height. elementRef.style.height = `${ elementRef.offsetHeight }px`; - // Stops max-height from being applied. + // Stops initial max-height from being applied. elementRef.classList.add( 'has-user-size' ); } } > diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 0253b965911588..9dcf84f38272b7 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -6,7 +6,7 @@ $shadow: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray background-color: $white; &:not(.has-user-size) { - max-height: 50%; + max-height: 50% !important; } & .components-resizable-box__handle-top { From 9ed8afaf7e7b24a5fa3bb65af53ae25f76325197 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 20 Aug 2024 14:23:23 -0700 Subject: [PATCH 09/17] Hide metabox area if all metaboxes are hidden --- packages/edit-post/src/components/layout/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 9dcf84f38272b7..6c6fa674584182 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,5 +1,11 @@ $shadow: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. +// If all metaboxes are hidden hides the container. +:is(.edit-post-layout__metaboxes-resizable-area, details.edit-post-layout__metaboxes) +:not(:has(.postbox:not(.is-hidden))) { + display: none; +} + .edit-post-layout__metaboxes-resizable-area { padding-top: 23px; filter: $shadow; From c1d8d0f779b475cdd0eab1e49d077076a853a692 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 20 Aug 2024 18:42:51 -0700 Subject: [PATCH 10/17] Fixup last commit --- packages/edit-post/src/components/layout/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 6c6fa674584182..816b404853f265 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,8 +1,10 @@ $shadow: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. // If all metaboxes are hidden hides the container. -:is(.edit-post-layout__metaboxes-resizable-area, details.edit-post-layout__metaboxes) -:not(:has(.postbox:not(.is-hidden))) { +:is( +.edit-post-layout__metaboxes-resizable-area, +details.edit-post-layout__metaboxes +):not(:has(.postbox:not(.is-hidden))) { display: none; } From c672254e1694b1a86652ff1697e1ae93139e8090 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 29 Aug 2024 07:32:38 -0700 Subject: [PATCH 11/17] Persist toggle and height state in user preferences --- .../edit-post/src/components/layout/index.js | 45 ++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index e838cce3461c28..670c7f11e40186 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -24,7 +24,12 @@ import { } from '@wordpress/block-editor'; import { PluginArea } from '@wordpress/plugins'; import { __, sprintf } from '@wordpress/i18n'; -import { useCallback, useMemo } from '@wordpress/element'; +import { + useCallback, + useLayoutEffect, + useMemo, + useRef, +} from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -152,10 +157,37 @@ function useEditorStyles() { } function MetaBoxesWide() { + const [ isOpen, openHeight ] = useSelect( ( select ) => { + const { get } = select( preferencesStore ); + return [ + get( 'core/edit-post', 'metaboxesWideIsOpen' ), + get( 'core/edit-post', 'metaboxesWideOpenHeight' ), + ]; + }, [] ); + const { set: setPreference } = useDispatch( preferencesStore ); + const resizableBoxRef = useRef(); const isShort = useMediaQuery( '(max-height: 549px)' ); + + // In case a user size is set stops the default max-height from applying. + useLayoutEffect( () => { + if ( ! isShort && openHeight !== undefined ) { + resizableBoxRef.current.resizable.classList.add( 'has-user-size' ); + } + }, [ isShort, openHeight ] ); + if ( isShort ) { return ( -
+
{ + setPreference( + 'core/edit-post', + 'metaboxesWideIsOpen', + target.open + ); + } } + > { __( 'Meta Boxes' ) } @@ -165,6 +197,8 @@ function MetaBoxesWide() { return ( { + setPreference( + 'core/edit-post', + 'metaboxesWideOpenHeight', + resizableBoxRef.current.state.height + ); + } } >
From e84511762dd3c76ea24f795b76fd62bd4283bc7a Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 30 Aug 2024 11:51:51 -0700 Subject: [PATCH 12/17] Wrap contents and rename things The added wrapping element was due to Safari clipping the drop-shadow when `overflow: auto` was on the component root. Renaming was done concomitantly since the wrapping element necessitated some CSS changes anyway. --- .../edit-post/src/components/layout/index.js | 33 +++++---- .../src/components/layout/style.scss | 74 +++++++++---------- 2 files changed, 53 insertions(+), 54 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 670c7f11e40186..8be455ccc1cb37 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -156,12 +156,12 @@ function useEditorStyles() { ] ); } -function MetaBoxesWide() { +function MetaBoxesMain() { const [ isOpen, openHeight ] = useSelect( ( select ) => { const { get } = select( preferencesStore ); return [ - get( 'core/edit-post', 'metaboxesWideIsOpen' ), - get( 'core/edit-post', 'metaboxesWideOpenHeight' ), + get( 'core/edit-post', 'metaBoxesMainIsOpen' ), + get( 'core/edit-post', 'metaBoxesMainOpenHeight' ), ]; }, [] ); const { set: setPreference } = useDispatch( preferencesStore ); @@ -175,28 +175,36 @@ function MetaBoxesWide() { } }, [ isShort, openHeight ] ); + const className = 'edit-post-meta-boxes-main'; + const contents = ( + // The class name 'edit-post-layout__metaboxes' is retained because some plugins use it. +
+ + +
+ ); + if ( isShort ) { return (
{ setPreference( 'core/edit-post', - 'metaboxesWideIsOpen', + 'metaBoxesMainIsOpen', target.open ); } } > { __( 'Meta Boxes' ) } - - + { contents }
); } return ( { setPreference( 'core/edit-post', - 'metaboxesWideOpenHeight', + 'metaBoxesMainOpenHeight', resizableBoxRef.current.state.height ); } } > -
- - -
+ { contents } ); } @@ -444,7 +449,7 @@ function Layout( { } extraContent={ ! isDistractionFree && - showMetaBoxes && + showMetaBoxes && } > diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 816b404853f265..5bc062b3a96420 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,20 +1,40 @@ -$shadow: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. - -// If all metaboxes are hidden hides the container. -:is( -.edit-post-layout__metaboxes-resizable-area, -details.edit-post-layout__metaboxes -):not(:has(.postbox:not(.is-hidden))) { +// If all meta boxes are hidden hides the container. +.edit-post-meta-boxes-main:not(:has(.postbox:not(.is-hidden))) { display: none; } -.edit-post-layout__metaboxes-resizable-area { - padding-top: 23px; - filter: $shadow; +.edit-post-meta-boxes-main { + filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. background-color: $white; + clear: both; // This is seemingly only needed in case the canvas is not iframe’d. + + &:not(details) { + padding-top: 23px; + max-height: 100%; - &:not(.has-user-size) { - max-height: 50% !important; + &:not(.has-user-size) { + max-height: 50% !important; + } + } + + // The component renders as a details element in short viewports. + &:is(details) { + & > summary { + cursor: pointer; + color: $gray-900; + background-color: $white; + height: $button-size-compact; + line-height: $button-size-compact; + font-size: 13px; + padding-left: $grid-unit-30; + box-shadow: 0 $border-width $gray-300; + } + + &[open] > summary { + position: sticky; + top: 0; + z-index: 1; + } } & .components-resizable-box__handle-top { @@ -37,35 +57,9 @@ details.edit-post-layout__metaboxes } } -.edit-post-layout__metaboxes { - clear: both; +.edit-post-meta-boxes-main__liner { overflow: auto; - background-color: $white; - - &:not(details) { - max-height: 100%; - } - - // The component renders as a details element in short viewports. - &:is(details) { - filter: $shadow; - - & > summary { - cursor: pointer; - color: $gray-900; - background-color: $white; - height: $button-size-compact; - line-height: $button-size-compact; - font-size: 13px; - padding-left: $grid-unit-30; - } - - &[open] > summary { - position: sticky; - top: 0; - z-index: 1; - } - } + max-height: 100%; } .has-metaboxes .editor-visual-editor { From 8390679e96cab71d682a112cdc7c21811a6ec693 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 30 Aug 2024 12:48:40 -0700 Subject: [PATCH 13/17] Make visual editor stacking context when iframed with metaboxes --- packages/edit-post/src/components/layout/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 5bc062b3a96420..006e647d1fa264 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -64,6 +64,10 @@ .has-metaboxes .editor-visual-editor { flex: 1; + + &.is-iframed { + isolation: isolate; + } } // Adjust the position of the notices From 80a90e30598af7ff6a334f2799809b4442b66d7e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 30 Aug 2024 12:41:00 -0700 Subject: [PATCH 14/17] Omit meta box area when empty instead of hiding it --- packages/edit-post/src/components/layout/index.js | 14 +++++++++++--- .../edit-post/src/components/layout/style.scss | 5 ----- packages/edit-post/src/store/selectors.js | 1 - 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 8be455ccc1cb37..c61de84307e389 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -157,23 +157,31 @@ function useEditorStyles() { } function MetaBoxesMain() { - const [ isOpen, openHeight ] = useSelect( ( select ) => { + const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => { const { get } = select( preferencesStore ); + const { isMetaBoxLocationVisible } = select( editPostStore ); return [ get( 'core/edit-post', 'metaBoxesMainIsOpen' ), get( 'core/edit-post', 'metaBoxesMainOpenHeight' ), + isMetaBoxLocationVisible( 'normal' ) || + isMetaBoxLocationVisible( 'advanced' ), ]; }, [] ); const { set: setPreference } = useDispatch( preferencesStore ); const resizableBoxRef = useRef(); const isShort = useMediaQuery( '(max-height: 549px)' ); + const isAutoHeight = openHeight === undefined; // In case a user size is set stops the default max-height from applying. useLayoutEffect( () => { - if ( ! isShort && openHeight !== undefined ) { + if ( hasAnyVisible && ! isShort && ! isAutoHeight ) { resizableBoxRef.current.resizable.classList.add( 'has-user-size' ); } - }, [ isShort, openHeight ] ); + }, [ isAutoHeight, isShort, hasAnyVisible ] ); + + if ( ! hasAnyVisible ) { + return; + } const className = 'edit-post-meta-boxes-main'; const contents = ( diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 006e647d1fa264..3287acd3a3f1f4 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,8 +1,3 @@ -// If all meta boxes are hidden hides the container. -.edit-post-meta-boxes-main:not(:has(.postbox:not(.is-hidden))) { - display: none; -} - .edit-post-meta-boxes-main { filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha. background-color: $white; diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index da1f9959e32e91..5bea6e7d35eb62 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -379,7 +379,6 @@ export const isMetaBoxLocationVisible = createRegistrySelector( isMetaBoxLocationActive( state, location ) && getMetaBoxesPerLocation( state, location )?.some( ( { id } ) => { return select( editorStore ).isEditorPanelEnabled( - state, `meta-box-${ id }` ); } ) From 3da79793f36aa912822fa5ff2190ee093fdb60dc Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 10 Sep 2024 19:13:33 -0700 Subject: [PATCH 15/17] Fix meta boxes content appearing in front of UI --- packages/edit-post/src/components/layout/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 3287acd3a3f1f4..5392a7e9da4d95 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -55,6 +55,8 @@ .edit-post-meta-boxes-main__liner { overflow: auto; max-height: 100%; + // Keep the contents behind the resize handle or details summary. + isolation: isolate; } .has-metaboxes .editor-visual-editor { From c31b7cfd553c9b8ed8af3693692ecd10907b2eab Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 10 Sep 2024 19:15:55 -0700 Subject: [PATCH 16/17] Use split views only when canvas is iframed --- .../edit-post/src/components/layout/index.js | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c61de84307e389..da0a1a28b1cf8b 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -156,7 +156,11 @@ function useEditorStyles() { ] ); } -function MetaBoxesMain() { +/** + * @param {Object} props + * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe. + */ +function MetaBoxesMain( { isLegacy } ) { const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => { const { get } = select( preferencesStore ); const { isMetaBoxLocationVisible } = select( editPostStore ); @@ -174,10 +178,10 @@ function MetaBoxesMain() { const isAutoHeight = openHeight === undefined; // In case a user size is set stops the default max-height from applying. useLayoutEffect( () => { - if ( hasAnyVisible && ! isShort && ! isAutoHeight ) { + if ( ! isLegacy && hasAnyVisible && ! isShort && ! isAutoHeight ) { resizableBoxRef.current.resizable.classList.add( 'has-user-size' ); } - }, [ isAutoHeight, isShort, hasAnyVisible ] ); + }, [ isAutoHeight, isShort, hasAnyVisible, isLegacy ] ); if ( ! hasAnyVisible ) { return; @@ -185,13 +189,22 @@ function MetaBoxesMain() { const className = 'edit-post-meta-boxes-main'; const contents = ( - // The class name 'edit-post-layout__metaboxes' is retained because some plugins use it. -
+
); + if ( isLegacy ) { + return contents; + } + if ( isShort ) { return (
+ showMetaBoxes && ( + + ) } > From 8df931328a3d6378e75c150ec87cee55d525073c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 12 Sep 2024 21:01:12 -0700 Subject: [PATCH 17/17] =?UTF-8?q?Don=E2=80=99t=20omit=20main=20meta=20box?= =?UTF-8?q?=20area=20unless=20all=20locations=20aren=E2=80=99t=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/edit-post/src/components/layout/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 425b7dfb956d04..2cbf5c32e814b8 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -168,7 +168,8 @@ function MetaBoxesMain( { isLegacy } ) { get( 'core/edit-post', 'metaBoxesMainIsOpen' ), get( 'core/edit-post', 'metaBoxesMainOpenHeight' ), isMetaBoxLocationVisible( 'normal' ) || - isMetaBoxLocationVisible( 'advanced' ), + isMetaBoxLocationVisible( 'advanced' ) || + isMetaBoxLocationVisible( 'side' ), ]; }, [] ); const { set: setPreference } = useDispatch( preferencesStore );