diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index 9b612dec8ca8f9..765d69fe230406 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -14,7 +14,7 @@ $z-layers: ( '.editor-inserter__tabs': 1, '.editor-inserter__tab.is-active': 1, '.components-panel__header': 1, - '.blocks-format-toolbar__link-modal': 1, + '.editor-format-toolbar__link-modal': 1, '.editor-block-switcher__menu': 2, '.editor-block-mover': 10, '.blocks-gallery-image__inline-menu': 10, @@ -37,7 +37,7 @@ $z-layers: ( // #adminmenuwrap { z-index: 9990 } '.components-popover': 1000000, '.components-autocomplete__results': 1000000, - '.blocks-url-input__suggestions': 9999, + '.editor-url-input__suggestions': 9999, ); @function z-index( $key ) { diff --git a/editor/block-autocomplete/index.js b/editor/block-autocomplete/index.js index f1e12bbcb047d5..363b2f2f754fba 100644 --- a/editor/block-autocomplete/index.js +++ b/editor/block-autocomplete/index.js @@ -45,7 +45,7 @@ class BlockAutocomplete extends Component { triggerPrefix="/" options={ options } onSelect={ this.onSelect } - className="blocks-block-autocomplete" + className="editor-block-autocomplete" > { children } diff --git a/editor/block-autocomplete/style.scss b/editor/block-autocomplete/style.scss index f7af4ee06a5c9e..908007ddb1b6f9 100644 --- a/editor/block-autocomplete/style.scss +++ b/editor/block-autocomplete/style.scss @@ -1,3 +1,3 @@ -.blocks-block-autocomplete .dashicon { +.editor-block-autocomplete .dashicon { margin-right: 8px; } diff --git a/editor/color-palette/index.js b/editor/color-palette/index.js index 67db4f57f6c000..8ad2734636d235 100644 --- a/editor/color-palette/index.js +++ b/editor/color-palette/index.js @@ -38,14 +38,14 @@ class ColorPalette extends Component { render() { const { colors, value, onChange } = this.props; return ( -
+
{ colors.map( ( color ) => { const style = { color: color }; - const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } ); + const className = classnames( 'editor-color-palette__item', { 'is-active': value === color } ); /* Disable reason: aria-current seems like a valid aria-prop and well-suited for this */ /* eslint-disable jsx-a11y/aria-props */ return ( -
+
-
-
diff --git a/editor/color-palette/style.scss b/editor/color-palette/style.scss index aff8f890147ad9..dcd968a9b812e5 100644 --- a/editor/color-palette/style.scss +++ b/editor/color-palette/style.scss @@ -1,11 +1,11 @@ $color-palette-circle-size: 28px; $color-palette-circle-spacing: 14px; -.blocks-color-palette { +.editor-color-palette { margin-right: -14px; } -.blocks-color-palette__item-wrapper { +.editor-color-palette__item-wrapper { display: inline-block; height: $color-palette-circle-size; width: $color-palette-circle-size; @@ -18,7 +18,7 @@ $color-palette-circle-spacing: 14px; } } -.blocks-color-palette__item { +.editor-color-palette__item { display: inline-block; height: 100%; width: 100%; @@ -48,13 +48,13 @@ $color-palette-circle-spacing: 14px; } } -.blocks-color-palette__clear-color .blocks-color-palette__item { +.editor-color-palette__clear-color .editor-color-palette__item { color: $white; background: $white; overflow: hidden; } -.blocks-color-palette__clear-color-line { +.editor-color-palette__clear-color-line { cursor: pointer; position: absolute; border: 2px solid $alert-red; @@ -78,13 +78,13 @@ $color-palette-circle-spacing: 14px; } } -.blocks-color-palette__custom-color .blocks-color-palette__item { +.editor-color-palette__custom-color .editor-color-palette__item { position: relative; box-shadow: none; overflow: hidden; } -.blocks-color-palette__custom-color .blocks-color-palette__item:before { +.editor-color-palette__custom-color .editor-color-palette__item:before { box-sizing: border-box; content: ''; filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 ); @@ -112,6 +112,6 @@ $color-palette-circle-spacing: 14px; background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box; } -.blocks-color-palette__picker .chrome-picker { +.editor-color-palette__picker .chrome-picker { width: 100% !important; } diff --git a/editor/editable/format-toolbar/index.js b/editor/editable/format-toolbar/index.js index 85f1e5e97fbaf3..3aad20dcc9cb86 100644 --- a/editor/editable/format-toolbar/index.js +++ b/editor/editable/format-toolbar/index.js @@ -147,7 +147,7 @@ class FormatToolbar extends Component { } ) ); const linkSettings = settingsVisible && ( -
+
+
{ ( isAddingLink || isEditingLink ) &&
@@ -182,9 +182,9 @@ class FormatToolbar extends Component { } { !! formats.link && ! isAddingLink && ! isEditingLink && -
+
diff --git a/editor/editable/format-toolbar/style.scss b/editor/editable/format-toolbar/style.scss index e6a80a1f27594b..e320114d64be18 100644 --- a/editor/editable/format-toolbar/style.scss +++ b/editor/editable/format-toolbar/style.scss @@ -1,8 +1,8 @@ -.blocks-format-toolbar { +.editor-format-toolbar { display: inline-flex; } -.blocks-format-toolbar__link-modal { +.editor-format-toolbar__link-modal { position: absolute; box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 ); border: 1px solid #e0e5e9; @@ -14,14 +14,14 @@ font-family: $default-font; font-size: $default-font-size; line-height: $default-line-height; - z-index: z-index( '.blocks-format-toolbar__link-modal' ); + z-index: z-index( '.editor-format-toolbar__link-modal' ); - .blocks-url-input { + .editor-url-input { width: auto; } } -.blocks-format-toolbar__link-value { +.editor-format-toolbar__link-value { padding: 10px; flex-grow: 1; overflow: hidden; @@ -32,12 +32,12 @@ } } -.blocks-format-toolbar__link-settings { +.editor-format-toolbar__link-settings { border-top: 1px solid $light-gray-500; width: 100%; padding: 10px 8px; - .blocks-base-control { + .editor-base-control { margin: 0; } } diff --git a/editor/editable/index.js b/editor/editable/index.js index c416e6f0def98e..6b6d5568eb8368 100644 --- a/editor/editable/index.js +++ b/editor/editable/index.js @@ -266,7 +266,7 @@ export default class Editable extends Component { // Find the parent "relative" positioned container const container = this.props.inlineToolbar - ? this.editor.getBody().closest( '.blocks-editable' ) + ? this.editor.getBody().closest( '.editor-editable' ) : this.editor.getBody().closest( '.editor-visual-editor__block' ); const containerPosition = container.getBoundingClientRect(); const blockPadding = 14; @@ -601,7 +601,7 @@ export default class Editable extends Component { // mount and initialize a new child element in its place. const key = [ 'editor', Tagname ].join(); const isPlaceholderVisible = placeholder && ( ! focus || keepPlaceholderOnFocus ) && this.state.empty; - const classes = classnames( wrapperClassname, 'blocks-editable' ); + const classes = classnames( wrapperClassname, 'editor-editable' ); const formatToolbar = ( { isPlaceholderVisible && { MultilineTag ? { placeholder } : placeholder } diff --git a/editor/editable/style.scss b/editor/editable/style.scss index 7fa2bf97d44738..eb7b1fa4f317ba 100644 --- a/editor/editable/style.scss +++ b/editor/editable/style.scss @@ -1,8 +1,8 @@ -.blocks-editable { +.editor-editable { position: relative; } -.blocks-editable__tinymce { +.editor-editable__tinymce { margin: 0; position: relative; @@ -58,13 +58,13 @@ } } - & + .blocks-editable__tinymce { + & + .editor-editable__tinymce { opacity: 0.5; pointer-events: none; } } -.has-drop-cap .blocks-editable__tinymce:not( :focus ) { +.has-drop-cap .editor-editable__tinymce:not( :focus ) { &:first-letter { float: left; font-size: 4.1em; diff --git a/editor/editable/tinymce.js b/editor/editable/tinymce.js index 415a388c27a4ec..e83ff37b901c39 100644 --- a/editor/editable/tinymce.js +++ b/editor/editable/tinymce.js @@ -37,7 +37,7 @@ export default class TinyMCE extends Component { } if ( ! isEqual( this.props.className, nextProps.className ) ) { - this.editorNode.className = classnames( nextProps.className, 'blocks-editable__tinymce' ); + this.editorNode.className = classnames( nextProps.className, 'editor-editable__tinymce' ); } } @@ -97,7 +97,7 @@ export default class TinyMCE extends Component { ref: ( node ) => this.editorNode = node, contentEditable: true, suppressContentEditableWarning: true, - className: classnames( className, 'blocks-editable__tinymce' ), + className: classnames( className, 'editor-editable__tinymce' ), style, 'aria-label': label, }, children ); diff --git a/editor/inspector-controls/base-control/index.js b/editor/inspector-controls/base-control/index.js index 2e21c38f494546..c89cc56e5c2680 100644 --- a/editor/inspector-controls/base-control/index.js +++ b/editor/inspector-controls/base-control/index.js @@ -10,10 +10,10 @@ import './style.scss'; function BaseControl( { id, label, help, className, children } ) { return ( -
- { label && } +
+ { label && } { children } - { !! help &&

{ help }

} + { !! help &&

{ help }

}
); } diff --git a/editor/inspector-controls/base-control/style.scss b/editor/inspector-controls/base-control/style.scss index cf7f4c77014fc2..5936811b6cb58c 100644 --- a/editor/inspector-controls/base-control/style.scss +++ b/editor/inspector-controls/base-control/style.scss @@ -1,12 +1,12 @@ -.blocks-base-control { +.editor-base-control { margin: 0 0 1.5em 0; } -.blocks-base-control__label { +.editor-base-control__label { display: block; margin-bottom: 5px; } -.blocks-base-control__help { +.editor-base-control__help { font-style: italic; } diff --git a/editor/inspector-controls/checkbox-control/index.js b/editor/inspector-controls/checkbox-control/index.js index b05b44f709ee3d..b65d9e0d6e3d8b 100644 --- a/editor/inspector-controls/checkbox-control/index.js +++ b/editor/inspector-controls/checkbox-control/index.js @@ -17,7 +17,7 @@ function CheckboxControl( { label, heading, checked, help, instanceId, onChange, - diff --git a/editor/inspector-controls/checkbox-control/style.scss b/editor/inspector-controls/checkbox-control/style.scss index 90f1f24fe4ca7e..298a8d1ee36318 100644 --- a/editor/inspector-controls/checkbox-control/style.scss +++ b/editor/inspector-controls/checkbox-control/style.scss @@ -1,4 +1,4 @@ -.blocks-checkbox-control__input[type=checkbox] { +.editor-checkbox-control__input[type=checkbox] { margin-top: 0; margin-right: 6px; } \ No newline at end of file diff --git a/editor/inspector-controls/radio-control/index.js b/editor/inspector-controls/radio-control/index.js index 4be3b532a3062e..d47d115d76f6ca 100644 --- a/editor/inspector-controls/radio-control/index.js +++ b/editor/inspector-controls/radio-control/index.js @@ -19,15 +19,15 @@ function RadioControl( { label, selected, help, instanceId, onChange, options = const onChangeValue = ( event ) => onChange( event.target.value ); return ! isEmpty( options ) && ( - + { options.map( ( option, index ) =>
onChange( Number( event.target.value ) ); return ( - + { beforeIcon && } { afterIcon && }