Social Links Block: Add icon and background color options #25372

aaronrobertshaw · 2020-09-16T12:27:06Z

Description

Added options to the social links block allowing a user to specify the icon or background colors and have that apply to all the social links contained within it.

Note: Saving the styles in the social link blocks will be done if this general approach is continued instead of switching to the useColors hook if possible.

#21605

How has this been tested?

Only manual testing.
WordPress: 5.5.1

Testing Instructions

Create a post adding social links block to it and adding urls for multiple platforms before saving.
Apply this PR
Reload the page, block should still be valid
Select the social links block
Select icon and background colors from the Inspector controls (include custom colors in testing)
Save post and reload editor. Colors should be maintained.
Switch style to logos only. The background color options should not be shown and when switching styles back the background color will have been cleared.

Screenshots

Types of changes

New feature. Enhancement.

Next Steps

Add class names and styles to social link saving for front end display
~~Switch to using __experimentalUseColors if its possible to achieve same editor functionality. (didn't work for me)~~
Refine approach

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

aaronrobertshaw · 2020-09-21T00:56:26Z

@apeatling and @glendaviesnz these color options are working for me although I feel there should be a better way of achieving it than I've come up with. I'd appreciate any suggestions or feedback you have.

packages/block-library/src/social-links/edit.js

packages/block-library/src/social-link/edit.js

apeatling · 2020-09-21T18:39:20Z

This functions well. I think there should be a contrast-checker component in place for the checking the background and icon color combination selected.

aaronrobertshaw · 2020-09-22T10:09:55Z

I've added a contrast checker although it doesn't really handle the default backgrounds that vary in color by the social media platform.

This PR has also been rebased and conflicts resolved after the addition of the "open in new tab" feature for social links. I also had to change the approach a little as for the moment colors cannot be retrieved from the general settings ( #25419 ). There is a PR to re-add the default colors and gradients ( #25523 ) however updating this to leverage the __experimentalUseEditorFeature approach might be better long term.

apeatling · 2020-09-23T22:19:08Z

packages/block-library/src/social-link/index.php

-	$url        = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
-	$label      = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
-	$class_name = isset( $attributes['className'] ) ? ' ' . $attributes['className'] : false;
+	$service         = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';


I think this and the others could be updated to use array_key_exists( 'service', $attributes ). That seems to be a cleaner way that some of the other core blocks now use.

glendaviesnz · 2020-09-23T22:53:05Z

This all seems to work as advertised.

Apologies if you already explored this, but the specificity of the individual link color settings is reasonably light, so rather than having to pass down context and set individual attributes for each embedded link is there some way we could instead add a generic style at the parent level? eg. adding a style of:

.override-background.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
    background-color: red;
}

replaces the background on all the child icons.

aaronrobertshaw · 2020-09-24T02:11:59Z

Apologies if you already explored this, but the specificity of the individual link color settings is reasonably light, so rather than having to pass down context and set individual attributes for each embedded link is there some way we could instead add a generic style at the parent level?

That was my thinking initially as well, to be able to just apply the color choices to the social links block itself and allow the individual links to inherit that as required. Unfortunately, I couldn't find a way to achieve the desired results doing this.

Some of the issues I ran into in this area were:

Maintaining consistency by allowing the normal use of color CSS classes e.g. has-accent-background-color
Not being able to use those color classes on the container without them being applied but still inheritable (e.g. background colors).
As the color palette could be defined by the theme, I couldn't create a new set of styles setting the correct color like the example you gave
Custom colors in general using inline styles make the background colors on the parent a problem again.
Still maintaining the individual social media service colors without blowing out the CSS footprint

I could be missing something so if you do have further suggestions, let me know and I can explore those. For now though, this does give us the control over colors we need, hopefully that is ok.

glendaviesnz · 2020-09-24T22:21:09Z

I could be missing something so if you do have further suggestions, let me know and I can explore those. For now though, this does give us the control over colors we need, hopefully that is ok.

No, I don't think you are missing anything, it just seemed like there should be a simpler approach, but due to the factors you list I think the approach you have take is the only way to push the styles down to the children.

glendaviesnz · 2020-09-24T22:22:46Z

@apeatling do you have any suggestions on who is best to give us a signoff on this approach?

apeatling · 2020-09-24T22:34:46Z

Maybe @nosolosw or @youknowriad might have thoughts on the approach?

youknowriad · 2020-09-25T08:33:23Z

Hi there! thanks for the PR.

In general, we're trying to move away from specific customization and attributes in favor of generic support flags that can be enabled across blocks, so my questions here are:

Can we use the __experimentalColor support flag for the background color support here instead? It does support text and backgrouund color and it seems the link color can be considered as the same thing as "icon color"? Can't we just provide an option to change the "label"?

aaronrobertshaw · 2020-09-25T08:54:28Z

Hi @youknowriad, thanks for taking a look at this!

I'm still trying to get my head around how everything fits together. I did initially try to leverage __experimentalColor however I ran into problems applying the colors only to each child within the Social Links' InnerBlocks.

Looking back at this PR, do you think an option would be to use __experimentalColors without wrapping the InnerBlocks with the generated color components. Then still make those color attributes available to the inner links via the block context?

youknowriad · 2020-09-25T08:56:41Z

I was thinking __experimentalColors could be applied to SocialLink and not SocialLinks? or is this not good enough in terms of UX? It's how the "buttons + button" block works.

aaronrobertshaw · 2020-09-25T09:07:29Z

The idea was, the better UX was for the user to only have to make a single set of color selections. That is the approach used by the navigation block.

youknowriad · 2020-09-25T09:56:05Z

I wonder if there's a way to make the settings on the parent component work as a "default value" for its children instead.

oandregal · 2020-09-25T11:50:36Z

@youknowriad I don't have an answer for this at the moment but logged this example at #22887 because I smell that these little glitches in the system may be addressed together.

aaronrobertshaw · 2020-10-01T07:50:22Z

@youknowriad and @nosolosw would you be happy for us to move forward with this current approach so we have the functionality in place? I'm happy to come back and revisit this when we have a solution to the larger questions raised.

youknowriad · 2020-10-01T08:06:08Z

Personally, I'd rather compromise on the UI and make this per icon for now until we figure out a better API for handling parent -> child attributes UI. What do you think here @mtias

mtias · 2020-10-01T10:12:15Z

It doesn't make sense per icon to me unless it's just an implementation detail (the control lives int he wrapper and propagates)

aaronrobertshaw · 2020-10-06T08:16:02Z

@apeatling Would you like to weigh in and cast a vote on a preferred approach to this one?

Should we allow what is the best experience for a user, to be the tie breaker if needed?

apeatling · 2020-10-06T18:37:36Z

I agree that changing per icon is not the ideal user experience, and we're better off optimizing for the user.

aaronrobertshaw · 2021-01-11T09:28:00Z

An alternative approach to this is available in #28084

I'm inclined to close this PR in favour of the new approach if others agree.

aaronrobertshaw · 2021-01-13T03:44:08Z

Closing this PR in favour of #28084

aaronrobertshaw marked this pull request as ready for review September 21, 2020 00:53

aaronrobertshaw requested a review from mkaz as a code owner September 21, 2020 00:53

aaronrobertshaw changed the title ~~[WIP] Social Links Block: Add icon and background color options~~ Social Links Block: Add icon and background color options Sep 21, 2020

apeatling requested review from apeatling and glendaviesnz September 21, 2020 18:28

apeatling requested changes Sep 21, 2020

View reviewed changes

packages/block-library/src/social-links/edit.js Outdated Show resolved Hide resolved

packages/block-library/src/social-link/edit.js Outdated Show resolved Hide resolved

aaronrobertshaw force-pushed the add/social-icons-color-options branch from f46c6e7 to c7da4c7 Compare September 22, 2020 09:31

apeatling reviewed Sep 23, 2020

View reviewed changes

oandregal mentioned this pull request Sep 25, 2020

Block API: explore aligning block attributes, block supports, and theme.json shape #22887

Closed

apeatling assigned aaronrobertshaw Sep 29, 2020

oandregal mentioned this pull request Oct 8, 2020

Social Links: Add ability to change social icon sizes #25921

Merged

aaronrobertshaw added 7 commits November 6, 2020 15:04

Add color options for Social Links block

0d5253b

Update rendering of social links to reflect color selections

1806d8c

Move Social Links attributes to its block.json

bd766cc

Add contrast checker for social icons

de9ea1a

Fix bug with potentially undefined className

bdcefce

Fix color palette after removal from settings

6f8441d

Update social link attribute checks to use array_key_exists

ceb9458

aaronrobertshaw force-pushed the add/social-icons-color-options branch from 4bb63cf to ceb9458 Compare November 6, 2020 05:59

skorasaurus added the [Block] Social Affects the Social Block - used to display Social Media accounts label Dec 6, 2020

aaronrobertshaw mentioned this pull request Jan 11, 2021

Social Icons: Add icon & background color options #28084

Merged

6 tasks

aaronrobertshaw closed this Jan 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Social Links Block: Add icon and background color options #25372

Social Links Block: Add icon and background color options #25372

aaronrobertshaw commented Sep 16, 2020 •

edited

Loading

aaronrobertshaw commented Sep 21, 2020

apeatling commented Sep 21, 2020

aaronrobertshaw commented Sep 22, 2020

apeatling Sep 23, 2020

glendaviesnz commented Sep 23, 2020 •

edited

Loading

aaronrobertshaw commented Sep 24, 2020

glendaviesnz commented Sep 24, 2020

glendaviesnz commented Sep 24, 2020

apeatling commented Sep 24, 2020

youknowriad commented Sep 25, 2020

aaronrobertshaw commented Sep 25, 2020

youknowriad commented Sep 25, 2020 •

edited

Loading

aaronrobertshaw commented Sep 25, 2020

youknowriad commented Sep 25, 2020

oandregal commented Sep 25, 2020

aaronrobertshaw commented Oct 1, 2020

youknowriad commented Oct 1, 2020

mtias commented Oct 1, 2020 •

edited

Loading

aaronrobertshaw commented Oct 6, 2020

apeatling commented Oct 6, 2020

aaronrobertshaw commented Jan 11, 2021

aaronrobertshaw commented Jan 13, 2021

Social Links Block: Add icon and background color options #25372

Social Links Block: Add icon and background color options #25372

Conversation

aaronrobertshaw commented Sep 16, 2020 • edited Loading

Description

How has this been tested?

Testing Instructions

Screenshots

Types of changes

Next Steps

Checklist:

aaronrobertshaw commented Sep 21, 2020

apeatling commented Sep 21, 2020

aaronrobertshaw commented Sep 22, 2020

apeatling Sep 23, 2020

Choose a reason for hiding this comment

glendaviesnz commented Sep 23, 2020 • edited Loading

aaronrobertshaw commented Sep 24, 2020

glendaviesnz commented Sep 24, 2020

glendaviesnz commented Sep 24, 2020

apeatling commented Sep 24, 2020

youknowriad commented Sep 25, 2020

aaronrobertshaw commented Sep 25, 2020

youknowriad commented Sep 25, 2020 • edited Loading

aaronrobertshaw commented Sep 25, 2020

youknowriad commented Sep 25, 2020

oandregal commented Sep 25, 2020

aaronrobertshaw commented Oct 1, 2020

youknowriad commented Oct 1, 2020

mtias commented Oct 1, 2020 • edited Loading

aaronrobertshaw commented Oct 6, 2020

apeatling commented Oct 6, 2020

aaronrobertshaw commented Jan 11, 2021

aaronrobertshaw commented Jan 13, 2021

aaronrobertshaw commented Sep 16, 2020 •

edited

Loading

glendaviesnz commented Sep 23, 2020 •

edited

Loading

youknowriad commented Sep 25, 2020 •

edited

Loading

mtias commented Oct 1, 2020 •

edited

Loading