Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Preset colors don't work on button block style outline #26707

Conversation

jorgefilipecosta
Copy link
Member

Fixes: #24625

How has this been tested?

I added a buttons block.
I set the style of the button to outline.
I added a preset background color and a preset text color.
I published the post and verified on the frontend of the website the colors appear as expected. (on master they don't appear).

@jorgefilipecosta jorgefilipecosta added [Type] Bug An existing feature does not function as intended [Block] Buttons Affects the Buttons Block labels Nov 4, 2020
@github-actions
Copy link

github-actions bot commented Nov 4, 2020

Size Change: +13 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-library/style-rtl.css 7.98 kB +6 B (0%)
build/block-library/style.css 7.98 kB +7 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 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 133 kB 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 9.01 kB 0 B
build/block-library/editor.css 9.01 kB 0 B
build/block-library/index.js 146 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.81 kB 0 B
build/core-data/index.js 12.5 kB 0 B
build/data-controls/index.js 772 B 0 B
build/data/index.js 8.77 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.41 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-site/index.js 22.5 kB 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.12 kB 0 B
build/edit-widgets/style.css 3.12 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.71 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 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 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.34 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.42 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.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.2 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@tellthemachines
Copy link
Contributor

Hey @jorgefilipecosta, just wondering if you could have linked to the wrong issue? #24625 seems to refer exclusively to text colour, and I am unable to reproduce it on either 5.5.3 or the latest master.

I can see the background color not working on Twenty Twenty One, but that seems to be due to theme-specific styles as it's working fine on Twenty Twenty and Twenty Nineteen.

@jorgefilipecosta
Copy link
Member Author

Hi @tellthemachines,

This PR addresses text color referred in #24625 and also the background color not referred there.

It is a fact that on some themes this works correctly but that happens because "Twenty Twenty" and "Twenty Nineteen" used styles with higher specificity for colors.
Things like ".entry .entry-content .has-primary-background-color" in the case of "Twenty Nineteen" and ":root .has-primary-background-color" in the case "Twenty Nineteen". Basically, both themes implemented a workaround to the issue.
The selectors that we expect and document are just ".has-primary-background-color" and had the themes used these selectors things would not work. For example, we can test this bug with the "Twenty Fourteen" theme.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

Oooh, I see, that makes sense! Approving ✅

Testing this branch, background color still doesn't show in Twenty Twenty One, but it seems to be caused by the theme styles. Might be worth opening an issue there?

@tellthemachines tellthemachines added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 6, 2020
@webmandesign
Copy link
Contributor

Hi,

Please do not use a specific text color. Instead of color: #32373c; I suggest using color: inherit;

Also, I don't think it is needed to address the .has-background in this case as this is outlined button without an actual background. Or am I missing something?

I'd say #24626 should be sufficient enough for this case.

Regards,

Oliver

@jorgefilipecosta jorgefilipecosta force-pushed the fix/preset-colors-dont-work-on-button-block-outline-styles branch from 3a7ab12 to fc7d557 Compare November 6, 2020 12:12
@jorgefilipecosta jorgefilipecosta merged commit e2797b4 into master Nov 6, 2020
@jorgefilipecosta jorgefilipecosta deleted the fix/preset-colors-dont-work-on-button-block-outline-styles branch November 6, 2020 12:26
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 6, 2020
@jorgefilipecosta
Copy link
Member Author

Hi @webmandesign,

On #24626 (comment) I wrote a comment detailing the path we are following for now.

Thank you for raising and fixing the text color issue 👍

tellthemachines added a commit that referenced this pull request Nov 12, 2020
* Cover block: Restore default overlay background (#26569)

* Restore default Cover overlay background

The default Cover block overlay background was removed. This changed the
style of existing blocks on existing sites.

Restore the default background in such a way that it does not conflict
with theme-provided background-color styles and there is no need to
artificially add extra specificity.

Fix regression: #26545

* Limit the interface skeleton to a max width of 100% to prevent some blocks managing to exceed the width (#26552)

* Cover Block: Restore opacity controls (#26625)

* Fix image block centering when resizing to a smaller size (#26376)

* Fix image block centering when resizing to a smaller size

* Revert previous 100% width fix

* Remove display: table when image block is resized to avoid centering of block

* Match frontend classes for alignment in editor

* Gallery: Remove caption fallback for alt attribute (#26676)

* Fix quote block default alignment (#26680)

* Gallery: Remove obsolete deprecation entry (#26736)

* Do not apply text color if it is being overriden (#24626)

* Fix: Preset colors don't work on button block style outline (#26707)

* Tests: Add fixture for Column deprecation (#26774)

* Fix/column width units (#26757)

* Fix issues with different units in column widths

* Columns with fixed width should keep width on recalculation

* Address review feedback

* fix undefined index notice in Social Link Block (#25663)

* fix undefined index notice

* use isset instead of array_key_exists check

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

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

* Adds in missing styling for toolbar when using text-only setting (#26769)

* Adds in missing styling for toolbar when using text-only setting

* Increases margin

* Moves style to correct file

* Inserter: Fix 'Browse All' in Quick Inserter (#26443)

* Inserter: Fix 'Browse All' in Quick Inserter

Maintain the insertion point in @wordpress/block-editor state when
moving from the Quick Inserter to the Inserter.

This fixes a bug where the insertion point is wrong after clicking a
block appender and selecting 'Browse All'.

Care is taken to not regress a previous bug where the insertion point is
wrong after clicking an inline insertion button and selecting 'Browse
ALl'.

* Inserter: Fix typo

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Call getBlockInsertionPoint once

* Add useSelect dependencies

* Make setInsertionPoint unstable

* Avoid setting `isVisible` state when `SET_INSERTION_POINT` is triggered

* Make index required and clarify rootClientId usage

* Split insertionPoint into two reducers

* Fix getInsertionPoint selector that expects default state of reducer to be null

* Avoid resetting insertionPoint state on HIDE_INSERTION_POINT

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>
Co-authored-by: Jacopo Tomasone <Copons@users.noreply.github.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Bernie Reiter <ockham@raz.or.at>
Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
Co-authored-by: Oliver Juhas <webmandesign@users.noreply.github.com>
Co-authored-by: Jorge Costa <jorge.costa@automattic.com>
Co-authored-by: Fabian Kägy <mail@fabian-kaegy.de>
Co-authored-by: Tammie Lister <tammie@automattic.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Outlined button block does not apply custom text color
3 participants