From 0c4a15b37ae9d491076ce517ba0292391a4ff4b4 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 29 Feb 2024 14:50:56 -0500 Subject: [PATCH 01/12] Fix bindings icon fill color in list view --- packages/block-editor/src/components/list-view/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 1245bfbabcb7a..57d3177b73a5f 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -564,4 +564,8 @@ $block-navigation-max-indent: 8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; + + path { + fill: $white; + } } From 7fc13fe3f766454f947c4edf34ed7563cec56cc0 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 1 Mar 2024 18:17:03 -0500 Subject: [PATCH 02/12] Rewrite fill-rule as fillRule to fix console error --- packages/icons/src/library/connection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js index 47cee6c66a3ef..d0d81be185c07 100644 --- a/packages/icons/src/library/connection.js +++ b/packages/icons/src/library/connection.js @@ -9,7 +9,7 @@ const connection = ( height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" - fill-rule="evenodd" + fillRule="evenodd" > From 88850c3c504327073dedc84de6beea0471a2e350 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 5 Mar 2024 09:44:05 +0100 Subject: [PATCH 03/12] Fix connection SVG --- packages/icons/src/library/connection.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js index d0d81be185c07..cde8bf523bd9c 100644 --- a/packages/icons/src/library/connection.js +++ b/packages/icons/src/library/connection.js @@ -1,24 +1,15 @@ /** * WordPress dependencies */ -import { SVG, Path, G } from '@wordpress/primitives'; +import { SVG, Path } from '@wordpress/primitives'; const connection = ( - - - - - - - - + ); From be3ec14171cc159b1e90bd1a997a6410978ce17c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 5 Mar 2024 09:54:27 +0100 Subject: [PATCH 04/12] Fix fixRule --- packages/icons/src/library/connection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js index cde8bf523bd9c..482bb8a43dabb 100644 --- a/packages/icons/src/library/connection.js +++ b/packages/icons/src/library/connection.js @@ -7,7 +7,7 @@ const connection = ( From adde379058d9ac55c3e9b9479627f94d181008e5 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 5 Mar 2024 09:56:29 +0100 Subject: [PATCH 05/12] Adapt styles to new SVG --- .../block-bindings-toolbar-indicator/style.scss | 7 +------ .../block-editor/src/components/list-view/style.scss | 11 ----------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss index 4aeabdf8acf6e..afb9690811be1 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss +++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss @@ -3,12 +3,7 @@ align-items: center; height: 48px; padding: 6px; - - svg g { + svg { stroke: var(--wp-bound-block-color); - fill: transparent; - stroke-width: 1.5; - stroke-linecap: round; - stroke-linejoin: round; } } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 57d3177b73a5f..e3c9df1c8673d 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -558,14 +558,3 @@ $block-navigation-max-indent: 8; display: none; } -.block-editor-list-view-block-select-button__bindings svg g { - stroke: var(--wp-bound-block-color); - fill: transparent; - stroke-width: 1.5; - stroke-linecap: round; - stroke-linejoin: round; - - path { - fill: $white; - } -} From 0a157e5972f3fa73bd561711f9f62c9d738a6b7b Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 5 Mar 2024 10:34:53 +0100 Subject: [PATCH 06/12] Workaround for distraction free --- .../block-bindings-toolbar-indicator/style.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss index afb9690811be1..857658664a68a 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss +++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss @@ -1,9 +1,15 @@ .block-editor-block-bindings-toolbar-indicator { display: inline-flex; align-items: center; - height: 48px; - padding: 6px; + justify-content: center; + min-width: 36px; + padding-left: 6px; + padding-right: 6px; svg { stroke: var(--wp-bound-block-color); } } + +.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator { + height: 32px; +} From 1778ccd0624017f3f2abeb3f9725566bbe04bf19 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 5 Mar 2024 12:11:23 +0000 Subject: [PATCH 07/12] Fix: - the list view styles, - the stroke & fill in svg - remove unnecessary CSS - lint:fix the scss files --- .../style.scss | 11 ++-- .../src/components/list-view/style.scss | 53 +++++++++++++------ 2 files changed, 43 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss index 857658664a68a..f4fb768b6ec37 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss +++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss @@ -2,14 +2,15 @@ display: inline-flex; align-items: center; justify-content: center; - min-width: 36px; - padding-left: 6px; - padding-right: 6px; + padding: 6px; svg { - stroke: var(--wp-bound-block-color); + fill: var(--wp-bound-block-color); } } -.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator { +.edit-post-header__toolbar +.selected-block-tools-wrapper +.block-editor-block-toolbar +.block-editor-block-bindings-toolbar-indicator { height: 32px; } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index e3c9df1c8673d..a25e42e23468b 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -7,7 +7,7 @@ // Move upwards when in modal. .components-modal__content & { margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0; - width: calc(100% + #{ $grid-unit-15 }); + width: calc(100% + #{$grid-unit-15}); } // Without setting `pointer-events: none`, when dragging over list view items, @@ -71,7 +71,8 @@ &:focus::after { box-shadow: inset 0 0 0 1px $white, - 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color); + 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-block-synced-color); } } &.is-selected .block-editor-list-view-block-contents, @@ -82,14 +83,16 @@ &::after { box-shadow: inset 0 0 0 1px $white, - 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-admin-theme-color); } } &.is-selected.is-synced .block-editor-list-view-block-contents:focus { &::after { box-shadow: inset 0 0 0 1px $white, - 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color); + 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-block-synced-color); } } &.is-selected .block-editor-list-view-block__menu:focus { @@ -181,7 +184,9 @@ &.is-after-dragged-blocks.is-displacement-down { transition: transform 0.2s; - transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1)); + transform: + translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * + -1)); @include reduce-motion("transition"); } @@ -217,7 +222,10 @@ content: ""; position: absolute; pointer-events: none; - transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; + transition: + border-color 0.1s linear, + border-style 0.1s linear, + box-shadow 0.1s linear; top: -2px; right: 0; left: 0; @@ -242,7 +250,9 @@ bottom: 0; left: 0; border-radius: inherit; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: + inset 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-admin-theme-color); z-index: 2; pointer-events: none; } @@ -255,7 +265,9 @@ &.is-nesting .block-editor-list-view__menu, .block-editor-list-view-block__menu:focus { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: + inset 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-admin-theme-color); z-index: 1; } @@ -458,7 +470,9 @@ $block-navigation-max-indent: 8; } .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander { - margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 ); + margin-left: + ($icon-size) * $block-navigation-max-indent + 4 * + ($block-navigation-max-indent - 1); } .block-editor-list-view-leaf:not([aria-level="1"]) { @@ -471,12 +485,12 @@ $block-navigation-max-indent: 8; // indentation in `use-list-view-drop-zone.js` must be updated as well // to ensure the drop zone is aligned with the indentation. @for $i from 0 to $block-navigation-max-indent { - .block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander { + .block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] + .block-editor-list-view__expander { @if $i - 1 >= 0 { - margin-left: ( $icon-size * $i ) + 4 * ($i - 1); - } - @else { - margin-left: ( $icon-size * $i ); + margin-left: ($icon-size * $i) + 4 * ($i - 1); + } @else { + margin-left: ($icon-size * $i); } } } @@ -486,7 +500,9 @@ $block-navigation-max-indent: 8; } // Point downwards when open. -.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg { +.block-editor-list-view-leaf[data-expanded="true"] +.block-editor-list-view__expander +svg { visibility: visible; transition: transform 0.2s ease; transform: rotate(90deg); @@ -494,7 +510,9 @@ $block-navigation-max-indent: 8; } // Point rightwards when closed -.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg { +.block-editor-list-view-leaf[data-expanded="false"] +.block-editor-list-view__expander +svg { visibility: visible; transform: rotate(0deg); transition: transform 0.2s ease; @@ -558,3 +576,6 @@ $block-navigation-max-indent: 8; display: none; } +.block-editor-list-view-block-select-button__bindings { + display: flex; +} From 717bbe8966962ad3c72687794c9fe8e7f91061f0 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 5 Mar 2024 21:03:23 -0500 Subject: [PATCH 08/12] Display parent selector when focused on pattern override --- .../src/components/block-toolbar/index.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index e566096d54f26..4775f89051f66 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -66,6 +66,7 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar, showParentSelector, isUsingBindings, + isPatternOverride, } = useSelect( ( select ) => { const { getBlockName, @@ -93,8 +94,17 @@ export function PrivateBlockToolbar( { const isVisual = selectedBlockClientIds.every( ( id ) => getBlockMode( id ) === 'visual' ); - const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId ) - ?.metadata?.bindings; + const bindings = getBlockAttributes( selectedBlockClientId )?.metadata + ?.bindings; + const _isUsingBindings = !! bindings; + const _isPatternOverride = _isUsingBindings + ? Object.keys( bindings ).some( + ( bindingKey ) => + bindings[ bindingKey ].source === + 'core/pattern-overrides' + ) + : false; + return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -112,8 +122,9 @@ export function PrivateBlockToolbar( { true ) && selectedBlockClientIds.length === 1 && - _isDefaultEditingMode, + ( _isDefaultEditingMode || _isPatternOverride ), isUsingBindings: _isUsingBindings, + isPatternOverride: _isPatternOverride, }; }, [] ); @@ -164,7 +175,9 @@ export function PrivateBlockToolbar( {
{ ! isMultiToolbar && isLargeViewport && - isDefaultEditingMode && } + ( isDefaultEditingMode || isPatternOverride ) && ( + + ) } { isUsingBindings && canBindBlock( blockName ) && ( ) } From d45b23fa4c3d769b88ef20826b5a5d6f343278da Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 5 Mar 2024 21:08:07 -0500 Subject: [PATCH 09/12] Move list view connections icon beside lock icon --- .../src/components/list-view/block-select-button.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 1214ec4ec7c08..c92691a091dea 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -287,11 +287,6 @@ function ListViewBlockSelectButton( ) } - { isConnected && canBindBlock( blockName ) && ( - - - - ) } { positionLabel && isSticky && ( @@ -314,6 +309,11 @@ function ListViewBlockSelectButton( ) ) } ) : null } + { isConnected && canBindBlock( blockName ) && ( + + + + ) } { isLocked && ( From 5ed37204abb8185e41cccbd92b4f57aed57dc147 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 5 Mar 2024 22:03:36 -0500 Subject: [PATCH 10/12] Revert "Display parent selector when focused on pattern override" This reverts commit 717bbe8966962ad3c72687794c9fe8e7f91061f0. --- .../src/components/block-toolbar/index.js | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 4775f89051f66..e566096d54f26 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -66,7 +66,6 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar, showParentSelector, isUsingBindings, - isPatternOverride, } = useSelect( ( select ) => { const { getBlockName, @@ -94,17 +93,8 @@ export function PrivateBlockToolbar( { const isVisual = selectedBlockClientIds.every( ( id ) => getBlockMode( id ) === 'visual' ); - const bindings = getBlockAttributes( selectedBlockClientId )?.metadata - ?.bindings; - const _isUsingBindings = !! bindings; - const _isPatternOverride = _isUsingBindings - ? Object.keys( bindings ).some( - ( bindingKey ) => - bindings[ bindingKey ].source === - 'core/pattern-overrides' - ) - : false; - + const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId ) + ?.metadata?.bindings; return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -122,9 +112,8 @@ export function PrivateBlockToolbar( { true ) && selectedBlockClientIds.length === 1 && - ( _isDefaultEditingMode || _isPatternOverride ), + _isDefaultEditingMode, isUsingBindings: _isUsingBindings, - isPatternOverride: _isPatternOverride, }; }, [] ); @@ -175,9 +164,7 @@ export function PrivateBlockToolbar( {
{ ! isMultiToolbar && isLargeViewport && - ( isDefaultEditingMode || isPatternOverride ) && ( - - ) } + isDefaultEditingMode && } { isUsingBindings && canBindBlock( blockName ) && ( ) } From 8deb651f6226235015a2aa044edb7854d8c6d1b3 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 7 Mar 2024 13:01:39 +0000 Subject: [PATCH 11/12] Remove unused CSS styles --- packages/block-editor/src/components/list-view/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index a25e42e23468b..64f713e7e61d2 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -575,7 +575,3 @@ svg { .list-view-appender__description { display: none; } - -.block-editor-list-view-block-select-button__bindings { - display: flex; -} From 045896b5ba773feaa087d4112edf2e31743fd55b Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 7 Mar 2024 13:26:14 +0000 Subject: [PATCH 12/12] Remove Icon from List View --- .../list-view/block-select-button.js | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index c92691a091dea..6b9de943ea0bf 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -14,12 +14,7 @@ import { Tooltip, } from '@wordpress/components'; import { forwardRef } from '@wordpress/element'; -import { - Icon, - connection, - lockSmall as lock, - pinSmall, -} from '@wordpress/icons'; +import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons'; import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes'; import { useSelect, useDispatch } from '@wordpress/data'; import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts'; @@ -37,12 +32,11 @@ import { useBlockLock } from '../block-lock'; import { store as blockEditorStore } from '../../store'; import useListViewImages from './use-list-view-images'; import { useListViewContext } from './context'; -import { canBindBlock } from '../../hooks/use-bindings-attributes'; function ListViewBlockSelectButton( { className, - block: { clientId, name: blockName }, + block: { clientId }, onClick, onContextMenu, onMouseDown, @@ -72,7 +66,6 @@ function ListViewBlockSelectButton( getBlockRootClientId, getBlockOrder, getBlocksByClientId, - getBlockAttributes, canRemoveBlocks, } = useSelect( blockEditorStore ); const { duplicateBlocks, multiSelect, removeBlocks } = @@ -82,8 +75,6 @@ function ListViewBlockSelectButton( const images = useListViewImages( { clientId, isExpanded } ); const { rootClientId } = useListViewContext(); - const isConnected = getBlockAttributes( clientId )?.metadata?.bindings; - const positionLabel = blockInformation?.positionLabel ? sprintf( // translators: 1: Position of selected block, e.g. "Sticky" or "Fixed". @@ -309,11 +300,6 @@ function ListViewBlockSelectButton( ) ) } ) : null } - { isConnected && canBindBlock( blockName ) && ( - - - - ) } { isLocked && (