From 0e98ea923bc8d023a248a7efd48808edecddd929 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 17 Jan 2024 11:06:35 +1100 Subject: [PATCH 1/8] Outline editable blocks that are within a content-locked container Show an outline and pencil icon on blocks that are within a content-locked container (.is-editing-disabled). This allows users to more easily see which content can be modified when editing content-locked patterns, patterns with overrides, and pages. --- packages/base-styles/_z-index.scss | 1 + .../src/components/block-list/content.scss | 30 ++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e6d8d12769e701..396820afdb41cb 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -39,6 +39,7 @@ $z-layers: ( ".wp-block-cover__image-background": 0, // Image background inside cover block. ".wp-block-cover__video-background": 0, // Video background inside cover block. ".wp-block-template-part__placeholder-preview-filter-input": 1, + ".block-editor-block-list__block:not(.is-editing-disabled)::before": 2, // Fixed position appender: ".block-editor-block-list__block .block-list-appender": 2, diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index d907ffd81d9dd0..446b4040b15f2c 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -26,7 +26,7 @@ /* stylelint-disable */ _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection, _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection { - background-color: transparent; + background-color: transparent; } /* stylelint-enable */ @@ -181,6 +181,34 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b &.is-editing-disabled { pointer-events: none; user-select: none; + + .block-editor-block-list__block:not(.is-editing-disabled) { + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + + // display pencil icon in top right + &::before { + background-color: var(--wp-admin-theme-color); + // Disable reason: Need quotes around the encoded SVG URL. + // stylelint-disable-next-line function-url-quotes + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'%3E%3Cpath d='m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z' fill='%23fff'/%3E%3C/svg%3E%0A"); + color: $white; + content: ""; + height: 24px; + position: absolute; + right: 0; + top: 0; + width: 24px; + z-index: z-index(".block-editor-block-list__block:not(.is-editing-disabled)::before"); + } + + .block-editor-block-list__block:not(.is-editing-disabled) { + box-shadow: none; + + &::before { + display: none; + } + } + } } .reusable-block-edit-panel * { From bb583c8537d0b71843f53efdf3a045319fab297c Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 17 Jan 2024 11:46:26 +1100 Subject: [PATCH 2/8] Hide outline and pencil icon from previews --- packages/block-editor/src/components/block-list/content.scss | 2 +- .../block-editor/src/components/block-preview/content.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 446b4040b15f2c..1f00de77a84461 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -182,10 +182,10 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b pointer-events: none; user-select: none; + // Outline and pencil icon to indicate that the block is editable. .block-editor-block-list__block:not(.is-editing-disabled) { box-shadow: 0 0 0 1px var(--wp-admin-theme-color); - // display pencil icon in top right &::before { background-color: var(--wp-admin-theme-color); // Disable reason: Need quotes around the encoded SVG URL. diff --git a/packages/block-editor/src/components/block-preview/content.scss b/packages/block-editor/src/components/block-preview/content.scss index 79cd9f70005b45..fddb1efcfbbed3 100644 --- a/packages/block-editor/src/components/block-preview/content.scss +++ b/packages/block-editor/src/components/block-preview/content.scss @@ -3,6 +3,11 @@ display: none; } +// Hide pencil icon that indicates editable blocks from previews. +.block-editor-block-preview__content-iframe .block-editor-block-list__block:not(.is-editing-disabled)::before { + display: none; +} + .block-editor-block-preview__live-content { * { pointer-events: none; From 763d02a43f760ccaf08051c5fd190066e7bef0ef Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 17 Jan 2024 14:39:38 +1100 Subject: [PATCH 3/8] Make outlines look more like the mockup --- .../src/components/block-list/content.scss | 61 ++++++++++--------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 1f00de77a84461..f547fa7afa1221 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -181,34 +181,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b &.is-editing-disabled { pointer-events: none; user-select: none; - - // Outline and pencil icon to indicate that the block is editable. - .block-editor-block-list__block:not(.is-editing-disabled) { - box-shadow: 0 0 0 1px var(--wp-admin-theme-color); - - &::before { - background-color: var(--wp-admin-theme-color); - // Disable reason: Need quotes around the encoded SVG URL. - // stylelint-disable-next-line function-url-quotes - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'%3E%3Cpath d='m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z' fill='%23fff'/%3E%3C/svg%3E%0A"); - color: $white; - content: ""; - height: 24px; - position: absolute; - right: 0; - top: 0; - width: 24px; - z-index: z-index(".block-editor-block-list__block:not(.is-editing-disabled)::before"); - } - - .block-editor-block-list__block:not(.is-editing-disabled) { - box-shadow: none; - - &::before { - display: none; - } - } - } } .reusable-block-edit-panel * { @@ -331,6 +303,39 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } } +.block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) { + &::before { + background-color: var(--wp-admin-theme-color); + // Disable reason: Need quotes around the encoded SVG URL. + // stylelint-disable-next-line function-url-quotes + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'%3E%3Cpath d='m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z' fill='%23fff'/%3E%3C/svg%3E%0A"); + color: $white; + content: ""; + height: 24px; + position: absolute; + right: $grid-unit-05; + top: $grid-unit-05; + width: 24px; + z-index: z-index(".block-editor-block-list__block:not(.is-editing-disabled)::before"); + } + + &::after { + content: ""; + position: absolute; + pointer-events: none; + top: $border-width; + left: $border-width; + right: $border-width; + bottom: $border-width; + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + border-radius: $radius-block-ui - $border-width; + } + + &.is-hovered::after { + background: rgba(var(--wp-admin-theme-color--rgb), 0.1); + } +} + // Spotlight mode. Fade out blocks unless they contain a selected block. .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { opacity: 0.2; From 60bce8643d485bae464236e4db419944997e1f62 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Fri, 19 Jan 2024 08:57:58 +1000 Subject: [PATCH 4/8] remove icon --- .../src/components/block-list/content.scss | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index f547fa7afa1221..500c1ffcecb312 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -304,30 +304,16 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) { - &::before { - background-color: var(--wp-admin-theme-color); - // Disable reason: Need quotes around the encoded SVG URL. - // stylelint-disable-next-line function-url-quotes - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'%3E%3Cpath d='m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z' fill='%23fff'/%3E%3C/svg%3E%0A"); - color: $white; - content: ""; - height: 24px; - position: absolute; - right: $grid-unit-05; - top: $grid-unit-05; - width: 24px; - z-index: z-index(".block-editor-block-list__block:not(.is-editing-disabled)::before"); - } - &::after { content: ""; + border-style: dotted; position: absolute; pointer-events: none; top: $border-width; left: $border-width; right: $border-width; bottom: $border-width; - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + border: 1px dotted var(--wp-admin-theme-color); border-radius: $radius-block-ui - $border-width; } From e2dbe63a7b4def7bee858fb274577cbcce3bb975 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Fri, 19 Jan 2024 09:04:34 +1000 Subject: [PATCH 5/8] only show block outline when hovering --- packages/block-editor/src/components/block-list/content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 500c1ffcecb312..e4df13a83e5e50 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -303,7 +303,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } } -.block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) { +.edit-site-editor-canvas__block-list:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) { &::after { content: ""; border-style: dotted; From 7a0018c82674656dbf95ab8a4b8ffe5ad984f93d Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 19 Jan 2024 10:39:15 +1100 Subject: [PATCH 6/8] Only show outlines when hovering over the page editor or locked pattern --- .../src/components/block-list/content.scss | 36 +++++++++++-------- .../src/components/editor-canvas/index.js | 3 +- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index e4df13a83e5e50..8cd75f6855b626 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -303,22 +303,28 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } } -.edit-site-editor-canvas__block-list:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) { - &::after { - content: ""; - border-style: dotted; - position: absolute; - pointer-events: none; - top: $border-width; - left: $border-width; - right: $border-width; - bottom: $border-width; - border: 1px dotted var(--wp-admin-theme-color); - border-radius: $radius-block-ui - $border-width; - } +// Indicate which blocks are editable within a page editor or a content-locked +// pattern. Only show when user hovers over the page editor or pattern. +.is-template-locked:hover, +.block-editor-block-list__block:hover { + .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) { + &::after { + content: ""; + border-style: dotted; + position: absolute; + pointer-events: none; + top: $border-width; + left: $border-width; + right: $border-width; + bottom: $border-width; + border: 1px dotted var(--wp-admin-theme-color); + border-radius: $radius-block-ui - $border-width; + } - &.is-hovered::after { - background: rgba(var(--wp-admin-theme-color--rgb), 0.1); + &.is-hovered::after { + background: rgba(var(--wp-admin-theme-color--rgb), 0.1); + border: none; + } } } diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index e5e663f821a649..d6084ef922805e 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -364,7 +364,8 @@ function EditorCanvas( { 'is-' + deviceType.toLowerCase() + '-preview', renderingMode !== 'post-only' ? 'wp-site-blocks' - : `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules. + : `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules. + renderingMode !== 'all' && 'is-' + renderingMode ) } layout={ blockListLayout } dropZoneElement={ From 08355d54bace662c9fcfd04b410598c0c6ea6d4b Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 19 Jan 2024 10:50:27 +1100 Subject: [PATCH 7/8] Remove unnecessary css --- .../block-editor/src/components/block-preview/content.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/content.scss b/packages/block-editor/src/components/block-preview/content.scss index fddb1efcfbbed3..79cd9f70005b45 100644 --- a/packages/block-editor/src/components/block-preview/content.scss +++ b/packages/block-editor/src/components/block-preview/content.scss @@ -3,11 +3,6 @@ display: none; } -// Hide pencil icon that indicates editable blocks from previews. -.block-editor-block-preview__content-iframe .block-editor-block-list__block:not(.is-editing-disabled)::before { - display: none; -} - .block-editor-block-preview__live-content { * { pointer-events: none; From a75a9bb2ba7f6d1dc71ef9260b1f2459830a92f5 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 19 Jan 2024 10:51:24 +1100 Subject: [PATCH 8/8] Remove unnecessary z-index --- packages/base-styles/_z-index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 396820afdb41cb..e6d8d12769e701 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -39,7 +39,6 @@ $z-layers: ( ".wp-block-cover__image-background": 0, // Image background inside cover block. ".wp-block-cover__video-background": 0, // Video background inside cover block. ".wp-block-template-part__placeholder-preview-filter-input": 1, - ".block-editor-block-list__block:not(.is-editing-disabled)::before": 2, // Fixed position appender: ".block-editor-block-list__block .block-list-appender": 2,