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 4aeabdf8acf6e8..f4fb768b6ec37a 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,14 +1,16 @@ .block-editor-block-bindings-toolbar-indicator { display: inline-flex; align-items: center; - height: 48px; + justify-content: center; padding: 6px; - - svg g { - stroke: var(--wp-bound-block-color); - fill: transparent; - stroke-width: 1.5; - stroke-linecap: round; - stroke-linejoin: round; + svg { + fill: 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; +} 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 1214ec4ec7c08a..6b9de943ea0bf2 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". @@ -287,11 +278,6 @@ function ListViewBlockSelectButton( ) } - { isConnected && canBindBlock( blockName ) && ( - - - - ) } { positionLabel && isSticky && ( diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 1245bfbabcb7a7..64f713e7e61d25 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; @@ -557,11 +575,3 @@ $block-navigation-max-indent: 8; .list-view-appender__description { 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; -} diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js index d0d81be185c078..482bb8a43dabb8 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 = ( - - - - - - - - + );