From 191fb57cd37d14647d9d457c312339a5d383f772 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Feb 2024 12:15:40 +1100 Subject: [PATCH 1/3] This PR ensures that the iframe background is always white regardless of whether it has "padding". Because the background of the visual editor is $gray-900, we use a border to mimic existing padding. --- .../block-editor/src/components/block-canvas/style.scss | 7 ------- packages/editor/src/components/editor-canvas/index.js | 1 + 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 2dc9e32d7a393c..d3dee1ff9ee94c 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -2,12 +2,5 @@ iframe[name="editor-canvas"] { width: 100%; height: 100%; display: block; -} - -iframe[name="editor-canvas"]:not(.has-editor-padding) { background-color: $white; } - -iframe[name="editor-canvas"].has-editor-padding { - padding: $grid-unit-30 $grid-unit-30 0; -} diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index bc7d54583afbda..64063beb11ffe0 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -331,6 +331,7 @@ function EditorCanvas( { style: { ...iframeProps?.style, ...deviceStyles, + border: showEditorPadding ? undefined : 0, }, } } > From aca4127050cc7846d960f96ed754e3adfe51887c Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 2 Feb 2024 10:32:07 +1100 Subject: [PATCH 2/3] Reverts first attempt and now tries to harmonize the editor canvas is-focus-mode between site and post editors. By "harmonize", I mean use the same approach by driving the padding via a classname `is-focus-mode` on the edit-${site/post}-layout element, not centralize the code. The latter is difficult because the site editor has "modes", such as edit and view, which also affect the styles. Reverts first attempt and now tries to harmonize the editor canvas is-focus-mode between site and post editors. By "harmonize", I mean use the same approach by driving the padding via a classname `is-focus-mode` on the edit-${site/post}-layout element, not centralize the code. The latter is difficult because the site editor has "modes", such as edit and view, which also affect the styles. --- .../src/components/visual-editor/index.js | 17 ++++++++++++++--- .../src/components/visual-editor/style.scss | 6 ++++++ .../src/components/block-editor/style.scss | 8 -------- .../src/components/editor-canvas/index.js | 7 +------ 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 74dffb35fcd273..4105d43c947561 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -31,11 +31,14 @@ export default function VisualEditor( { styles } ) { isBlockBasedTheme, hasV3BlocksOnly, isEditingTemplate, + isEditingPattern, } = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); - const { getEditorSettings, getRenderingMode } = select( editorStore ); + const { getEditorSettings, getRenderingMode, getCurrentPostType } = + select( editorStore ); const { getBlockTypes } = select( blocksStore ); const editorSettings = getEditorSettings(); + const currentPostType = getCurrentPostType(); return { isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), @@ -44,8 +47,8 @@ export default function VisualEditor( { styles } ) { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), - isEditingTemplate: - select( editorStore ).getCurrentPostType() === 'wp_template', + isEditingPattern: currentPostType === 'wp_block', + isEditingTemplate: currentPostType === 'wp_template', }; }, [] ); const hasMetaBoxes = useSelect( @@ -83,6 +86,7 @@ export default function VisualEditor( { styles } ) {
); diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 8ad587d4e5a580..bc0eb3ae1c4c97 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -36,6 +36,12 @@ // as align-items: stretch is inherited by default.Additionally due to older browser's flex height // interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping. // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property. + + // Matches `.is-focus-mode` padding in + // packages/edit-site/src/components/block-editor/style.scss. + &.is-focus-mode { + padding: $grid-unit-60; + } } .edit-post-visual-editor__content-area { diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index fa7fd7e13df3e4..47a86a24ca37d9 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -26,14 +26,6 @@ // Centralize the editor horizontally (flex-direction is column). align-items: center; - // Controls height of editor and editor canvas container (style book, global styles revisions previews etc.) - iframe { - display: block; - width: 100%; - height: 100%; - background: $white; - } - .edit-site-visual-editor__editor-canvas { &.is-focused { outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color); diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 64063beb11ffe0..d64682a17bd6fd 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -103,7 +103,6 @@ function EditorCanvas( { wrapperBlockName, wrapperUniqueId, deviceType, - showEditorPadding, isDesignPostType, } = useSelect( ( select ) => { const { @@ -152,8 +151,6 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - showEditorPadding: - !! editorSettings.onNavigateToPreviousEntityRecord, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -324,9 +321,7 @@ function EditorCanvas( { styles={ styles } height="100%" iframeProps={ { - className: classnames( 'editor-canvas__iframe', { - 'has-editor-padding': showEditorPadding, - } ), + className: 'editor-canvas__iframe', ...iframeProps, style: { ...iframeProps?.style, From a798e23082639588dc0651e226557444d691da95 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 2 Feb 2024 11:11:58 +1100 Subject: [PATCH 3/3] No need for transparent background as we're editing the pattern in place rebase --- packages/edit-post/src/components/visual-editor/index.js | 7 ------- packages/edit-post/src/components/visual-editor/style.scss | 2 +- packages/editor/src/components/editor-canvas/index.js | 1 - 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 4105d43c947561..48621d7f49adae 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -95,13 +95,6 @@ export default function VisualEditor( { styles } ) { // We should auto-focus the canvas (title) on load. // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus={ ! isWelcomeGuideVisible } - iframeProps={ { - style: { - background: isEditingPattern - ? 'transparent' - : undefined, - }, - } } /> ); diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index bc0eb3ae1c4c97..5534da1998c285 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -40,7 +40,7 @@ // Matches `.is-focus-mode` padding in // packages/edit-site/src/components/block-editor/style.scss. &.is-focus-mode { - padding: $grid-unit-60; + padding: $grid-unit-30; } } diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index d64682a17bd6fd..e80e70e24db5f2 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -326,7 +326,6 @@ function EditorCanvas( { style: { ...iframeProps?.style, ...deviceStyles, - border: showEditorPadding ? undefined : 0, }, } } >