Block Bindings: Add connection icon to list view #59331
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
artemiomorales
requested review from
gziolo,
SaxonF,
jasmussen and
michalczaplinski
|
I set the base branch as #59185 for now to simplify the diff, since the connection icon is already included in that PR. Perhaps we can just merge this one into that one and ship all of these UI improvements together. Design-wise, I figured reusing the connection icon made sense, but am happy to revise or iterate on this. Lastly, I'm not sure we'll merge this for 6.5 but have it here for conversation in any case. |
|
Size Change: +20 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
artemiomorales
added
[Type] Bug
|
Closed for now as per this comment. EDIT: Miscommunication; it's been reopened |
| { positionLabel && isSticky && ( | ||
| <Tooltip text={ positionLabel }> | ||
| <Icon icon={ pinSmall } /> | ||
| text |
There was a problem hiding this comment.
What is this text for?
There was a problem hiding this comment.
Thanks for the catch! This was added in error — just removed it in 2935d05
michalczaplinski
approved these changes
Feb 26, 2024
There was a problem hiding this comment.
I set the base branch as #59185 for now to simplify the diff, since the connection icon is already included in that PR. Perhaps we can just merge this one into that one and ship all of these UI improvements together.
Definitely. You're welcome to push commits directly to #59185 🙂 .
Pre-approving, I only have one small comment below.
artemiomorales
merged this pull request
into
fix/update-block-bindings-ui-indicator
45 of 54 checks passed
artemiomorales
added a commit
that referenced
this pull request
Feb 26, 2024
* Add connection icon to list view * Remove extraneous string
9 tasks
getdave
removed
the
Backport to WP Beta/RC
|
@artemiomorales I was not able to pick this for WP 6.5 Beta 3 because it was not merged into Please reach out to either @youknowriad or I directly if this will cause any issues. |
artemiomorales
added a commit
that referenced
this pull request
Feb 28, 2024
* Add connection icon to list view * Remove extraneous string
michalczaplinski
added a commit
that referenced
this pull request
Feb 29, 2024
…59185) * Add BlockControlsFirst slot to block controls groups * Add connection icon to BlockControls toolbar button * Add block binding toolbar button if block is connected to a source * Add i18n support for block toolbar button label * Add BlockBindingsButton component and remove BlockControlsFirst group * Refactor BlockBindingsButton to check for block connections * Change the ToolbarButton label * Update block-bindings-button import to block-bindings-indicator * Block Bindings: Add connection icon to list view (#59331) * Add connection icon to list view * Remove extraneous string * Move bindings style to useBlockProps * Remove extraneous comment * Move bindings selector logic to toolbar * Rename indicator file * Move purple stroke style from SVG markup to CSS * Check if block can be bound before adding styles * Simplify the SVG icon: - get rid of 2 unnecessary `<path>` elements - move the stroke styles to CSS - add the `evenodd` rule * Update the CSS namespacing to include the `__` * Fix issues with block binding indicator color --------- Co-authored-by: michalczaplinski <czapla@git.wordpress.org> Co-authored-by: artemiomorales <artemiosans@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org>
youknowriad
pushed a commit
that referenced
this pull request
Mar 4, 2024
…59185) * Add BlockControlsFirst slot to block controls groups * Add connection icon to BlockControls toolbar button * Add block binding toolbar button if block is connected to a source * Add i18n support for block toolbar button label * Add BlockBindingsButton component and remove BlockControlsFirst group * Refactor BlockBindingsButton to check for block connections * Change the ToolbarButton label * Update block-bindings-button import to block-bindings-indicator * Block Bindings: Add connection icon to list view (#59331) * Add connection icon to list view * Remove extraneous string * Move bindings style to useBlockProps * Remove extraneous comment * Move bindings selector logic to toolbar * Rename indicator file * Move purple stroke style from SVG markup to CSS * Check if block can be bound before adding styles * Simplify the SVG icon: - get rid of 2 unnecessary `<path>` elements - move the stroke styles to CSS - add the `evenodd` rule * Update the CSS namespacing to include the `__` * Fix issues with block binding indicator color --------- Co-authored-by: michalczaplinski <czapla@git.wordpress.org> Co-authored-by: artemiomorales <artemiosans@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org>
youknowriad
pushed a commit
that referenced
this pull request
Mar 4, 2024
…59185) * Add BlockControlsFirst slot to block controls groups * Add connection icon to BlockControls toolbar button * Add block binding toolbar button if block is connected to a source * Add i18n support for block toolbar button label * Add BlockBindingsButton component and remove BlockControlsFirst group * Refactor BlockBindingsButton to check for block connections * Change the ToolbarButton label * Update block-bindings-button import to block-bindings-indicator * Block Bindings: Add connection icon to list view (#59331) * Add connection icon to list view * Remove extraneous string * Move bindings style to useBlockProps * Remove extraneous comment * Move bindings selector logic to toolbar * Rename indicator file * Move purple stroke style from SVG markup to CSS * Check if block can be bound before adding styles * Simplify the SVG icon: - get rid of 2 unnecessary `<path>` elements - move the stroke styles to CSS - add the `evenodd` rule * Update the CSS namespacing to include the `__` * Fix issues with block binding indicator color --------- Co-authored-by: michalczaplinski <czapla@git.wordpress.org> Co-authored-by: artemiomorales <artemiosans@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR adds a connection icon to the list view when block bindings are active.
Related to UI improvements in #59185 and is part of improvements proposed in #58978.
Why?
To provide better visual indications of when blocks are connected.
How?
Checks to see if bindings are present, and if so, adds the icon in the
block-select-button.jsfile.Testing Instructions
Please use instructions from #58085, then check to see that the connection icon appears in the list view.
Screenshots or screencast