Block Editor: Update Block Editor classNames to convention (#14420)

WordPress · Mar 20, 2019 · 2a49a46 · 2a49a46
1 parent 4b344be
commit 2a49a46
Show file tree

Hide file tree

Showing 166 changed files with 765 additions and 767 deletions.
diff --git 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,22 +43,22 @@ $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,
 	".components-drop-zone__content": 110,
 
 	// 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
@@ -6,19 +6,19 @@ import { Button } from '@wordpress/components';
 const BlockView = ( { title, rawContent, renderedContent, action, actionText, className } ) => {
 	return (
 		<div className={ className }>
-			<div className="editor-block-compare__content">
-				<h2 className="editor-block-compare__heading">{ title }</h2>
+			<div className="editor-block-compare__content block-editor-block-compare__content">
+				<h2 className="editor-block-compare__heading block-editor-block-compare__heading">{ title }</h2>
 
-				<div className="editor-block-compare__html">
+				<div className="editor-block-compare__html block-editor-block-compare__html">
 					{ rawContent }
 				</div>
 
-				<div className="editor-block-compare__preview edit-post-visual-editor">
+				<div className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor">
 					{ renderedContent }
 				</div>
 			</div>
 
-			<div className="editor-block-compare__action">
+			<div className="editor-block-compare__action block-editor-block-compare__action">
 				<Button isLarge tabIndex="0" onClick={ action }>{ actionText }</Button>
 			</div>
 		</div>

diff --git 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 <span key={ pos } className={ classes }>{ item.value }</span>;
@@ -59,10 +59,10 @@ class BlockCompare extends Component {
 		const difference = this.getDifference( original.rawContent, converted.rawContent );
 
 		return (
-			<div className="editor-block-compare__wrapper">
+			<div className="editor-block-compare__wrapper block-editor-block-compare__wrapper">
 				<BlockView
 					title={ __( 'Current' ) }
-					className="editor-block-compare__current"
+					className="editor-block-compare__current block-editor-block-compare__current"
 					action={ onKeep }
 					actionText={ __( 'Convert to HTML' ) }
 					rawContent={ original.rawContent }
@@ -71,7 +71,7 @@ class BlockCompare extends Component {
 
 				<BlockView
 					title={ __( 'After Conversion' ) }
-					className="editor-block-compare__converted"
+					className="editor-block-compare__converted block-editor-block-compare__converted"
 					action={ onConvert }
 					actionText={ convertButtonText }
 					rawContent={ difference }

diff --git a/packages/block-editor/src/components/block-compare/style.scss b/packages/block-editor/src/components/block-compare/style.scss
@@ -3,7 +3,7 @@
  */
 
 // Ensure the modal fits the content, otherwise it could be too big
-.editor-block-compare {
+.block-editor-block-compare {
 	overflow: auto;
 	height: auto;
 
@@ -12,7 +12,7 @@
 	}
 }
 
-.editor-block-compare__wrapper {
+.block-editor-block-compare__wrapper {
 	display: flex;
 	padding-bottom: $panel-padding;
 
@@ -29,12 +29,12 @@
 		}
 	}
 
-	.editor-block-compare__converted {
+	.block-editor-block-compare__converted {
 		border-left: 1px solid #ddd;
 		padding-left: 15px;
 	}
 
-	.editor-block-compare__html {
+	.block-editor-block-compare__html {
 		font-family: $editor-html-font;
 		font-size: 12px;
 		color: $dark-gray-800;
@@ -48,16 +48,16 @@
 			padding-bottom: 3px;
 		}
 
-		span.editor-block-compare__added {
+		span.block-editor-block-compare__added {
 			background-color: #acf2bd;
 		}
 
-		span.editor-block-compare__removed {
+		span.block-editor-block-compare__removed {
 			background-color: $alert-red;
 		}
 	}
 
-	.editor-block-compare__preview {
+	.block-editor-block-compare__preview {
 		padding: 0;
 		padding-top: $block-padding;
 
@@ -67,11 +67,11 @@
 		}
 	}
 
-	.editor-block-compare__action {
+	.block-editor-block-compare__action {
 		margin-top: $block-padding;
 	}
 
-	.editor-block-compare__heading {
+	.block-editor-block-compare__heading {
 		font-size: 1em;
 		font-weight: 400;
 		margin: 0.67em 0;

diff --git a/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap b/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
@@ -5,26 +5,26 @@ exports[`BlockView should match snapshot 1`] = `
   className="class"
 >
   <div
-    className="editor-block-compare__content"
+    className="editor-block-compare__content block-editor-block-compare__content"
   >
     <h2
-      className="editor-block-compare__heading"
+      className="editor-block-compare__heading block-editor-block-compare__heading"
     >
       title
     </h2>
     <div
-      className="editor-block-compare__html"
+      className="editor-block-compare__html block-editor-block-compare__html"
     >
       raw
     </div>
     <div
-      className="editor-block-compare__preview edit-post-visual-editor"
+      className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor"
     >
       render
     </div>
   </div>
   <div
-    className="editor-block-compare__action"
+    className="editor-block-compare__action block-editor-block-compare__action"
   >
     <ForwardRef(Button)
       isLarge={true}

diff --git a/packages/block-editor/src/components/block-drop-zone/index.js b/packages/block-editor/src/components/block-drop-zone/index.js
@@ -120,7 +120,7 @@ class BlockDropZone extends Component {
 		return (
 			<MediaUploadCheck>
 				<DropZone
-					className={ classnames( 'editor-block-drop-zone', {
+					className={ classnames( 'editor-block-drop-zone block-editor-block-drop-zone', {
 						'is-appender': isAppender,
 					} ) }
 					onFilesDrop={ this.onFilesDrop }

diff --git a/packages/block-editor/src/components/block-drop-zone/style.scss b/packages/block-editor/src/components/block-drop-zone/style.scss
@@ -1,5 +1,5 @@
 // Dropzones
-.editor-block-drop-zone {
+.block-editor-block-drop-zone {
 	border: none;
 	border-radius: 0;
 

diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
@@ -26,7 +26,7 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
 		<span
 			style={ style }
 			className={ classnames(
-				'editor-block-icon',
+				'editor-block-icon block-editor-block-icon',
 				className,
 				{ 'has-colors': showColors }
 			) }

diff --git a/packages/block-editor/src/components/block-icon/style.scss b/packages/block-editor/src/components/block-icon/style.scss
@@ -1,4 +1,4 @@
-.editor-block-icon {
+.block-editor-block-icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -34,16 +34,16 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
 	 * because we want the user to focus on the unregistered block warning, not block settings.
 	 */
 	if ( ! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered ) {
-		return <span className="editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
+		return <span className="editor-block-inspector__no-blocks block-editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
 	}
 
 	return (
 		<Fragment>
-			<div className="editor-block-inspector__card">
+			<div className="editor-block-inspector__card block-editor-block-inspector__card">
 				<BlockIcon icon={ blockType.icon } showColors />
-				<div className="editor-block-inspector__card-content">
-					<div className="editor-block-inspector__card-title">{ blockType.title }</div>
-					<div className="editor-block-inspector__card-description">{ blockType.description }</div>
+				<div className="editor-block-inspector__card-content block-editor-block-inspector__card-content">
+					<div className="editor-block-inspector__card-title block-editor-block-inspector__card-title">{ blockType.title }</div>
+					<div className="editor-block-inspector__card-description block-editor-block-inspector__card-description">{ blockType.description }</div>
 				</div>
 			</div>
 			{ hasBlockStyles && (
@@ -63,7 +63,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
 				<InspectorAdvancedControls.Slot>
 					{ ( fills ) => ! isEmpty( fills ) && (
 						<PanelBody
-							className="editor-block-inspector__advanced"
+							className="editor-block-inspector__advanced block-editor-block-inspector__advanced"
 							title={ __( 'Advanced' ) }
 							initialOpen={ false }
 						>

diff --git 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,35 +7,35 @@
 }
 
 
-.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;
 	height: 36px;
 	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
@@ -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
@@ -13,7 +13,7 @@ function BlockContextualToolbar( { focusOnMount } ) {
 	return (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
-			className="editor-block-contextual-toolbar"
+			className="editor-block-contextual-toolbar block-editor-block-contextual-toolbar"
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 		>

diff --git 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 (
 			<TextareaAutosize
-				className="editor-block-list__block-html-textarea"
+				className="editor-block-list__block-html-textarea block-editor-block-list__block-html-textarea"
 				value={ html }
 				onBlur={ this.onBlur }
 				onChange={ this.onChange }

diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.js b/packages/block-editor/src/components/block-list/block-invalid-warning.js
@@ -52,7 +52,7 @@ export class BlockInvalidWarning extends Component {
 						__( 'Resolve Block' )
 					}
 					onRequestClose={ this.onCompareClose }
-					className="editor-block-compare"
+					className="editor-block-compare block-editor-block-compare"
 				>
 					<BlockCompare
 						block={ block }

diff --git a/packages/block-editor/src/components/block-list/block-mobile-toolbar.js b/packages/block-editor/src/components/block-list/block-mobile-toolbar.js
@@ -11,7 +11,7 @@ import VisualEditorInserter from '../inserter';
 
 function BlockMobileToolbar( { clientId } ) {
 	return (
-		<div className="editor-block-list__block-mobile-toolbar">
+		<div className="editor-block-list__block-mobile-toolbar block-editor-block-list__block-mobile-toolbar">
 			<VisualEditorInserter />
 			<BlockMover clientIds={ [ clientId ] } />
 		</div>