diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 87bc9ea5575de..6b1a15b95ec7b 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -3,37 +3,37 @@ // value is designed to work with). $z-layers: ( - ".editor-block-list__block-edit::before": 0, - ".editor-block-switcher__arrow": 1, - ".editor-block-list__block {core/image aligned wide or fullwide}": 20, + ".block-editor-block-list__block-edit::before": 0, + ".block-editor-block-switcher__arrow": 1, + ".block-editor-block-list__block {core/image aligned wide or fullwide}": 20, ".block-library-classic__toolbar": 10, - ".editor-block-list__layout .reusable-block-indicator": 1, - ".editor-block-list__breadcrumb": 2, + ".block-editor-block-list__layout .reusable-block-indicator": 1, + ".block-editor-block-list__breadcrumb": 2, ".components-form-toggle__input": 1, ".components-panel__header.edit-post-sidebar__panel-tabs": -1, ".edit-post-sidebar .components-panel": -2, - ".editor-inserter__tabs": 1, - ".editor-inserter__tab.is-active": 1, + ".block-editor-inserter__tabs": 1, + ".block-editor-inserter__tab.is-active": 1, ".components-panel__header": 1, ".components-modal__header": 10, ".edit-post-meta-boxes-area.is-loading::before": 1, ".edit-post-meta-boxes-area .spinner": 5, - ".editor-block-contextual-toolbar": 21, + ".block-editor-block-contextual-toolbar": 21, ".components-popover__close": 5, - ".editor-block-list__insertion-point": 6, - ".editor-inserter-with-shortcuts": 5, - ".editor-warning": 5, + ".block-editor-block-list__insertion-point": 6, + ".block-editor-inserter-with-shortcuts": 5, + ".block-editor-warning": 5, ".block-library-gallery-item__inline-menu": 20, - ".editor-url-input__suggestions": 30, + ".block-editor-url-input__suggestions": 30, ".edit-post-header": 30, - ".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter + ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block ".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background. ".wp-block-cover__video-background": 0, // Video background inside cover block. // Side UI active buttons - ".editor-block-mover__control": 1, + ".block-editor-block-mover__control": 1, // Active pill button ".components-button.is-button {:focus or .is-primary}": 1, @@ -43,7 +43,7 @@ $z-layers: ( // Should have higher index than the inset/underlay used for dragging ".components-placeholder__fieldset": 1, - ".editor-block-list__block-edit .reusable-block-edit-panel *": 1, + ".block-editor-block-list__block-edit .reusable-block-edit-panel *": 1, // Show drop zone above most standard content, but below any overlays ".components-drop-zone": 100, @@ -51,14 +51,14 @@ $z-layers: ( // The block mover, particularly in nested contexts, // should overlap most block content. - ".editor-block-list__block.is-{selected,hovered} .editor-block-mover": 80, + ".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 80, // The block mover for floats should overlap the controls of adjacent blocks. - ".editor-block-list__block {core/image aligned left or right}": 81, + ".block-editor-block-list__block {core/image aligned left or right}": 81, // Small screen inner blocks overlay must be displayed above drop zone, // settings menu, and movers. - ".editor-inner-blocks__small-screen-overlay:after": 120, + ".block-editor-inner-blocks__small-screen-overlay:after": 120, // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js index 0c8189a32baa3..274c2896d98a9 100644 --- a/packages/block-editor/src/components/block-compare/block-view.js +++ b/packages/block-editor/src/components/block-compare/block-view.js @@ -6,19 +6,19 @@ import { Button } from '@wordpress/components'; const BlockView = ( { title, rawContent, renderedContent, action, actionText, className } ) => { return (
-
-

{ title }

+
+

{ title }

-
+
{ rawContent }
-
+
{ renderedContent }
-
+
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js index 0782976519201..1b294649e9c62 100644 --- a/packages/block-editor/src/components/block-compare/index.js +++ b/packages/block-editor/src/components/block-compare/index.js @@ -23,8 +23,8 @@ class BlockCompare extends Component { return difference.map( ( item, pos ) => { const classes = classnames( { - 'editor-block-compare__added': item.added, - 'editor-block-compare__removed': item.removed, + 'editor-block-compare__added block-editor-block-compare__added': item.added, + 'editor-block-compare__removed block-editor-block-compare__removed': item.removed, } ); return { item.value }; @@ -59,10 +59,10 @@ class BlockCompare extends Component { const difference = this.getDifference( original.rawContent, converted.rawContent ); return ( -
+

title

raw
render
{ __( 'No block selected.' ) }; + return { __( 'No block selected.' ) }; } return ( -
+
-
-
{ blockType.title }
-
{ blockType.description }
+
+
{ blockType.title }
+
{ blockType.description }
{ hasBlockStyles && ( @@ -63,7 +63,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType, { ( fills ) => ! isEmpty( fills ) && ( diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index e238a08561684..2fdb6d04b44aa 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -1,4 +1,4 @@ -.editor-block-inspector__no-blocks { +.block-editor-block-inspector__no-blocks { display: block; font-size: $default-font-size; background: $white; @@ -7,14 +7,14 @@ } -.editor-block-inspector__card { +.block-editor-block-inspector__card { display: flex; align-items: flex-start; margin: -16px; padding: 16px; } -.editor-block-inspector__card-icon { +.block-editor-block-inspector__card-icon { border: $border-width solid $light-gray-700; padding: 7px; margin-right: 10px; @@ -22,20 +22,20 @@ width: 36px; } -.editor-block-inspector__card-content { +.block-editor-block-inspector__card-content { flex-grow: 1; } -.editor-block-inspector__card-title { +.block-editor-block-inspector__card-title { font-weight: 500; margin-bottom: 5px; } -.editor-block-inspector__card-description { +.block-editor-block-inspector__card-description { font-size: $default-font-size; } -.editor-block-inspector__card .editor-block-icon { +.block-editor-block-inspector__card .block-editor-block-icon { margin-left: -2px; margin-right: 10px; padding: 0 3px; diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index a31989fcc5432..9f53f7572f179 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -1,4 +1,4 @@ -.block-list-appender > .editor-inserter { +.block-list-appender > .block-editor-inserter { display: block; } diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js index 8e6726e78f118..36575d90f9ab5 100644 --- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js @@ -13,7 +13,7 @@ function BlockContextualToolbar( { focusOnMount } ) { return ( diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js index 9ec13410b367a..ce70122701828 100644 --- a/packages/block-editor/src/components/block-list/block-html.js +++ b/packages/block-editor/src/components/block-list/block-html.js @@ -56,7 +56,7 @@ export class BlockHTML extends Component { const { html } = this.state; return ( +
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 2b828a34cdd93..c5abcdc5deee3 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -431,7 +431,7 @@ export class BlockListBlock extends Component { // The wp-block className is important for editor styles. // Generate the wrapper class names handling the different states of the block. const wrapperClassName = classnames( - 'wp-block editor-block-list__block', + 'wp-block editor-block-list__block block-editor-block-list__block', { 'has-warning': ! isValid || !! error || isUnregisteredBlock, 'is-selected': shouldAppearSelected, @@ -522,7 +522,7 @@ export class BlockListBlock extends Component { { isFirstMultiSelected && ( ) } -
+
{ shouldRenderMovers && ( { showEmptyBlockSideInserter && ( -
+
-
+
+
{ rootClientId && ( - + ) } diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index cc998be715c68..5231dcb71749b 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -199,7 +199,7 @@ class BlockList extends Component { } = this.props; return ( -
+
{ map( blockClientIds, ( clientId, blockIndex ) => { const isBlockInSelection = hasMultiSelection ? multiSelectedBlockClientIds.includes( clientId ) : diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index b0c7b5b270f16..daa1a0f408f4e 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -51,9 +51,9 @@ class BlockInsertionPoint extends Component { } = this.props; return ( -
+
{ showInsertionPoint && ( -
+
) }
.editor-block-list__block-edit > * { + > .block-editor-block-list__block-edit > * { background: $light-gray-100; } - > .editor-block-list__block-edit > * > * { + > .block-editor-block-list__block-edit > * > * { visibility: hidden; } - .editor-block-mover, - .editor-block-contextual-toolbar { + .block-editor-block-mover, + .block-editor-block-contextual-toolbar { display: none; } } - > .editor-block-list__block-edit .reusable-block-edit-panel * { - z-index: z-index(".editor-block-list__block-edit .reusable-block-edit-panel *"); + > .block-editor-block-list__block-edit .reusable-block-edit-panel * { + z-index: z-index(".block-editor-block-list__block-edit .reusable-block-edit-panel *"); } } @@ -38,7 +38,7 @@ * General layout */ -.editor-block-list__layout { +.block-editor-block-list__layout { // Make room in the main content column for the side UI. // The side UI uses negative margins to position itself so as to not affect the block width. @include break-small() { @@ -47,7 +47,7 @@ } // Don't add side padding for nested blocks. - .editor-block-list__block & { + .block-editor-block-list__block & { // Compensate for side UI. padding-left: 0; padding-right: 0; @@ -59,15 +59,15 @@ // Space every block, and the default appender, using margins. // This allows margins to collapse, which gives a better representation of how it looks on the frontend. - .editor-default-block-appender > .editor-default-block-appender__content, - > .editor-block-list__block > .editor-block-list__block-edit, - > .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit { + .block-editor-default-block-appender > .block-editor-default-block-appender__content, + > .block-editor-block-list__block > .block-editor-block-list__block-edit, + > .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit { margin-top: $block-padding * 2 + $block-spacing; margin-bottom: $block-padding * 2 + $block-spacing; } } -.editor-block-list__layout .editor-block-list__block { +.block-editor-block-list__layout .block-editor-block-list__block { position: relative; padding-left: $block-padding; padding-right: $block-padding; @@ -108,11 +108,11 @@ * Block outline layout */ - .editor-block-list__block-edit { + .block-editor-block-list__block-edit { position: relative; &::before { - z-index: z-index(".editor-block-list__block-edit::before"); + z-index: z-index(".block-editor-block-list__block-edit::before"); content: ""; position: absolute; outline: $border-width solid transparent; @@ -128,7 +128,7 @@ } // Selected style. - &.is-selected > .editor-block-list__block-edit::before { + &.is-selected > .block-editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline: $border-width solid $dark-opacity-light-500; @@ -138,7 +138,7 @@ } // Hover style. - &.is-hovered > .editor-block-list__block-edit::before { + &.is-hovered > .block-editor-block-list__block-edit::before { outline: $border-width solid theme(outlines); } @@ -147,7 +147,7 @@ opacity: 0.5; transition: opacity 0.1s linear; - &:not(.is-focused) .editor-block-list__block, + &:not(.is-focused) .block-editor-block-list__block, &.is-focused { opacity: 1; } @@ -159,7 +159,7 @@ * Cross-block selection */ -.editor-block-list__layout .editor-block-list__block { +.block-editor-block-list__layout .block-editor-block-list__block { ::-moz-selection { background-color: $blue-medium-highlight; } @@ -173,7 +173,7 @@ background-color: transparent; } - &.is-multi-selected .editor-block-list__block-edit::before { + &.is-multi-selected .block-editor-block-list__block-edit::before { background: $blue-medium-highlight; // Use opacity to work in various editor styles. @@ -194,13 +194,13 @@ * Block styles and alignments */ -.editor-block-list__layout .editor-block-list__block { +.block-editor-block-list__layout .block-editor-block-list__block { &.has-warning { min-height: ( $block-padding + $block-spacing ) * 2; } // Warnings - &.has-warning .editor-block-list__block-edit { + &.has-warning .block-editor-block-list__block-edit { // When a block has a warning, you shouldn't be able to manipulate the contents. > * { pointer-events: none; @@ -208,12 +208,12 @@ } // Allow the warning action buttons to be manipulable. - .editor-warning { + .block-editor-warning { pointer-events: all; } } - &.has-warning:not(.is-hovered) .editor-block-list__block-edit::before { + &.has-warning:not(.is-hovered) .block-editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline-color: $dark-opacity-light-500; @@ -222,7 +222,7 @@ } } - &.has-warning .editor-block-list__block-edit::after { + &.has-warning .block-editor-block-list__block-edit::after { content: ""; position: absolute; background-color: rgba($light-gray-100, 0.4); @@ -234,11 +234,11 @@ } // Avoid conflict with the multi-selection highlight color. - &.has-warning.is-multi-selected .editor-block-list__block-edit::after { + &.has-warning.is-multi-selected .block-editor-block-list__block-edit::after { background-color: transparent; } - &.has-warning.is-selected .editor-block-list__block-edit::after { + &.has-warning.is-selected .block-editor-block-list__block-edit::after { bottom: ( $block-toolbar-height - $block-padding - $border-width ); @include break-small() { @@ -247,19 +247,19 @@ } // Appender - &.is-typing .editor-block-list__empty-block-inserter, - &.is-typing .editor-block-list__side-inserter { + &.is-typing .block-editor-block-list__empty-block-inserter, + &.is-typing .block-editor-block-list__side-inserter { opacity: 0; animation: none; } - .editor-block-list__empty-block-inserter, - .editor-block-list__side-inserter { + .block-editor-block-list__empty-block-inserter, + .block-editor-block-list__side-inserter { @include edit-post__fade-in-animation; } // Reusable blocks - &.is-reusable > .editor-block-list__block-edit::before { + &.is-reusable > .block-editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline: $border-width dashed $dark-opacity-light-500; @@ -272,14 +272,14 @@ &[data-align="left"], &[data-align="right"] { // Without z-index, won't be clickable as "above" adjacent content. - z-index: z-index(".editor-block-list__block {core/image aligned left or right}"); + z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}"); width: 100%; // When images are floated, the block itself should collapse to zero height. height: 0; // Hide block outline when an image is floated. - .editor-block-list__block-edit { + .block-editor-block-list__block-edit { &::before { content: none; } @@ -289,12 +289,12 @@ } // Keep a 1px margin to compensate for the border/outline. - .editor-block-contextual-toolbar { + .block-editor-block-contextual-toolbar { margin-bottom: $border-width; } // Position toolbar better on mobile. - .editor-block-contextual-toolbar { + .block-editor-block-contextual-toolbar { width: auto; border-bottom: $border-width solid $light-gray-500; bottom: auto; @@ -302,20 +302,20 @@ } // Unlike most explicit left/right alignments, this one should be flipped by the auto-RTL system. - &[data-align="left"] .editor-block-contextual-toolbar { + &[data-align="left"] .block-editor-block-contextual-toolbar { left: 0; right: auto; } - &[data-align="right"] .editor-block-contextual-toolbar { + &[data-align="right"] .block-editor-block-contextual-toolbar { left: auto; right: 0; } // Position the sticky toolbar correctly beyond the mobile breakpoint. @include break-small() { - &[data-align="right"] .editor-block-contextual-toolbar, - &[data-align="left"] .editor-block-contextual-toolbar { + &[data-align="right"] .block-editor-block-contextual-toolbar, + &[data-align="left"] .block-editor-block-contextual-toolbar { top: $block-padding; } } @@ -323,7 +323,7 @@ // Left &[data-align="left"] { // This is in the editor only; the image should be floated on the frontend. - .editor-block-list__block-edit { + .block-editor-block-list__block-edit { /*!rtl:begin:ignore*/ float: left; margin-right: 2em; @@ -332,7 +332,7 @@ // Align block toolbar to floated content. @include break-small() { - .editor-block-toolbar { + .block-editor-block-toolbar { /*!rtl:begin:ignore*/ left: $block-padding; right: auto; @@ -344,7 +344,7 @@ // Right &[data-align="right"] { // Right: This is in the editor only; the image should be floated on the frontend. - > .editor-block-list__block-edit { + > .block-editor-block-list__block-edit { /*!rtl:begin:ignore*/ float: right; margin-left: 2em; @@ -353,7 +353,7 @@ // Align block toolbar to floated content. @include break-small() { - .editor-block-toolbar { + .block-editor-block-toolbar { /*!rtl:begin:ignore*/ right: $block-padding; left: auto; @@ -368,10 +368,10 @@ clear: both; // Without z-index, the block toolbar will be below an adjecent float - z-index: z-index(".editor-block-list__block {core/image aligned wide or fullwide}"); + z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}"); // Mover and settings above - > .editor-block-mover { + > .block-editor-block-mover { // This moves the menu up by the height of the button + border + padding. top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; bottom: auto; @@ -385,22 +385,22 @@ } } - > .editor-block-mover .editor-block-mover__control { + > .block-editor-block-mover .block-editor-block-mover__control { float: left; } // Position hover label on the right - > .editor-block-list__breadcrumb { + > .block-editor-block-list__breadcrumb { right: -$border-width; } // Hide mover until wide breakpoints, or it might be covered by toolbar - > .editor-block-mover { + > .block-editor-block-mover { display: none; } @include break-wide() { - > .editor-block-mover { + > .block-editor-block-mover { display: block; } } @@ -408,7 +408,7 @@ // Beyond the mobile breakpoint, wide images stretch outside of the column. // To center the toolbar, we make it inline-flex so the toolbar is not full-wide. @include break-small () { - .editor-block-toolbar { + .block-editor-block-toolbar { display: inline-flex; } } @@ -417,7 +417,7 @@ // Wide &[data-align="wide"] { // Position mover - > .editor-block-mover { + > .block-editor-block-mover { left: -$block-padding + $border-width; } } @@ -425,7 +425,7 @@ // Full-wide &[data-align="full"] { // Position hover label on the right for the top level block. - > .editor-block-list__block-edit > .editor-block-list__breadcrumb { + > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { right: 0; } @@ -435,7 +435,7 @@ margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; } - > .editor-block-list__block-edit { + > .block-editor-block-list__block-edit { margin-left: -$block-padding; margin-right: -$block-padding; @@ -451,7 +451,7 @@ } } - > .editor-block-list__block-edit::before { + > .block-editor-block-list__block-edit::before { left: 0; right: 0; border-left-width: 0; @@ -459,7 +459,7 @@ } // Position mover - > .editor-block-mover { + > .block-editor-block-mover { left: $border-width; } } @@ -470,7 +470,7 @@ } // Dropzones - .editor-block-drop-zone { + .block-editor-block-drop-zone { top: -4px; bottom: -3px; margin: 0 $block-padding; @@ -479,13 +479,13 @@ // Hide appender shortcuts in nested blocks // This essentially duplicates the mobile styles for the appender component // It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec - .editor-block-list__layout { - .editor-inserter-with-shortcuts { + .block-editor-block-list__layout { + .block-editor-inserter-with-shortcuts { display: none; } - .editor-block-list__empty-block-inserter, - .editor-default-block-appender .editor-inserter { + .block-editor-block-list__empty-block-inserter, + .block-editor-default-block-appender .block-editor-inserter { left: auto; right: $grid-size; } @@ -497,11 +497,11 @@ * Left and right side UI; Unified toolbar on Mobile */ -.editor-block-list__block { +.block-editor-block-list__block { // Left and right block settings and mover. - &.is-multi-selected > .editor-block-mover, - > .editor-block-list__block-edit > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover, + > .block-editor-block-list__block-edit > .block-editor-block-mover { position: absolute; width: $block-side-ui-width + $block-side-ui-clearance; @@ -511,8 +511,8 @@ } // Position depending on whether selected or not. - &.is-multi-selected > .editor-block-mover, - > .editor-block-list__block-edit > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover, + > .block-editor-block-list__block-edit > .block-editor-block-mover { top: -$block-padding - $border-width; } @@ -521,15 +521,15 @@ &.is-multi-selected, &.is-selected, &.is-hovered { - .editor-block-mover { - z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-mover"); + .block-editor-block-mover { + z-index: z-index(".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover"); } } } // Left side UI. - &.is-multi-selected > .editor-block-mover, - > .editor-block-list__block-edit > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover, + > .block-editor-block-list__block-edit > .block-editor-block-mover { padding-right: $block-side-ui-clearance; // Position for top level blocks. @@ -542,7 +542,7 @@ } } - &.is-multi-selected > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover { left: -$block-side-ui-width - $block-side-ui-clearance; } @@ -550,7 +550,7 @@ &[data-align="left"], &[data-align="right"] { // Show always when the block is selected. - &.is-selected > .editor-block-list__block-edit > .editor-block-mover { + &.is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover { // Don't show on mobile, allow the special mobile toolbar to work there. display: none; @include break-small() { @@ -571,8 +571,8 @@ } // Don't show on hover, or on the "ghost" when dragging. - &.is-hovered > .editor-block-list__block-edit > .editor-block-mover, - &.is-dragging > .editor-block-list__block-edit > .editor-block-mover { + &.is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover, + &.is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover { display: none; } } @@ -583,10 +583,10 @@ * Mobile unified toolbar. */ -.editor-block-list__block { +.block-editor-block-list__block { // Show side UI inline below the block on mobile. - .editor-block-list__block-mobile-toolbar { + .block-editor-block-list__block-mobile-toolbar { display: flex; flex-direction: row; @@ -609,15 +609,15 @@ } // Movers, inserter, trash, and ellipsis. - .editor-inserter { + .block-editor-inserter { position: relative; left: auto; top: auto; margin: 0; } - .editor-inserter__toggle, - .editor-block-mover__control { + .block-editor-inserter__toggle, + .block-editor-block-mover__control { width: $icon-button-size; height: $icon-button-size; border-radius: $radius-round-rectangle; @@ -632,19 +632,19 @@ } // Movers - .editor-block-mover { + .block-editor-block-mover { display: flex; margin-right: auto; - .editor-inserter, - .editor-block-mover__control { + .block-editor-inserter, + .block-editor-block-mover__control { float: left; } } } // Reset negative margins on mobile for full-width. - &[data-align="full"] .editor-block-list__block-mobile-toolbar { + &[data-align="full"] .block-editor-block-list__block-mobile-toolbar { margin-left: 0; margin-right: 0; } @@ -655,20 +655,20 @@ * In-Canvas Inserter */ -.editor-block-list .editor-inserter { +.block-editor-block-list .block-editor-inserter { margin: $grid-size; cursor: move; // Fallback for IE/Edge < 14 cursor: grab; } // Insertion point (includes inbetween inserter and insertion indicator) -.editor-block-list__insertion-point { +.block-editor-block-list__insertion-point { position: relative; - z-index: z-index(".editor-block-list__insertion-point"); + z-index: z-index(".block-editor-block-list__insertion-point"); margin-top: -$block-padding; } -.editor-block-list__insertion-point-indicator { +.block-editor-block-list__insertion-point-indicator { position: absolute; top: calc(50% - #{ $border-width }); height: 2px; @@ -678,7 +678,7 @@ } // This is the clickable plus. -.editor-block-list__insertion-point-inserter { +.block-editor-block-list__insertion-point-inserter { // Don't show on mobile. display: none; @include break-mobile() { @@ -692,7 +692,7 @@ justify-content: center; // Show a clickable plus. - .editor-inserter__toggle { + .block-editor-inserter__toggle { margin-top: -4px; border-radius: 50%; color: $blue-medium-focus; @@ -718,8 +718,8 @@ // Don't show the sibling inserter before the selected block. .edit-post-layout:not(.has-fixed-toolbar) { // The child selector is necessary for this to work properly in nested contexts. - .is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter, - .is-focused > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter { + .is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter, + .is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter { opacity: 0; pointer-events: none; @@ -732,8 +732,8 @@ } // This is the edge-to-edge hover area that contains the plus. -.editor-block-list__block { - > .editor-block-list__insertion-point { +.block-editor-block-list__block { + > .block-editor-block-list__insertion-point { position: absolute; top: -$block-padding - $block-spacing / 2; @@ -752,13 +752,13 @@ } } - &[data-align="full"] > .editor-block-list__insertion-point { + &[data-align="full"] > .block-editor-block-list__insertion-point { left: 0; right: 0; } } -.editor-block-list__block .editor-block-list__block-html-textarea { +.block-editor-block-list__block .block-editor-block-list__block-html-textarea { display: block; margin: 0; width: 100%; @@ -782,9 +782,9 @@ * Block Toolbar when contextual. */ -.editor-block-list__block { - .editor-block-contextual-toolbar { - z-index: z-index(".editor-block-contextual-toolbar"); +.block-editor-block-list__block { + .block-editor-block-contextual-toolbar { + z-index: z-index(".block-editor-block-contextual-toolbar"); white-space: nowrap; text-align: left; pointer-events: none; @@ -812,14 +812,14 @@ } // Floated items have special needs for the contextual toolbar position. - &[data-align="left"] .editor-block-contextual-toolbar, - &[data-align="right"] .editor-block-contextual-toolbar { + &[data-align="left"] .block-editor-block-contextual-toolbar, + &[data-align="right"] .block-editor-block-contextual-toolbar { margin-bottom: $border-width; margin-top: -$block-toolbar-height; } // Make block toolbar full width on mobile. - .editor-block-contextual-toolbar { + .block-editor-block-contextual-toolbar { margin-left: 0; margin-right: 0; @include break-small() { @@ -829,30 +829,30 @@ } // For floats, compensate for this so content doesn't grow smaller. - &[data-align="left"] .editor-block-contextual-toolbar { + &[data-align="left"] .block-editor-block-contextual-toolbar { /*rtl:ignore*/ margin-right: $block-padding + $border-width; } - &[data-align="right"] .editor-block-contextual-toolbar { + &[data-align="right"] .block-editor-block-contextual-toolbar { /*rtl:ignore*/ margin-left: $block-padding + $border-width; } // Reset pointer-events on children. - .editor-block-contextual-toolbar > * { + .block-editor-block-contextual-toolbar > * { pointer-events: auto; } } -.editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .editor-block-contextual-toolbar { +.block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-contextual-toolbar { margin-left: -$block-side-ui-width; } // Enable toolbar footprint collapsing -.editor-block-contextual-toolbar { +.block-editor-block-contextual-toolbar { // Position the contextual toolbar above the block. - .editor-block-list__block & { + .block-editor-block-list__block & { @include break-small() { bottom: auto; left: auto; @@ -872,27 +872,27 @@ } } - .editor-block-list__block[data-align="left"] & { + .block-editor-block-list__block[data-align="left"] & { // RTL note: this rule should not be auto-flipped based on direction. /*rtl:ignore*/ float: left; } - .editor-block-list__block[data-align="right"] & { + .block-editor-block-list__block[data-align="right"] & { // RTL note: this rule should not be auto-flipped based on direction. /*rtl:ignore*/ float: right; } - .editor-block-list__block[data-align="left"] &, - .editor-block-list__block[data-align="right"] & { + .block-editor-block-list__block[data-align="left"] &, + .block-editor-block-list__block[data-align="right"] & { // Move the block toolbar out of the flow using translate, but less for floats. transform: translateY(-$block-padding -$border-width); } } // Position the block toolbar when contextual. -.editor-block-contextual-toolbar .editor-block-toolbar { +.block-editor-block-contextual-toolbar .block-editor-block-toolbar { width: 100%; @include break-small() { @@ -912,10 +912,10 @@ * Hover label */ -.editor-block-list__breadcrumb { +.block-editor-block-list__breadcrumb { position: absolute; line-height: 1; - z-index: z-index(".editor-block-list__breadcrumb"); + z-index: z-index(".block-editor-block-list__breadcrumb"); // Position in the top right of the border. right: -$block-padding; @@ -933,7 +933,7 @@ color: $white; // Animate in - .editor-block-list__block:hover & { + .block-editor-block-list__block:hover & { opacity: 0; @include edit-post__fade-in-animation(60ms, 0.5s); } @@ -947,7 +947,7 @@ } } -.editor-block-list__descendant-arrow::before { +.block-editor-block-list__descendant-arrow::before { content: "→"; display: inline-block; padding: 0 4px; @@ -957,7 +957,7 @@ } } -.editor-block-list__block { +.block-editor-block-list__block { @include break-small { // Increase the hover and selection area around blocks. // This makes the blue hover line and the settings button appear even if @@ -989,8 +989,8 @@ } } -.editor-block-list__block .editor-warning { - z-index: z-index(".editor-warning"); +.block-editor-block-list__block .block-editor-warning { + z-index: z-index(".block-editor-warning"); position: relative; margin-right: -$block-padding - $border-width; margin-left: -$block-padding - $border-width; diff --git a/packages/block-editor/src/components/block-mover/drag-handle.js b/packages/block-editor/src/components/block-mover/drag-handle.js index 005487e11c5c7..86551bf4be0e3 100644 --- a/packages/block-editor/src/components/block-mover/drag-handle.js +++ b/packages/block-editor/src/components/block-mover/drag-handle.js @@ -13,7 +13,7 @@ export const IconDragHandle = ( { isVisible, className, icon, onDragStart, onDra return null; } - const dragHandleClassNames = classnames( 'editor-block-mover__control-drag-handle', className ); + const dragHandleClassNames = classnames( 'editor-block-mover__control-drag-handle block-editor-block-mover__control-drag-handle', className ); return ( +
- + { getBlockMoverDescription( blocksCount, @@ -98,7 +98,7 @@ export class BlockMover extends Component { ) } - + { getBlockMoverDescription( blocksCount, diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index be9ddeab9c1b1..5bcc3bfaa63a2 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -1,4 +1,4 @@ -.editor-block-mover { +.block-editor-block-mover { min-height: $empty-paragraph-height; opacity: 0; @@ -11,14 +11,14 @@ // To vertically center against a 56px paragraph, move upwards 72px - 56px / 2. // Don't do this for wide, fullwide, or mobile. @include break-small() { - .editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) & { + .block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) & { margin-top: -$grid-size; } } } // Mover icon buttons. -.editor-block-mover__control { +.block-editor-block-mover__control { display: flex; align-items: center; justify-content: center; @@ -59,7 +59,7 @@ } } -.editor-block-mover__control-drag-handle { +.block-editor-block-mover__control-drag-handle { cursor: move; // Fallback for IE/Edge < 14 cursor: grab; fill: currentColor; @@ -91,17 +91,17 @@ } } -.editor-block-mover__description { +.block-editor-block-mover__description { display: none; } // Apply a background in nested contexts, only on desktop. -.editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default), -.editor-block-mover__control { +.block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default), +.block-editor-block-mover__control { @include break-small() { - .editor-block-list__layout [data-align="right"] &, - .editor-block-list__layout [data-align="left"] &, - .editor-block-list__layout .editor-block-list__layout & { + .block-editor-block-list__layout [data-align="right"] &, + .block-editor-block-list__layout [data-align="left"] &, + .block-editor-block-list__layout .block-editor-block-list__layout & { background: $white; box-shadow: inset 0 0 0 1px $light-gray-500; @@ -113,7 +113,7 @@ &:active, &:focus { // Buttons are stacked with overlapping border to look like a unit, so elevate on interactions. - z-index: z-index(".editor-block-mover__control"); + z-index: z-index(".block-editor-block-mover__control"); } } } diff --git a/packages/block-editor/src/components/block-mover/test/index.js b/packages/block-editor/src/components/block-mover/test/index.js index ffb4ef6ab8198..48809ae790566 100644 --- a/packages/block-editor/src/components/block-mover/test/index.js +++ b/packages/block-editor/src/components/block-mover/test/index.js @@ -30,7 +30,7 @@ describe( 'BlockMover', () => { firstIndex={ 0 } instanceId={ 1 } /> ); - expect( blockMover.hasClass( 'editor-block-mover' ) ).toBe( true ); + expect( blockMover.hasClass( 'block-editor-block-mover' ) ).toBe( true ); const moveUp = blockMover.childAt( 0 ); const drag = blockMover.childAt( 1 ); @@ -41,24 +41,24 @@ describe( 'BlockMover', () => { expect( drag.type().name ).toBe( 'IconDragHandle' ); expect( moveDown.name() ).toBe( 'ForwardRef(IconButton)' ); expect( moveUp.props() ).toMatchObject( { - className: 'editor-block-mover__control', + className: 'editor-block-mover__control block-editor-block-mover__control', onClick: undefined, label: 'Move up', icon: upArrow, 'aria-disabled': undefined, - 'aria-describedby': 'editor-block-mover__up-description-1', + 'aria-describedby': 'block-editor-block-mover__up-description-1', } ); expect( drag.props() ).toMatchObject( { - className: 'editor-block-mover__control', + className: 'editor-block-mover__control block-editor-block-mover__control', icon: dragHandle, } ); expect( moveDown.props() ).toMatchObject( { - className: 'editor-block-mover__control', + className: 'editor-block-mover__control block-editor-block-mover__control', onClick: undefined, label: 'Move down', icon: downArrow, 'aria-disabled': undefined, - 'aria-describedby': 'editor-block-mover__down-description-1', + 'aria-describedby': 'block-editor-block-mover__down-description-1', } ); expect( moveUpDesc.text() ).toBe( 'Move 2 blocks from position 1 up by one place' ); expect( moveDownDesc.text() ).toBe( 'Move 2 blocks from position 1 down by one place' ); diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index 35db5d9b2d1f2..ab8790cefa0d9 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -37,7 +37,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) { aria-expanded={ isOpen } onClick={ isEnabled ? onToggle : undefined } label={ __( 'Block Navigation' ) } - className="editor-block-navigation" + className="editor-block-navigation block-editor-block-navigation" shortcut={ displayShortcut.access( 'o' ) } aria-disabled={ ! isEnabled } /> diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index be7206d6cac0e..b0542caa3d6f3 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -30,16 +30,16 @@ function BlockNavigationList( { * Safari+VoiceOver won't announce the list otherwise. */ /* eslint-disable jsx-a11y/no-redundant-roles */ -