Skip to content

Conversation

@mkaz
Copy link
Member

@mkaz mkaz commented Oct 7, 2020

Description

The social links could pick up the text-indent from some themes global <ul> settings.
This explictly sets the social link text-indent to 0

Fixes #20893

How has this been tested?

  1. Use a theme that sets a global <ul> text-indent (or modify in inspector)
  2. Confirm that the text-indent conflicts with social links
  3. Apply PR and confirm that it no longer conflicts.

Screenshots

social-link-text-indent

Types of changes

  • Adds the text-indent: 0 to the social links class

@mkaz mkaz added the [Block] Social Affects the Social Block - used to display Social Media accounts label Oct 7, 2020
@mkaz
Copy link
Member Author

mkaz commented Oct 7, 2020

@enriquesanchez or @aleone89 Can you confirm that this fixes the issue reported in #20893 ?
It looks like there was already a margin fix put in but this will fix if text-indent is also set.

@github-actions
Copy link

github-actions bot commented Oct 7, 2020

Size Change: +15 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-library/style-rtl.css 7.66 kB +7 B (0%)
build/block-library/style.css 7.66 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.54 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/index.js 8.55 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 129 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 8.65 kB 0 B
build/block-library/editor.css 8.65 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/index.js 169 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.43 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 685 B 0 B
build/data/index.js 8.6 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.6 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.28 kB 0 B
build/edit-site/index.js 21 kB 0 B
build/edit-site/style-rtl.css 3.73 kB 0 B
build/edit-site/style.css 3.73 kB 0 B
build/edit-widgets/index.js 21.2 kB 0 B
build/edit-widgets/style-rtl.css 3.02 kB 0 B
build/edit-widgets/style.css 3.02 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@mkaz mkaz force-pushed the fix/20893-social-alignment branch from 1cba97d to 9c957bb Compare October 8, 2020 03:55
The social links could pick up the text-indent from some themes global
<ul> settings. This explictly sets the social link text-indent to 0
@mkaz mkaz force-pushed the fix/20893-social-alignment branch from 9c957bb to d718efb Compare October 9, 2020 13:49
@enriquesanchez
Copy link
Contributor

Hi @mkaz!

I can confirm that this fixes the indent conflict. That said, I was no longer able to reproduce the issue in #20893. With or without this PR, the social links looked OK on the front-end.

It looks like there was already a margin fix put in but this will fix if text-indent is also set.

Maybe that is why?

@mkaz
Copy link
Member Author

mkaz commented Oct 10, 2020

@enriquesanchez yep, the other margin fixes is already in place. The Jetpack issue reported with regards to text-indent was attached to that original issue, so I kept it open. So once approved and merged this PR will close it.

@enriquesanchez enriquesanchez requested review from enriquesanchez and nicolad and removed request for nicolad October 12, 2020 17:30
Copy link
Contributor

@enriquesanchez enriquesanchez left a comment

Choose a reason for hiding this comment

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

Thanks @mkaz! This looks good to me 👍

@mkaz mkaz merged commit b126b3f into master Oct 12, 2020
@mkaz mkaz deleted the fix/20893-social-alignment branch October 12, 2020 21:07
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 12, 2020
@ZebulanStanphill ZebulanStanphill added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Oct 13, 2020
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 CSS Styling Related to editor and front end styles, CSS-specific issues.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Social Links block alignment adds unexpected spacing

4 participants