Save Panel: Remove connections icon and fix padding #62542
Merged
Conversation
This file contains hidden or 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
I've hardcoded the
However. |
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 , 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. |
Size Change: -424 B (-0.02%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
Flaky tests detected in 7aadf9a. 🔍 Workflow run URL: https://.com/WordPress/gutenberg/actions/runs/9516571612
|
| @@ -32,7 +32,7 @@ | |||
| } | |||
| .entities-saved-states__post-meta { | |||
| margin-left: $grid-unit-30; | |||
| margin-left: 28px; | |||
There was a problem hiding this comment.
Can we use an unit instead of hard-coding a margin?
There was a problem hiding this comment.
@cbravobernal In light of the design changes, I now just use the preexisting entities-saved-states__changes class for styling 👍
Let's look for an alternative :-) |
Thanks for following-up with this, I really appreciate it. Can we use the same styling for "post meta" as the style we use to detail global styles changes  The other thing that is probably best addressed for later is whether we should show the full list of modified properties included the list of meta fields. Something like: title, content, post meta ( my_meta_field, my_other_meta_field... ) |
The original motivation was to separate out, with checkboxes, individual attributes. In absence of that, I would agree with Riad that we should just use the regular/default gray-text bulleted layout. |
@youknowriad @cbravobernal Done! This is what it looks like now:  |
I'm not getting those styles. Am I missing something? Tested on Firefox.
|
@cbravobernal I see it on Firefox without issue 🤔 |
7f9cf2c to 7aadf9a Compare SantosGuillamot approved these changes Jun 17, 2024
There was a problem hiding this comment.
I've tested it in Chrome and Safari, and I can see it working properly.
Apart from that, it seems it is using the same markup as the Global Styles changes, so I assume it is correct.
I'll wait to merge the pull request until @cbravobernal can confirm if the issue he was having is solved or is still present.
Got it working. Not sure about what was preventing the style from view. |
29 tasks
huubl pushed a commit to huubl/gutenberg that referenced this pull request Jun 17, 2024
* Remove connections icon and fix padding * Reuse Global Styles changes design for meta changes * Update test Co-authored-by: artemiomorales <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
ellatrix pushed a commit that referenced this pull request Jun 18, 2024
* Remove connections icon and fix padding * Reuse Global Styles changes design for meta changes * Update test Co-authored-by: artemiomorales <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
ellatrix pushed a commit that referenced this pull request Jun 18, 2024
* Remove connections icon and fix padding * Reuse Global Styles changes design for meta changes * Update test Co-authored-by: artemiomorales <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
I just cherry-picked this PR to the wp/6.6-beta-3 branch to get it included in the next release: ecc7107 |
ellatrix pushed a commit that referenced this pull request Jun 18, 2024
* Remove connections icon and fix padding * Reuse Global Styles changes design for meta changes * Update test Co-authored-by: artemiomorales <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
Sign up for free to join this conversation on . 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 revises the styles of the indicator regarding post meta in the save panel, namely removing the connections icon and fixing the padding.
Why?
While the connections icon is explanatory when post meta has been modified via Block Bindings, it is possible to modify post meta by other means and it is not accurate to show the icon in all circumstances.
How?
This PR removes the connections icon and modifies the styles to fix the padding.
Testing Instructions
1. Register post meta by adding this snippet to your theme's functions.php
2. Add a paragraph block bound to the custom field using the Code Editor
Testing Instructions for Keyboard
Screenshots or screencast
Before
After