Block Bindings: Remove Block Bindings icon from List View, fixes and …

…CSS updates. (WordPress#59477) * Fix bindings icon fill color in list view * Rewrite fill-rule as fillRule to fix console error * Fix connection SVG * Fix fixRule * Adapt styles to new SVG * Workaround for distraction free * Fix: - the list view styles, - the stroke & fill in svg - remove unnecessary CSS - lint:fix the scss files * Display parent selector when focused on pattern override * Move list view connections icon beside lock icon * Revert "Display parent selector when focused on pattern override" This reverts commit 717bbe8. * Remove unused CSS styles * Remove Icon from List View --------- Co-authored-by: artemiomorales <[email protected]> Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: SaxonF <[email protected]>
carstingaxion · Mar 27, 2024 · dfd497a · dfd497a
1 parent 412eef5
commit dfd497a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 59 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
@@ -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
@@ -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(
 							</Truncate>
 						</span>
 					) }
-					{ isConnected && canBindBlock( blockName ) && (
-						<span className="block-editor-list-view-block-select-button__bindings">
-							<Icon icon={ connection } />
-						</span>
-					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />

diff --git 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,15 +500,19 @@ $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);
 	@include reduce-motion("transition");
 }
 
 // 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
@@ -1,24 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { SVG, Path, G } from '@wordpress/primitives';
+import { SVG, Path } from '@wordpress/primitives';
 
 const connection = (
 	<SVG
-		width="24"
-		height="24"
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
 		fillRule="evenodd"
 	>
-		<Path d="M5 19L8 16L5 19Z" />
-		<Path d="M16 8L19 5L16 8Z" />
-		<G>
-			<Path d="M5 19L8 16" />
-			<Path d="M9.30003 17.3C9.523 17.5237 9.78794 17.7013 10.0797 17.8224C10.3714 17.9435 10.6842 18.0059 11 18.0059C11.3159 18.0059 11.6287 17.9435 11.9204 17.8224C12.2121 17.7013 12.4771 17.5237 12.7 17.3L15 15L9.00003 9L6.70003 11.3C6.47629 11.523 6.29876 11.7879 6.17763 12.0796C6.05649 12.3714 5.99414 12.6841 5.99414 13C5.99414 13.3159 6.05649 13.6286 6.17763 13.9204C6.29876 14.2121 6.47629 14.477 6.70003 14.7L9.30003 17.3Z" />
-			<Path d="M16 8L19 5" />
-			<Path d="M9 9.00003L15 15L17.3 12.7C17.5237 12.4771 17.7013 12.2121 17.8224 11.9204C17.9435 11.6287 18.0059 11.3159 18.0059 11C18.0059 10.6842 17.9435 10.3714 17.8224 10.0797C17.7013 9.78794 17.5237 9.523 17.3 9.30003L14.7 6.70003C14.477 6.47629 14.2121 6.29876 13.9204 6.17763C13.6286 6.05649 13.3159 5.99414 13 5.99414C12.6841 5.99414 12.3714 6.05649 12.0796 6.17763C11.7879 6.29876 11.523 6.47629 11.3 6.70003L9 9.00003Z" />
-		</G>
+		<Path d="M19.53 4.47a.75.75 0 0 1 0 1.06L17.06 8l.77.769a3.155 3.155 0 0 1 .685 3.439 3.15 3.15 0 0 1-.685 1.022v.001L13.23 17.83v.001a3.15 3.15 0 0 1-4.462 0L8 17.06l-2.47 2.47a.75.75 0 0 1-1.06-1.06L6.94 16l-.77-.769a3.154 3.154 0 0 1-.685-3.439 3.15 3.15 0 0 1 .685-1.023l4.599-4.598a3.152 3.152 0 0 1 4.462 0l.769.768 2.47-2.47a.75.75 0 0 1 1.06 0Zm-2.76 7.7L15 13.94 10.06 9l1.771-1.77a1.65 1.65 0 0 1 2.338 0L16.77 9.83a1.649 1.649 0 0 1 0 2.338h-.001ZM13.94 15 9 10.06l-1.77 1.771a1.65 1.65 0 0 0 0 2.338l2.601 2.602a1.649 1.649 0 0 0 2.338 0v-.001L13.94 15Z" />
 	</SVG>
 );