RichText: improve format boundary style #14519
Conversation
ellatrix
added
the
[Feature] Rich Text
ellatrix
force-pushed
the
try/format-boundary-style
branch
from
6176a73 to
9a3fe65
Compare
ellatrix
force-pushed
the
try/format-boundary-style
branch
from
9a3fe65 to
20c54fa
Compare
|
Love it. You're the greatest. I've a bit on my plate today, so I can't do a thorough test. But based on the screenshots, this change is 100% good to go visually. |
|
This is looking great, @ellatrix! I tested it out with a bunch of different color/image backgrounds, and it works well. The only issue I'm seeing is that it's outputting the color as Firefox and Chrome are fine with this, but Safari drops this rule entirely:
If we can get that to spit out a |
|
@kjellr Nice catch! Fixed now. |
| @@ -793,6 +820,9 @@ export class RichText extends Component { | |||
| } | |||
| } | |||
|
|
|||
| // Wait for boundary class to be added. | |||
| setTimeout( () => this.recalculateBoundaryStyle() ); | |||
There was a problem hiding this comment.
This is not a safe timeout, despite the component being wrapped with withSafeTimeout. I suspect it may be the reason behind some failings I'm seeing in master E2E tests:
https://travis-ci.com/WordPress/gutenberg/jobs/187954533
FAIL packages/e2e-tests/specs/blocks/quote.test.js (41.221s)
● Quote › can be merged into from a paragraph
TypeError: Cannot read property 'querySelector' of undefined
at t.value (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=1553629058:55:141215)
at ../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=1553629058:55:144735
at Suite.it (specs/blocks/quote.test.js:180:2)
Where one of the few occurrences of querySelector in block-editor is within recalculateBoundaryStyle (referencing the component's ref, which would be unset after unmount). It seems reasonable that it could cause an error, if the component were to become unmounted after the setTimeout is scheduled.
It seems like the most direct fix may simply be to call this.props.setTimeout instead.
ellatrix
added
[Type] Bug
* RichText: improve format boundary style * rgb => rgba
* RichText: improve format boundary style (#14519) * RichText: improve format boundary style * rgb => rgba * Paste: check plain text for gutenberg content (#14536) * Make ClipboardButton inside a block work correctly in Safari (#7106) * Make ClipboardButton inside a block work in Safari * Update changelogs * Block Editor: Update "Next" to "Unreleased" per guidelines https://github.com/WordPress/gutenberg/blob/master/packages/README.md#maintaining-changelogs * Input Interaction: always expand single line selection vertically (#14487) * Input Interaction: always expand single line selection vertically * Add e2e test * Use MenuItem instead of IconButton (#14569) * Remove id, infoid, label and aria-describedby from MenuItem (#14423) * Preformatted: save line breaks as characters (#14653) * Preformatted: save line breaks as characters * Update e2e test * Remove negative toolbar position rules from full-aligned blocks. (#14669) * Fix issue with double scrollbar in Fullscreen Mode (#14677) This PR fixes an issue where the sidebar would have two scrollbars when in fullscreen mode. * Fix WordPress embed block resolution (#14658) * Retry failing embeds with trailing slash (#14705) * Fix embedding Twitter URLs with a trailing slash (Closes #12664) * Fix race condition for WordPress URLs that end in slashes, add test * API Fetch: Fix error on empty OPTIONS preload data (#14714) * Input Interaction: better horizontal edge detection (#14462) * Input Interaction: better horizontal edge detection * Correct BR ranges * Add e2e test * Increase buffer for Firefox * Clean up * Merge isEdge logic * Fix typo * Address feedback * Build docs * Fix memize option key typo (#14750) * RichText: unify active formats, 'selectedFormat' and 'placeholderFormat' (#14411) * RichText: unify active formats, 'selectedFormat' and 'placeholderFormat' * Add extra e2e test * Only should boundary style when focused * Update docs * Try to trigger tests with Travis * Restore Travis config
Description
Fixes #14023. As discussed in #14023, the boundary style should be updated to inherit the current colour with opacity applied, so the style works in all contexts. This can be done in JS (unfortunately not CSS) but calculating the current colour and applying opacity, then setting it is a global stylesheet.
How has this been tested?
Screenshots
Types of changes
Checklist: