Skip to content

Social Link: Add a class to the anchor element#28494

Merged
mkaz merged 2 commits intomasterfrom
add/social-link-class
Jan 28, 2021
Merged

Social Link: Add a class to the anchor element#28494
mkaz merged 2 commits intomasterfrom
add/social-link-class

Conversation

@scruffian
Copy link
Contributor

Description

Adds a class to the anchor elements inside Social Links. This will make it easier to target/exclude these elements when styling themes. Some themes target all a elements, and we add exceptions for specific blocks. This is easier to do when the anchor itself has a class.

How has this been tested?

Tested with Spearhead theme running latest Gutenberg.

Types of changes

New feature (non-breaking change which adds functionality)

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.

@scruffian scruffian added the [Block] Social Affects the Social Block - used to display Social Media accounts label Jan 26, 2021
@scruffian scruffian requested a review from mkaz as a code owner January 26, 2021 15:43
@scruffian scruffian self-assigned this Jan 26, 2021
@github-actions
Copy link

github-actions bot commented Jan 26, 2021

Size Change: -397 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/a11y/index.js 1.14 kB +1 B (0%)
build/annotations/index.js 3.77 kB -1 B (0%)
build/api-fetch/index.js 3.4 kB -1 B (0%)
build/block-directory/index.js 9.07 kB -8 B (0%)
build/block-editor/index.js 123 kB +392 B (0%)
build/block-editor/style-rtl.css 12 kB +33 B (0%)
build/block-editor/style.css 12 kB +33 B (0%)
build/block-library/blocks/navigation/style-rtl.css 183 B +12 B (+7%) 🔍
build/block-library/blocks/navigation/style.css 183 B +12 B (+7%) 🔍
build/block-library/index.js 144 kB +232 B (0%)
build/block-library/style-rtl.css 8.62 kB +6 B (0%)
build/block-library/style.css 8.61 kB +6 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +1 B (0%)
build/blocks/index.js 48.3 kB +46 B (0%)
build/components/index.js 275 kB +756 B (0%)
build/compose/index.js 11.2 kB +13 B (0%)
build/core-data/index.js 16.8 kB +1.6 kB (+11%) ⚠️
build/data/index.js 8.8 kB -166 B (-2%)
build/date/index.js 31.8 kB -1 B (0%)
build/deprecated/index.js 768 B -1 B (0%)
build/edit-navigation/index.js 11.1 kB +5 B (0%)
build/edit-post/index.js 306 kB +32 B (0%)
build/edit-post/style-rtl.css 6.53 kB +19 B (0%)
build/edit-post/style.css 6.52 kB +19 B (0%)
build/edit-site/index.js 24.1 kB +40 B (0%)
build/edit-site/style-rtl.css 4.04 kB +22 B (+1%)
build/edit-site/style.css 4.04 kB +22 B (+1%)
build/edit-widgets/index.js 20 kB -3.58 kB (-15%) 👏
build/edit-widgets/style-rtl.css 3.2 kB +28 B (+1%)
build/edit-widgets/style.css 3.2 kB +24 B (+1%)
build/editor/editor-styles-rtl.css 543 B -115 B (-17%) 👏
build/editor/editor-styles.css 545 B -115 B (-17%) 👏
build/editor/index.js 41.8 kB +14 B (0%)
build/format-library/index.js 6.76 kB -3 B (0%)
build/i18n/index.js 3.74 kB +176 B (+5%) 🔍
build/keyboard-shortcuts/index.js 2.54 kB +5 B (0%)
build/list-reusable-blocks/index.js 3.15 kB +10 B (0%)
build/media-utils/index.js 5.33 kB +16 B (0%)
build/notices/index.js 1.85 kB +1 B (0%)
build/plugins/index.js 2.54 kB +7 B (0%)
build/primitives/index.js 1.42 kB -1 B (0%)
build/priority-queue/index.js 790 B +1 B (0%)
build/redux-routine/index.js 2.84 kB -2 B (0%)
build/rich-text/index.js 13.4 kB +2 B (0%)
build/server-side-render/index.js 2.77 kB +11 B (0%)
build/url/index.js 3.02 kB -1 B (0%)
build/wordcount/index.js 1.22 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 103 B 0 B
build/block-library/blocks/audio/style.css 103 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 453 B 0 B
build/block-library/blocks/button/style.css 451 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 227 B 0 B
build/block-library/blocks/buttons/editor.css 227 B 0 B
build/block-library/blocks/buttons/style-rtl.css 297 B 0 B
build/block-library/blocks/buttons/style.css 297 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 421 B 0 B
build/block-library/blocks/columns/style.css 421 B 0 B
build/block-library/blocks/cover/editor-rtl.css 392 B 0 B
build/block-library/blocks/cover/editor.css 393 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.25 kB 0 B
build/block-library/blocks/cover/style.css 1.25 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 375 B 0 B
build/block-library/blocks/embed/style.css 375 B 0 B
build/block-library/blocks/file/editor-rtl.css 199 B 0 B
build/block-library/blocks/file/editor.css 198 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 679 B 0 B
build/block-library/blocks/gallery/editor.css 679 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/gallery/style.css 1.06 kB 0 B
build/block-library/blocks/group/editor-rtl.css 318 B 0 B
build/block-library/blocks/group/editor.css 317 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 477 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 159 B 0 B
build/block-library/blocks/latest-comments/editor.css 158 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 269 B 0 B
build/block-library/blocks/latest-comments/style.css 269 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/list/editor-rtl.css 65 B 0 B
build/block-library/blocks/list/editor.css 65 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 392 B 0 B
build/block-library/blocks/navigation-link/editor.css 394 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 704 B 0 B
build/block-library/blocks/navigation-link/style.css 702 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.38 kB 0 B
build/block-library/blocks/navigation/editor.css 1.37 kB 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 109 B 0 B
build/block-library/blocks/paragraph/editor.css 109 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 273 B 0 B
build/block-library/blocks/paragraph/style.css 273 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 249 B 0 B
build/block-library/blocks/post-comments-form/style.css 249 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 63 B 0 B
build/block-library/blocks/preformatted/style.css 63 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 316 B 0 B
build/block-library/blocks/pullquote/style.css 316 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 90 B 0 B
build/block-library/blocks/query-loop/editor.css 89 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query/editor-rtl.css 159 B 0 B
build/block-library/blocks/query/editor.css 160 B 0 B
build/block-library/blocks/quote/editor-rtl.css 61 B 0 B
build/block-library/blocks/quote/editor.css 61 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 165 B 0 B
build/block-library/blocks/search/editor.css 165 B 0 B
build/block-library/blocks/search/style-rtl.css 342 B 0 B
build/block-library/blocks/search/style.css 344 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 236 B 0 B
build/block-library/blocks/separator/style.css 236 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 504 B 0 B
build/block-library/blocks/shortcode/editor.css 504 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 201 B 0 B
build/block-library/blocks/site-logo/editor.css 201 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 117 B 0 B
build/block-library/blocks/site-logo/style.css 117 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 711 B 0 B
build/block-library/blocks/social-links/editor.css 712 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB 0 B
build/block-library/blocks/social-links/style.css 1.37 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 302 B 0 B
build/block-library/blocks/spacer/editor.css 302 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 99 B 0 B
build/block-library/blocks/subhead/editor.css 99 B 0 B
build/block-library/blocks/subhead/style-rtl.css 80 B 0 B
build/block-library/blocks/subhead/style.css 80 B 0 B
build/block-library/blocks/table/editor-rtl.css 489 B 0 B
build/block-library/blocks/table/editor.css 489 B 0 B
build/block-library/blocks/table/style-rtl.css 386 B 0 B
build/block-library/blocks/table/style.css 386 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 680 B 0 B
build/block-library/blocks/template-part/editor.css 679 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 62 B 0 B
build/block-library/blocks/verse/editor.css 62 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 193 B 0 B
build/block-library/blocks/video/style.css 193 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/editor-rtl.css 9.06 kB 0 B
build/block-library/editor.css 9.05 kB 0 B
build/block-library/theme-rtl.css 748 B 0 B
build/block-library/theme.css 748 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/data-controls/index.js 830 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.93 kB 0 B
build/edit-navigation/style-rtl.css 938 B 0 B
build/edit-navigation/style.css 944 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 2.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/keycodes/index.js 1.93 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/nux/index.js 3.41 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/reusable-blocks/index.js 2.92 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@mkaz
Copy link
Member

mkaz commented Jan 26, 2021

Could you just get at the element using the selector .wp-social-link li a ?
Does that tie it too tightly to the implementation markup or poor specificity?

I'm not opposed, just asking for clarification and more so we can think about it for other blocks and pieces we develop, so for example other nav links and markup we are creating, should we include classes at each element or not?

@scruffian
Copy link
Contributor Author

scruffian commented Jan 26, 2021

In Spearhead we have a rule like this:

        color: var( --global--color-primary-hover );
}

This targets social links, and because of its specificity it is stronger than .wp-social-link .wp-social-link a. We can add an exception to the li which would look like this: Automattic/themes#3107

But this feels unnecessarily complex, which is why I am proposing this change instead.

@jasmussen
Copy link
Contributor

Thanks for the PR. I'm not personally opposed to this, and the use case seems fine. I would defer to @nosolosw, though — is it correct to do something like color: var( --global--color-primary-hover ); for all link hovers, or is this something global styles should handle? I assume it's fine.

And in case it's fine, the only change I'd make is to the classname. We had a bit of a false start with social links, calling the individual social link blocks wp-social-link, when we should've called them wp-block-social-link. So now we have both for compatibility:

<li class="wp-social-link wp-social-link-fivehundredpx wp-block-social-link"> ... </li>

But the wp-block prefix is still the correct one, so if we add another class it should include that, such as wp-block-social-link-anchor.

@oandregal
Copy link
Member

Thanks for the PR. I'm not personally opposed to this, and the use case seems fine. I would defer to @nosolosw, though — is it correct to do something like color: var( --global--color-primary-hover ); for all link hovers, or is this something global styles should handle? I assume it's fine.

Right. Social icons are an interesting use case for link colors, I'd say that's something we'd like to do at some point. The link color is still experimental so we'd have to wrangle support for various kind of themes and wouldn't add it to this block just yet.

If this works for you, I don't see anything that prevents us to add support for link color later on.

@scruffian
Copy link
Contributor Author

I've updated the class name. This shouldn't have any impact on behaviour, but it should make things easier for us in the future...

Copy link
Member

@mkaz mkaz left a comment

Choose a reason for hiding this comment

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

Implementation is straight forward and looks like we have agreement.
👍

@mkaz mkaz merged commit a7c7433 into master Jan 28, 2021
@mkaz mkaz deleted the add/social-link-class branch January 28, 2021 14:02
@github-actions github-actions bot added this to the Gutenberg 9.9 milestone Jan 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Social Affects the Social Block - used to display Social Media accounts

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants