Social links: add background color block supports #43293
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
ramonjd
requested review from
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
ramonjd
added
[Type] Enhancement
|
Size Change: +154 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
ramonjd
commented
Aug 17, 2022
| "gradients": true, | ||
| "text": false, | ||
| "__experimentalDefaultControls": { | ||
| "background": false |
There was a problem hiding this comment.
Not entirely sure why I had to explicitly define text and __experimentalDefaultControls.background as false, but a text control appeared and the background color control is default without them.
|
This also closes #39990. -When all 3 colors are selected, the contrast warning can show more than once. Is it possible to limit that to one? Should the colors be grouped inside the options modal? Right now, they are not: |
|
Thanks @carolinan !
Good catch. I've just been looking at this and it might be tricky, well, to do it via props. I can't see any way to hand down an The other way might be to add a prop to the block.json in 🤔
I think the two group represent those controls that are shown by default, and the one (background) that is not. If I'm not mistaken, that's expected ToolsPanel UI behaviour. |
carolinan
approved these changes
Aug 17, 2022
Enable alpha for icons and icon background colors added in #43453
ramonjd
force-pushed
the
add/block-supports/social-links-background-color
branch
from
27c720e
to
b2dfb82
Compare
|
Now that #43357 is in, I've disabled the contrast checker for the background color.
Here's some test HTML. Example<!-- wp:social-links {"customIconColor":"#f5dac1","iconColorValue":"#f5dac1","customIconBackgroundColor":"#f5d7ba","iconBackgroundColorValue":"#f5d7ba","showLabels":true,"style":{"color":{"background":"#184043"}}} -->
<ul class="wp-block-social-links has-visible-labels has-icon-color has-icon-background-color has-background" style="background-color:#184043"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /--></ul>
<!-- /wp:social-links -->@ndiego I also had to rebase on top of #43453 to enable alpha controls. If you have a spare moment to double check this one before merging I'd be grateful. Thank you!
|
glendaviesnz
approved these changes
Aug 24, 2022
14 tasks
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.
Related:
What?
Adding background color block supports to the social links block.
The background color is not displayed by default.
Text is deliberately omitted because it is handled by the bespoke
iconColorValueattribute.Why?
To add the option to provide a background color to social icons blocks.
To create consistency across blocks.
How?
Making existing attribute color controls part of the colors tools panel.
Testing Instructions
Some example block HTML code - so you don't have to!
Screenshots or screencast
2022-08-17.12.45.12.mp4