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.

Sign up for GitHub

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

RichText: improve format boundary style #14519

Merged
merged 2 commits into from
Mar 21, 2019
Merged

RichText: improve format boundary style #14519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20c54fa
RichText: improve format boundary style
ellatrix Mar 19, 2019
3c71f06
rgb => rgba
ellatrix Mar 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,13 @@ const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [
'insertLink',
] );

/**
* Global stylesheet.
*/
const globalStyle = document.createElement( 'style' );

document.head.appendChild( globalStyle );

export class RichText extends Component {
constructor( { value, onReplace, multiline } ) {
super( ...arguments );
Expand Down Expand Up @@ -472,10 +479,11 @@ export class RichText extends Component {
}

let selectedFormat;
const formatsAfter = formats[ start ] || [];
const collapsed = isCollapsed( value );

if ( isCollapsed( value ) ) {
if ( collapsed ) {
const formatsBefore = formats[ start - 1 ] || [];
const formatsAfter = formats[ start ] || [];

selectedFormat = Math.min( formatsBefore.length, formatsAfter.length );
}
Expand All @@ -484,6 +492,25 @@ export class RichText extends Component {
this.applyRecord( { ...value, selectedFormat }, { domOnly: true } );

delete this.formatPlaceholder;

if ( collapsed ? selectedFormat > 0 : formatsAfter.length > 0 ) {
this.recalculateBoundaryStyle();
}
}
}

recalculateBoundaryStyle() {
const boundarySelector = '*[data-rich-text-format-boundary]';
const element = this.editableRef.querySelector( boundarySelector );

if ( element ) {
const computedStyle = getComputedStyle( element );
const newColor = computedStyle.color
.replace( ')', ', 0.2)' )
.replace( 'rgb', 'rgba' );

globalStyle.innerHTML =
`${ boundarySelector }{background-color: ${ newColor }}`;
}
}

Expand Down Expand Up @@ -793,6 +820,9 @@ export class RichText extends Component {
}
}

// Wait for boundary class to be added.
setTimeout( () => this.recalculateBoundaryStyle() );
Copy link
Member

@aduth aduth Mar 26, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

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.


if ( newSelectedFormat !== selectedFormat ) {
this.applyRecord( { ...value, selectedFormat: newSelectedFormat } );
this.setState( { selectedFormat: newSelectedFormat } );
Expand Down
21 changes: 0 additions & 21 deletions packages/block-editor/src/components/rich-text/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,27 +45,6 @@

*[data-rich-text-format-boundary] {
border-radius: 2px;
box-shadow: 0 0 0 1px $light-gray-400;
background: $light-gray-400;

// Enforce a dark text color so active inline boundaries
// are always readable.
// See https://github.com/WordPress/gutenberg/issues/9508
color: $dark-gray-900;
}

// Link inline boundaries get special colors.
a[data-rich-text-format-boundary] {
box-shadow: 0 0 0 1px $blue-medium-100;
background: $blue-medium-100;
color: $blue-medium-900;
}

// <code> inline boundaries need special treatment because their
// un-selected style is already padded.
code[data-rich-text-format-boundary] {
background: $light-gray-400;
box-shadow: 0 0 0 1px $light-gray-400;
}
}

Expand Down
5 changes: 0 additions & 5 deletions packages/block-library/src/cover/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
.wp-block-cover-image,
.wp-block-cover {
.block-editor-rich-text__editable:focus a[data-rich-text-format-boundary] {
box-shadow: none;
background: rgba(255, 255, 255, 0.3);
}

&.components-placeholder h2 {
color: inherit;
}
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,6 @@ ul.wp-block-gallery li {
a {
color: $white;
}

&:focus a[data-rich-text-format-boundary] {
color: rgba(0, 0, 0, 0.2);
}
}
}

Expand Down