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

Jump to bottom

Add visual indicator if a block is connected to block binding source #59185

Merged
merged 19 commits into from
Feb 29, 2024
Merged

Add visual indicator if a block is connected to block binding source #59185

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
6bcef66
Add BlockControlsFirst slot to block controls groups
michalczaplinski Feb 19, 2024
3d6fe72
Add connection icon to BlockControls toolbar button
michalczaplinski Feb 19, 2024
385b13c
Add block binding toolbar button if block is connected to a source
michalczaplinski Feb 19, 2024
44b1c72
Add i18n support for block toolbar button label
michalczaplinski Feb 21, 2024
91c78a4
Add BlockBindingsButton component and remove BlockControlsFirst group
michalczaplinski Feb 21, 2024
be8afcd
Refactor BlockBindingsButton to check for block connections
michalczaplinski Feb 22, 2024
1c51cc2
Change the ToolbarButton label
michalczaplinski Feb 22, 2024
752dcc3
Update block-bindings-button import to block-bindings-indicator
michalczaplinski Feb 22, 2024
bbdd7bf
Block Bindings: Add connection icon to list view (#59331)
artemiomorales Feb 26, 2024
3bc3062
Move bindings style to useBlockProps
artemiomorales Feb 27, 2024
9d6f97c
Remove extraneous comment
artemiomorales Feb 27, 2024
ec3885d
Move bindings selector logic to toolbar
artemiomorales Feb 28, 2024
d9a4b88
Rename indicator file
artemiomorales Feb 28, 2024
d571f82
Move purple stroke style from SVG markup to CSS
artemiomorales Feb 28, 2024
6cd25eb
Merge branch 'trunk' into fix/update-block-bindings-ui-indicator
artemiomorales Feb 28, 2024
ac72c0a
Check if block can be bound before adding styles
artemiomorales Feb 28, 2024
f63e4ef
Simplify the SVG icon:
michalczaplinski Feb 29, 2024
3f9fa3b
Update the CSS namespacing to include the `__`
michalczaplinski Feb 29, 2024
4dc1103
Fix issues with block binding indicator color
michalczaplinski Feb 29, 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
Prev Previous commit
Next Next commit
Move purple stroke style from SVG markup to CSS
  • Loading branch information
@artemiomorales
artemiomorales committed Feb 28, 2024
commit d571f82ef0b6797c3a2e8ab07d13e5e261f5810e
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function BlockBindingsToolbarIndicator() {
<ToolbarItem
as={ 'div' }
aria-label={ _x( 'Connected', 'block toolbar button label' ) }
className="block-editor-block-bindings-indicator"
className="block-editor-block-bindings-indicator block-toolbar-block-bindings-indicator"
michalczaplinski marked this conversation as resolved.
Show resolved Hide resolved
>
<Icon icon={ connection } size={ 24 } />
</ToolbarItem>
Expand Down
6 changes: 5 additions & 1 deletion 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,6 +1,10 @@
.block-editor-block-bindings-indicator {
.block-toolbar-block-bindings-indicator {
display: inline-flex;
align-items: center;
height: 48px;
padding: 6px;
}

.block-editor-block-bindings-indicator svg g {
stroke: #9747ff;
}
Copy link
Member

Choose a reason for hiding this comment

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

@jasmussen or @SaxonF - do you usually put colors that are used in several places under a variable name?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

  1. Should we reuse this property ?

    gutenberg/packages/base-styles/_default-custom-properties.scss

    Line 7 in 3f9fa3b

    --wp-block-synced-color: #7a00df;

  2. Currently the color of the "bound" blocks is #9747ff which is close but different from synced blocks color (#7a00df). Should it be the same?

Copy link
Contributor Author

@michalczaplinski michalczaplinski Feb 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

OK, in 4dc1103, I've added a new --wp-bound-block-color property to _default-custom-properties.scss that I reused in other components.

We can still change this color in the future.

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd defer to Saxon, but my instinct would've been to make these the same, so it could be good to follow up and retire the variable. We do reuse colors like this, there should almost never be stray hex codes in the codebase. But at the same time we're also very careful with introducing new variables. Sorry for the delayed response @michalczaplinski

6 changes: 5 additions & 1 deletion 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 @@ -286,7 +286,11 @@ function ListViewBlockSelectButton(
</Truncate>
</span>
) }
{ isConnected && <Icon icon={ connection } /> }
{ isConnected && (
<span className="block-editor-block-bindings-indicator">
<Icon icon={ connection } />
</span>
) }
{ positionLabel && isSticky && (
<Tooltip text={ positionLabel }>
<Icon icon={ pinSmall } />
Expand Down
6 changes: 3 additions & 3 deletions packages/icons/src/library/connection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ const connection = (
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path d="M5 19L8 16L5 19Z" fill="#9747FF" />
<Path d="M16 8L19 5L16 8Z" fill="#9747FF" />
<Path d="M5 19L8 16L5 19Z" />
<Path d="M16 8L19 5L16 8Z" />
<G
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
stroke="#9747FF"
stroke="#000000"
>
<Path d="M5 19L8 16" />
<Path
Expand Down
Loading