Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Bindings: Remove Block Bindings icon from List View, fixes and CSS updates. #59477

Merged
merged 13 commits into from
Mar 11, 2024
Merged

Block Bindings: Remove Block Bindings icon from List View, fixes and CSS updates. #59477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0c4a15b
Fix bindings icon fill color in list view
artemiomorales Feb 29, 2024
7fc13fe
Rewrite fill-rule as fillRule to fix console error
artemiomorales Mar 1, 2024
88850c3
Fix connection SVG
SantosGuillamot Mar 5, 2024
be3ec14
Fix fixRule
SantosGuillamot Mar 5, 2024
adde379
Adapt styles to new SVG
SantosGuillamot Mar 5, 2024
0a157e5
Workaround for distraction free
SantosGuillamot Mar 5, 2024
1778ccd
Fix:
michalczaplinski Mar 5, 2024
717bbe8
Display parent selector when focused on pattern override
artemiomorales Mar 6, 2024
d45b23f
Move list view connections icon beside lock icon
artemiomorales Mar 6, 2024
5ed3720
Revert "Display parent selector when focused on pattern override"
artemiomorales Mar 6, 2024
8deb651
Remove unused CSS styles
michalczaplinski Mar 7, 2024
045896b
Remove Icon from List View
michalczaplinski Mar 7, 2024
ea55603
Merge branch 'trunk' into fix/block-bindings-indicator-fill
artemiomorales Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can now remove those properties because of the updates to the of the 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;
}
18 changes: 2 additions & 16 deletions packages/block-editor/src/components/list-view/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -72,7 +66,6 @@ function ListViewBlockSelectButton(
getBlockRootClientId,
getBlockOrder,
getBlocksByClientId,
getBlockAttributes,
canRemoveBlocks,
} = useSelect( blockEditorStore );
const { duplicateBlocks, multiSelect, removeBlocks } =
Expand All @@ -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".
Expand Down Expand Up @@ -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 } />
Expand Down
58 changes: 34 additions & 24 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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");
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}

Expand Down Expand Up @@ -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"]) {
Expand All @@ -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);
}
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
13 changes: 2 additions & 11 deletions packages/icons/src/library/connection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);

Expand Down
Loading