From df60f4abd2567135c9f57193bf2c1670af68c70e Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 10 Dec 2019 12:52:36 -0500
Subject: [PATCH 1/3] Block Editor: Remove legacy "editor-" class name
 compatibility

---
 packages/base-styles/_z-index.scss            |  1 -
 .../components/block-compare/block-view.js    | 10 +++++-----
 .../src/components/block-compare/index.js     | 10 +++++-----
 .../test/__snapshots__/block-view.js.snap     | 10 +++++-----
 .../src/components/block-drop-zone/index.js   |  2 +-
 .../src/components/block-icon/index.js        |  2 +-
 .../src/components/block-inspector/index.js   |  4 ++--
 .../block-list/block-contextual-toolbar.js    |  2 +-
 .../src/components/block-list/block-html.js   |  2 +-
 .../block-list/block-invalid-warning.js       |  2 +-
 .../src/components/block-list/block.js        |  8 ++++----
 .../src/components/block-list/breadcrumb.js   |  2 +-
 .../src/components/block-list/index.js        |  2 +-
 .../components/block-list/insertion-point.js  |  6 +++---
 .../src/components/block-mover/index.js       | 12 +++++------
 .../src/components/block-mover/style.scss     |  2 +-
 .../src/components/block-mover/test/index.js  |  4 ++--
 .../components/block-navigation/dropdown.js   |  4 ++--
 .../src/components/block-navigation/index.js  |  4 ++--
 .../src/components/block-navigation/list.js   |  8 ++++----
 .../src/components/block-preview/style.scss   |  2 +-
 .../block-convert-button.js                   |  2 +-
 .../block-settings-menu/block-mode-toggle.js  |  2 +-
 .../components/block-settings-menu/index.js   | 10 +++++-----
 .../src/components/block-styles/index.js      |  8 ++++----
 .../src/components/block-switcher/index.js    | 10 +++++-----
 .../test/__snapshots__/index.js.snap          | 10 +++++-----
 .../src/components/block-toolbar/index.js     |  4 ++--
 .../src/components/block-types-list/index.js  |  2 +-
 .../src/components/color-palette/control.js   |  4 ++--
 .../test/__snapshots__/control.js.snap        |  4 ++--
 .../src/components/contrast-checker/index.js  |  2 +-
 .../test/__snapshots__/index.js.snap          | 12 +++++------
 .../default-block-appender/index.js           |  4 ++--
 .../test/__snapshots__/index.js.snap          | 12 +++++------
 .../src/components/inner-blocks/index.js      |  2 +-
 .../src/components/inner-blocks/style.scss    |  2 +-
 .../components/inserter-list-item/index.js    |  8 ++++----
 .../inserter-with-shortcuts/index.js          |  4 ++--
 .../src/components/inserter/child-blocks.js   |  4 ++--
 .../src/components/inserter/index.js          |  6 +++---
 .../src/components/inserter/menu.js           | 12 +++++------
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../src/components/media-placeholder/index.js | 17 +++++-----------
 .../components/media-replace-flow/index.js    |  2 +-
 .../multi-selection-inspector/index.js        |  8 ++++----
 .../components/panel-color-settings/index.js  |  4 ++--
 .../test/__snapshots__/index.js.snap          | 12 +++++------
 .../src/components/plain-text/index.js        |  2 +-
 .../rich-text/format-toolbar/index.js         |  2 +-
 .../src/components/rich-text/index.js         |  4 ++--
 .../skip-to-selected-block/index.js           |  2 +-
 .../src/components/url-input/button.js        |  8 ++++----
 .../src/components/url-input/index.js         |  5 ++---
 .../src/components/url-popover/index.js       |  8 ++++----
 .../test/__snapshots__/index.js.snap          | 18 ++++++++---------
 .../src/components/warning/index.js           | 12 +++++------
 .../warning/test/__snapshots__/index.js.snap  |  6 +++---
 .../src/components/writing-flow/index.js      |  4 ++--
 packages/block-editor/src/utils/test/dom.js   | 12 +++++------
 .../src/block/edit-panel/editor.scss          |  2 +-
 .../block-library/src/classic/editor.scss     |  2 +-
 .../block-library/src/columns/editor.scss     | 20 +++++++++----------
 .../embed/test/__snapshots__/index.js.snap    |  2 +-
 packages/block-library/src/group/editor.scss  | 18 ++++++++---------
 .../block-library/src/media-text/editor.scss  |  2 +-
 .../src/social-links/editor.scss              |  4 ++--
 .../specs/editor/blocks/group.test.js         |  6 +++---
 .../__snapshots__/plugins-api.test.js.snap    |  4 ++--
 .../specs/editor/plugins/cpt-locking.test.js  | 10 +++++-----
 .../plugin-block-settings-menu-group.js       |  2 +-
 .../visual-editor/block-inspector-button.js   |  2 +-
 72 files changed, 208 insertions(+), 217 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 9bdedb9fe09d17..0841cb4128915a 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -58,7 +58,6 @@ $z-layers: (
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
 	".block-editor-block-list__layout .reusable-block-edit-panel": 61,
 	".block-editor-block-contextual-toolbar": 61,
-	".editor-inner-blocks .block-editor-block-list__breadcrumb": 62,
 
 	// The block mover, particularly in nested contexts,
 	// should overlap most block content.
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 274c2896d98a9e..ffe120658c412c 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 (
 		<div className={ className }>
-			<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="block-editor-block-compare__content">
+				<h2 className="block-editor-block-compare__heading">{ title }</h2>
 
-				<div className="editor-block-compare__html block-editor-block-compare__html">
+				<div className="block-editor-block-compare__html">
 					{ rawContent }
 				</div>
 
-				<div className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor">
+				<div className="block-editor-block-compare__preview edit-post-visual-editor">
 					{ renderedContent }
 				</div>
 			</div>
 
-			<div className="editor-block-compare__action block-editor-block-compare__action">
+			<div className="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
index 1b294649e9c627..18638255508ecf 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 block-editor-block-compare__added': item.added,
-				'editor-block-compare__removed block-editor-block-compare__removed': item.removed,
+				'block-editor-block-compare__added': item.added,
+				'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 block-editor-block-compare__wrapper">
+			<div className="block-editor-block-compare__wrapper">
 				<BlockView
 					title={ __( 'Current' ) }
-					className="editor-block-compare__current block-editor-block-compare__current"
+					className="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 block-editor-block-compare__converted"
+					className="block-editor-block-compare__converted"
 					action={ onConvert }
 					actionText={ convertButtonText }
 					rawContent={ difference }
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
index f28df1bbb5548a..a5870d5f0f35e3 100644
--- 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 block-editor-block-compare__content"
+    className="block-editor-block-compare__content"
   >
     <h2
-      className="editor-block-compare__heading block-editor-block-compare__heading"
+      className="block-editor-block-compare__heading"
     >
       title
     </h2>
     <div
-      className="editor-block-compare__html block-editor-block-compare__html"
+      className="block-editor-block-compare__html"
     >
       raw
     </div>
     <div
-      className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor"
+      className="block-editor-block-compare__preview edit-post-visual-editor"
     >
       render
     </div>
   </div>
   <div
-    className="editor-block-compare__action block-editor-block-compare__action"
+    className="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
index c4f81b1b4a4c56..e3c93300790f58 100644
--- a/packages/block-editor/src/components/block-drop-zone/index.js
+++ b/packages/block-editor/src/components/block-drop-zone/index.js
@@ -117,7 +117,7 @@ class BlockDropZone extends Component {
 		const isAppender = index === undefined;
 		return (
 			<DropZone
-				className={ classnames( 'editor-block-drop-zone block-editor-block-drop-zone', {
+				className={ classnames( 'block-editor-block-drop-zone', {
 					'is-appender': isAppender,
 				} ) }
 				onHTMLDrop={ this.onHTMLDrop }
diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
index 4d6106214df7d8..508d48a2211c13 100644
--- 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 block-editor-block-icon',
+				'block-editor-block-icon',
 				className,
 				{ 'has-colors': showColors }
 			) }
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 379ed9521125be..8f58075cfa04c8 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -40,7 +40,7 @@ const BlockInspector = ( {
 	if ( ! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered ) {
 		if ( showNoBlockSelectedMessage ) {
 			return (
-				<span className="editor-block-inspector__no-blocks block-editor-block-inspector__no-blocks">
+				<span className="block-editor-block-inspector__no-blocks">
 					{ __( 'No block selected.' ) }
 				</span>
 			);
@@ -70,7 +70,7 @@ const BlockInspector = ( {
 					{ ( { hasFills } ) =>
 						hasFills( InspectorAdvancedControls.slotName ) && (
 							<PanelBody
-								className="editor-block-inspector__advanced block-editor-block-inspector__advanced"
+								className="block-editor-block-inspector__advanced"
 								title={ __( 'Advanced' ) }
 								initialOpen={ false }
 							>
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 36575d90f9ab59..ce9a1c8578084c 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 (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
-			className="editor-block-contextual-toolbar block-editor-block-contextual-toolbar"
+			className="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
index a3b4dc21742341..f9a83feaafb3ca 100644
--- a/packages/block-editor/src/components/block-list/block-html.js
+++ b/packages/block-editor/src/components/block-list/block-html.js
@@ -39,7 +39,7 @@ function BlockHTML( { clientId } ) {
 
 	return (
 		<TextareaAutosize
-			className="editor-block-list__block-html-textarea block-editor-block-list__block-html-textarea"
+			className="block-editor-block-list__block-html-textarea"
 			value={ html }
 			onBlur={ onChange }
 			onChange={ ( event ) => setHtml( event.target.value ) }
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
index f28c4224058356..0b1d45c1084863 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.js
@@ -71,7 +71,7 @@ export class BlockInvalidWarning extends Component {
 							__( 'Resolve Block' )
 						}
 						onRequestClose={ this.onCompareClose }
-						className="editor-block-compare block-editor-block-compare"
+						className="block-editor-block-compare"
 					>
 						<BlockCompare
 							block={ block }
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 056fb918e7880a..438038a0849c36 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -453,7 +453,7 @@ function BlockListBlock( {
 	// 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 block-editor-block-list__block',
+		'wp-block block-editor-block-list__block',
 		{
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': shouldAppearSelected,
@@ -547,7 +547,7 @@ function BlockListBlock( {
 			/> }
 			<div
 				className={ classnames(
-					'editor-block-list__block-edit block-editor-block-list__block-edit',
+					'block-editor-block-list__block-edit',
 					{ 'has-mover-inside': moverDirection === 'horizontal' },
 				) }
 			>
@@ -613,7 +613,7 @@ function BlockListBlock( {
 				</IgnoreNestedEvents>
 			</div>
 			{ showInserterShortcuts && (
-				<div className="editor-block-list__side-inserter block-editor-block-list__side-inserter">
+				<div className="block-editor-block-list__side-inserter">
 					<InserterWithShortcuts
 						clientId={ clientId }
 						rootClientId={ rootClientId }
@@ -622,7 +622,7 @@ function BlockListBlock( {
 				</div>
 			) }
 			{ showEmptyBlockSideInserter && (
-				<div className="editor-block-list__empty-block-inserter block-editor-block-list__empty-block-inserter">
+				<div className="block-editor-block-list__empty-block-inserter">
 					<Inserter
 						position="top right"
 						onToggle={ selectOnOpen }
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
index 25a359c19c1d15..5d8d4517472cc7 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -22,7 +22,7 @@ const BlockBreadcrumb = forwardRef( ( { clientId }, ref ) => {
 	const { setNavigationMode } = useDispatch( 'core/block-editor' );
 
 	return (
-		<div className="editor-block-list__breadcrumb block-editor-block-list__breadcrumb">
+		<div className="block-editor-block-list__breadcrumb">
 			<Toolbar>
 				<Button ref={ ref } onClick={ () => setNavigationMode( false ) }>
 					<BlockTitle clientId={ clientId } />
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 5d260804a601e6..8712c4c2a11cd0 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -78,7 +78,7 @@ function BlockList( {
 		<div
 			ref={ ref }
 			className={ classnames(
-				'editor-block-list__layout block-editor-block-list__layout',
+				'block-editor-block-list__layout',
 				className
 			) }
 		>
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 7826dac49e0dfe..5439f368d71640 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -44,9 +44,9 @@ export default function BlockInsertionPoint( { rootClientId, clientId } ) {
 	}
 
 	return (
-		<div className="editor-block-list__insertion-point block-editor-block-list__insertion-point">
+		<div className="block-editor-block-list__insertion-point">
 			{ showInsertionPoint && (
-				<div className="editor-block-list__insertion-point-indicator block-editor-block-list__insertion-point-indicator" />
+				<div className="block-editor-block-list__insertion-point-indicator" />
 			) }
 			<div
 				onFocus={ onFocus }
@@ -59,7 +59,7 @@ export default function BlockInsertionPoint( { rootClientId, clientId } ) {
 				// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 				tabIndex={ -1 }
 				className={
-					classnames( 'editor-block-list__insertion-point-inserter block-editor-block-list__insertion-point-inserter', {
+					classnames( 'block-editor-block-list__insertion-point-inserter', {
 						'is-visible': isInserterFocused,
 					} )
 				}
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 669511adb95583..94810251e3a768 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -86,9 +86,9 @@ export class BlockMover extends Component {
 		// to an unfocused state (body as active element) without firing blur on,
 		// the rendering parent, leaving it unable to react to focus out.
 		return (
-			<div className={ classnames( 'editor-block-mover block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
+			<div className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
 				<IconButton
-					className="editor-block-mover__control block-editor-block-mover__control"
+					className="block-editor-block-mover__control"
 					onClick={ isFirst ? null : onMoveUp }
 					icon={ getArrowIcon( 'up' ) }
 					// translators: %s: Horizontal direction of block movement ( left, right )
@@ -103,7 +103,7 @@ export class BlockMover extends Component {
 					{ ( { onDraggableStart, onDraggableEnd } ) => (
 						<IconButton
 							icon={ dragHandle }
-							className="block-editor-block-mover__control-drag-handle editor-block-mover__control block-editor-block-mover__control"
+							className="block-editor-block-mover__control-drag-handle block-editor-block-mover__control"
 							aria-hidden="true"
 							onDragStart={ onDraggableStart }
 							onDragEnd={ onDraggableEnd }
@@ -113,7 +113,7 @@ export class BlockMover extends Component {
 				</BlockDraggable>
 
 				<IconButton
-					className="editor-block-mover__control block-editor-block-mover__control"
+					className="block-editor-block-mover__control"
 					onClick={ isLast ? null : onMoveDown }
 					icon={ getArrowIcon( 'down' ) }
 					// translators: %s: Horizontal direction of block movement ( left, right )
@@ -123,7 +123,7 @@ export class BlockMover extends Component {
 					onFocus={ this.onFocus }
 					onBlur={ this.onBlur }
 				/>
-				<span id={ `block-editor-block-mover__up-description-${ instanceId }` } className="editor-block-mover__description block-editor-block-mover__description">
+				<span id={ `block-editor-block-mover__up-description-${ instanceId }` } className="block-editor-block-mover__description">
 					{
 						getBlockMoverDescription(
 							blocksCount,
@@ -137,7 +137,7 @@ export class BlockMover extends Component {
 						)
 					}
 				</span>
-				<span id={ `block-editor-block-mover__down-description-${ instanceId }` } className="editor-block-mover__description block-editor-block-mover__description">
+				<span id={ `block-editor-block-mover__down-description-${ instanceId }` } className="block-editor-block-mover__description">
 					{
 						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 61493ee98b4f03..4b99a5e8d70f98 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -45,7 +45,7 @@
 // Don't add negative vertical margin for wide, fullwide, or mobile.
 // @todo: simplify this selector.
 @include break-small() {
-	.block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) .editor-block-mover:not(.is-horizontal) {
+	.block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) .block-editor-block-mover:not(.is-horizontal) {
 		margin-top: 0;
 	}
 }
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 386baaa55554ad..cb7996b1e250ef 100644
--- a/packages/block-editor/src/components/block-mover/test/index.js
+++ b/packages/block-editor/src/components/block-mover/test/index.js
@@ -42,7 +42,7 @@ describe( 'BlockMover', () => {
 			expect( drag.type().name ).toBe( 'BlockDraggable' );
 			expect( moveDown.name() ).toBe( 'ForwardRef(IconButton)' );
 			expect( moveUp.props() ).toMatchObject( {
-				className: 'editor-block-mover__control block-editor-block-mover__control',
+				className: 'block-editor-block-mover__control',
 				onClick: undefined,
 				label: 'Move up',
 				icon: upArrow,
@@ -50,7 +50,7 @@ describe( 'BlockMover', () => {
 				'aria-describedby': 'block-editor-block-mover__up-description-1',
 			} );
 			expect( moveDown.props() ).toMatchObject( {
-				className: 'editor-block-mover__control block-editor-block-mover__control',
+				className: 'block-editor-block-mover__control',
 				onClick: undefined,
 				label: 'Move down',
 				icon: downArrow,
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index b53dd49bdf4bdc..5107f62f53d715 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -22,7 +22,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
 
 	return	(
 		<Dropdown
-			contentClassName="editor-block-navigation__popover block-editor-block-navigation__popover"
+			contentClassName="block-editor-block-navigation__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<>
 					{ isEnabled && <KeyboardShortcuts
@@ -37,7 +37,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
 						aria-expanded={ isOpen }
 						onClick={ isEnabled ? onToggle : undefined }
 						label={ __( 'Block navigation' ) }
-						className="editor-block-navigation block-editor-block-navigation"
+						className="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 f6b82955cb2673..0e4413c2d85a34 100644
--- a/packages/block-editor/src/components/block-navigation/index.js
+++ b/packages/block-editor/src/components/block-navigation/index.js
@@ -31,9 +31,9 @@ function BlockNavigation( { rootBlock, rootBlocks, selectedBlockClientId, select
 	return (
 		<NavigableMenu
 			role="presentation"
-			className="editor-block-navigation__container block-editor-block-navigation__container"
+			className="block-editor-block-navigation__container"
 		>
-			<p className="editor-block-navigation__label block-editor-block-navigation__label">{ __( 'Block navigation' ) }</p>
+			<p className="block-editor-block-navigation__label">{ __( 'Block navigation' ) }</p>
 			{ hasHierarchy && (
 				<BlockNavigationList
 					blocks={ [ rootBlock ] }
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 85cd6837356123..ee9ee1554c3830 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/packages/block-editor/src/components/block-navigation/list.js
@@ -58,16 +58,16 @@ export default function BlockNavigationList( {
 		 * Safari+VoiceOver won't announce the list otherwise.
 		 */
 		/* eslint-disable jsx-a11y/no-redundant-roles */
-		<ul className="editor-block-navigation__list block-editor-block-navigation__list" role="list">
+		<ul className="block-editor-block-navigation__list" role="list">
 			{ map( omitBy( blocks, isNil ), ( block ) => {
 				const blockType = getBlockType( block.name );
 				const isSelected = block.clientId === selectedBlockClientId;
 
 				return (
 					<li key={ block.clientId }>
-						<div className="editor-block-navigation__item block-editor-block-navigation__item">
+						<div className="block-editor-block-navigation__item">
 							<Button
-								className={ classnames( 'editor-block-navigation__item-button block-editor-block-navigation__item-button', {
+								className={ classnames( 'block-editor-block-navigation__item-button', {
 									'is-selected': isSelected,
 								} ) }
 								onClick={ () => selectBlock( block.clientId ) }
@@ -92,7 +92,7 @@ export default function BlockNavigationList( {
 			} ) }
 			{ shouldShowAppender && (
 				<li>
-					<div className="editor-block-navigation__item block-editor-block-navigation__item">
+					<div className="block-editor-block-navigation__item">
 						<ButtonBlockAppender
 							rootClientId={ parentBlockClientId }
 							__experimentalSelectBlockOnInsert={ false }
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 2316de61a8355f..410bb9b65143f7 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -39,7 +39,7 @@
 		padding: 0;
 	}
 
-	.editor-block-list__block-edit [data-block] {
+	.block-editor-block-list__block-edit [data-block] {
 		margin: 0;
 	}
 
diff --git a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
index f27cac38b1df9a..0a619c61f2b9d1 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
@@ -12,7 +12,7 @@ export default function BlockConvertButton( { shouldRender, onClick, small } ) {
 	const label = __( 'Convert to Blocks' );
 	return (
 		<MenuItem
-			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+			className="block-editor-block-settings-menu__control"
 			onClick={ onClick }
 			icon="screenoptions"
 		>
diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index d36ab6974e2760..39cd5d097c1339 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -23,7 +23,7 @@ export function BlockModeToggle( { blockType, mode, onToggleMode, small = false,
 
 	return (
 		<MenuItem
-			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+			className="block-editor-block-settings-menu__control"
 			onClick={ onToggleMode }
 			icon="html"
 		>
diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
index e4f7219d1a3803..2d89d5f4e39e63 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -26,7 +26,7 @@ import __experimentalBlockSettingsMenuFirstItem from './block-settings-menu-firs
 import __experimentalBlockSettingsMenuPluginsExtension from './block-settings-menu-plugins-extension';
 
 const POPOVER_PROPS = {
-	className: 'block-editor-block-settings-menu__popover editor-block-settings-menu__popover',
+	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
 };
 
@@ -71,7 +71,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 									) }
 									{ canDuplicate && (
 										<MenuItem
-											className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+											className="block-editor-block-settings-menu__control"
 											onClick={ flow( onClose, onDuplicate ) }
 											icon="admin-page"
 											shortcut={ shortcuts.duplicate.display }
@@ -82,7 +82,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 									{ canInsertDefaultBlock && (
 										<>
 											<MenuItem
-												className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+												className="block-editor-block-settings-menu__control"
 												onClick={ flow( onClose, onInsertBefore ) }
 												icon="insert-before"
 												shortcut={ shortcuts.insertBefore.display }
@@ -90,7 +90,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 												{ __( 'Insert Before' ) }
 											</MenuItem>
 											<MenuItem
-												className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+												className="block-editor-block-settings-menu__control"
 												onClick={ flow( onClose, onInsertAfter ) }
 												icon="insert-after"
 												shortcut={ shortcuts.insertAfter.display }
@@ -112,7 +112,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 								<MenuGroup>
 									{ ! isLocked && (
 										<MenuItem
-											className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+											className="block-editor-block-settings-menu__control"
 											onClick={ flow( onClose, onRemove ) }
 											icon="trash"
 											shortcut={ shortcuts.removeBlock.display }
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 25a2fd7b235cd2..f3fd2b2f85a8ad 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -97,14 +97,14 @@ function BlockStyles( {
 	}
 
 	return (
-		<div className="editor-block-styles block-editor-block-styles">
+		<div className="block-editor-block-styles">
 			{ styles.map( ( style ) => {
 				const styleClassName = replaceActiveStyle( className, activeStyle, style );
 				return (
 					<div
 						key={ style.name }
 						className={ classnames(
-							'editor-block-styles__item block-editor-block-styles__item', {
+							'block-editor-block-styles__item', {
 								'is-active': activeStyle === style,
 							}
 						) }
@@ -121,7 +121,7 @@ function BlockStyles( {
 						tabIndex="0"
 						aria-label={ style.label || style.name }
 					>
-						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
+						<div className="block-editor-block-styles__item-preview">
 							<BlockPreview
 								viewportWidth={ 500 }
 								blocks={
@@ -134,7 +134,7 @@ function BlockStyles( {
 								}
 							/>
 						</div>
-						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
+						<div className="block-editor-block-styles__item-label">
 							{ style.label || style.name }
 						</div>
 					</div>
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 4f3510e4ebbb2e..4336b6fe15cc80 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -74,7 +74,7 @@ export class BlockSwitcher extends Component {
 				<Toolbar>
 					<IconButton
 						disabled
-						className="editor-block-switcher__no-switcher-icon block-editor-block-switcher__no-switcher-icon"
+						className="block-editor-block-switcher__no-switcher-icon"
 						label={ __( 'Block icon' ) }
 						icon={ <BlockIcon icon={ icon } showColors /> }
 					/>
@@ -85,8 +85,8 @@ export class BlockSwitcher extends Component {
 		return (
 			<Dropdown
 				position="bottom right"
-				className="editor-block-switcher block-editor-block-switcher"
-				contentClassName="editor-block-switcher__popover block-editor-block-switcher__popover"
+				className="block-editor-block-switcher"
+				contentClassName="block-editor-block-switcher__popover"
 				renderToggle={ ( { onToggle, isOpen } ) => {
 					const openOnArrowDown = ( event ) => {
 						if ( ! isOpen && event.keyCode === DOWN ) {
@@ -111,7 +111,7 @@ export class BlockSwitcher extends Component {
 					return (
 						<Toolbar>
 							<IconButton
-								className="editor-block-switcher__toggle block-editor-block-switcher__toggle"
+								className="block-editor-block-switcher__toggle"
 								onClick={ onToggle }
 								aria-haspopup="true"
 								aria-expanded={ isOpen }
@@ -121,7 +121,7 @@ export class BlockSwitcher extends Component {
 								icon={ (
 									<>
 										<BlockIcon icon={ icon } showColors />
-										<SVG className="editor-block-switcher__transform block-editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></SVG>
+										<SVG className="block-editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></SVG>
 									</>
 								) }
 							/>
diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
index 09a84bb9fbef01..40acc8d29660fa 100644
--- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
@@ -3,7 +3,7 @@
 exports[`BlockSwitcher should render disabled block switcher with multi block of different types when no transforms 1`] = `
 <Toolbar>
   <ForwardRef(IconButton)
-    className="editor-block-switcher__no-switcher-icon block-editor-block-switcher__no-switcher-icon"
+    className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
       <BlockIcon
@@ -18,8 +18,8 @@ exports[`BlockSwitcher should render disabled block switcher with multi block of
 
 exports[`BlockSwitcher should render enabled block switcher with multi block when transforms exist 1`] = `
 <Dropdown
-  className="editor-block-switcher block-editor-block-switcher"
-  contentClassName="editor-block-switcher__popover block-editor-block-switcher__popover"
+  className="block-editor-block-switcher"
+  contentClassName="block-editor-block-switcher__popover"
   position="bottom right"
   renderContent={[Function]}
   renderToggle={[Function]}
@@ -28,8 +28,8 @@ exports[`BlockSwitcher should render enabled block switcher with multi block whe
 
 exports[`BlockSwitcher should render switcher with blocks 1`] = `
 <Dropdown
-  className="editor-block-switcher block-editor-block-switcher"
-  contentClassName="editor-block-switcher__popover block-editor-block-switcher__popover"
+  className="block-editor-block-switcher"
+  contentClassName="block-editor-block-switcher__popover"
   position="bottom right"
   renderContent={[Function]}
   renderToggle={[Function]}
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 798967031875d7..574b4529e8c99e 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -40,7 +40,7 @@ export default function BlockToolbar() {
 
 	if ( blockClientIds.length > 1 ) {
 		return (
-			<div className="editor-block-toolbar block-editor-block-toolbar">
+			<div className="block-editor-block-toolbar">
 				<MultiBlocksSwitcher />
 				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
@@ -48,7 +48,7 @@ export default function BlockToolbar() {
 	}
 
 	return (
-		<div className="editor-block-toolbar block-editor-block-toolbar">
+		<div className="block-editor-block-toolbar">
 			{ mode === 'visual' && isValid && (
 				<>
 					{ blockClientIds.length === 1 && <BlockMobileToolbar clientId={ blockClientIds[ 0 ] } /> }
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index 8c2de6772dd8ef..42b85658c7d39b 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -15,7 +15,7 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
 		 * Safari+VoiceOver won't announce the list otherwise.
 		 */
 		/* eslint-disable jsx-a11y/no-redundant-roles */
-		<ul role="list" className="editor-block-types-list block-editor-block-types-list">
+		<ul role="list" className="block-editor-block-types-list">
 			{ items && items.map( ( item ) =>
 				<InserterListItem
 					key={ item.id }
diff --git a/packages/block-editor/src/components/color-palette/control.js b/packages/block-editor/src/components/color-palette/control.js
index 6a2da23b527c67..d86cfebe23c5e4 100644
--- a/packages/block-editor/src/components/color-palette/control.js
+++ b/packages/block-editor/src/components/color-palette/control.js
@@ -28,7 +28,7 @@ export function ColorPaletteControl( {
 
 	return (
 		<BaseControl
-			className="editor-color-palette-control block-editor-color-palette-control"
+			className="block-editor-color-palette-control"
 		>
 			<BaseControl.VisualLabel>
 				{ label }
@@ -40,7 +40,7 @@ export function ColorPaletteControl( {
 				) }
 			</BaseControl.VisualLabel>
 			<ColorPalette
-				className="editor-color-palette-control__color-palette block-editor-color-palette-control__color-palette"
+				className="block-editor-color-palette-control__color-palette"
 				value={ value }
 				onChange={ onChange }
 				{ ... { colors, disableCustomColors } }
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index e49d5f33ee4e37..4ba3f641aebb3e 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
 <BaseControl
-  className="editor-color-palette-control block-editor-color-palette-control"
+  className="block-editor-color-palette-control"
 >
   <Component>
     Test Color
@@ -12,7 +12,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
     />
   </Component>
   <WithColorContext(ColorPalette)
-    className="editor-color-palette-control__color-palette block-editor-color-palette-control__color-palette"
+    className="block-editor-color-palette-control__color-palette"
     colors={
       Array [
         Object {
diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js
index 308572e55531aa..251b0023c024bc 100644
--- a/packages/block-editor/src/components/contrast-checker/index.js
+++ b/packages/block-editor/src/components/contrast-checker/index.js
@@ -19,7 +19,7 @@ function ContrastCheckerMessage( { tinyBackgroundColor, tinyTextColor, backgroun
 		speak( __( 'This color combination may be hard for people to read.' ) );
 	}, [ backgroundColor, textColor ] );
 	return (
-		<div className="editor-contrast-checker block-editor-contrast-checker">
+		<div className="block-editor-contrast-checker">
 			<Notice status="warning" isDismissible={ false }>
 				{ msg }
 			</Notice>
diff --git a/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
index a61121de6e0b47..8c7f291a5abe91 100644
--- a/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
@@ -41,7 +41,7 @@ exports[`ContrastChecker should render component when the colors do not meet AA
     }
   >
     <div
-      className="editor-contrast-checker block-editor-contrast-checker"
+      className="block-editor-contrast-checker"
     >
       <Notice
         isDismissible={false}
@@ -103,7 +103,7 @@ exports[`ContrastChecker should render different message matching snapshot when
     }
   >
     <div
-      className="editor-contrast-checker block-editor-contrast-checker"
+      className="block-editor-contrast-checker"
     >
       <Notice
         isDismissible={false}
@@ -161,7 +161,7 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
     }
   >
     <div
-      className="editor-contrast-checker block-editor-contrast-checker"
+      className="block-editor-contrast-checker"
     >
       <Notice
         isDismissible={false}
@@ -221,7 +221,7 @@ exports[`ContrastChecker should take into consideration the font size passed 1`]
     }
   >
     <div
-      className="editor-contrast-checker block-editor-contrast-checker"
+      className="block-editor-contrast-checker"
     >
       <Notice
         isDismissible={false}
@@ -281,7 +281,7 @@ exports[`ContrastChecker should take into consideration wherever text is large o
     }
   >
     <div
-      className="editor-contrast-checker block-editor-contrast-checker"
+      className="block-editor-contrast-checker"
     >
       <Notice
         isDismissible={false}
@@ -342,7 +342,7 @@ exports[`ContrastChecker should use isLargeText to make decisions if both isLarg
     }
   >
     <div
-      className="editor-contrast-checker block-editor-contrast-checker"
+      className="block-editor-contrast-checker"
     >
       <Notice
         isDismissible={false}
diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
index 3baf90e4406097..3bc12849b69793 100644
--- a/packages/block-editor/src/components/default-block-appender/index.js
+++ b/packages/block-editor/src/components/default-block-appender/index.js
@@ -53,7 +53,7 @@ export function DefaultBlockAppender( {
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
-			className="wp-block editor-default-block-appender block-editor-default-block-appender"
+			className="wp-block block-editor-default-block-appender"
 			onMouseEnter={ () => setState( { hovered: true } ) }
 			onMouseLeave={ () => setState( { hovered: false } ) }
 		>
@@ -61,7 +61,7 @@ export function DefaultBlockAppender( {
 			<TextareaAutosize
 				role="button"
 				aria-label={ __( 'Add block' ) }
-				className="editor-default-block-appender__content block-editor-default-block-appender__content"
+				className="block-editor-default-block-appender__content"
 				readOnly
 				onFocus={ onAppend }
 				value={ showPrompt ? value : '' }
diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
index 08a0f7df9efe74..dd34877baec562 100644
--- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div
-  className="wp-block editor-default-block-appender block-editor-default-block-appender"
+  className="wp-block block-editor-default-block-appender"
   data-root-client-id=""
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
@@ -10,7 +10,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
     aria-label="Add block"
-    className="editor-default-block-appender__content block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     onFocus={
       [MockFunction] {
         "calls": Array [
@@ -38,7 +38,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 
 exports[`DefaultBlockAppender should match snapshot 1`] = `
 <div
-  className="wp-block editor-default-block-appender block-editor-default-block-appender"
+  className="wp-block block-editor-default-block-appender"
   data-root-client-id=""
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
@@ -46,7 +46,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
     aria-label="Add block"
-    className="editor-default-block-appender__content block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     onFocus={[MockFunction]}
     readOnly={true}
     role="button"
@@ -62,7 +62,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 
 exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 <div
-  className="wp-block editor-default-block-appender block-editor-default-block-appender"
+  className="wp-block block-editor-default-block-appender"
   data-root-client-id=""
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
@@ -70,7 +70,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
     aria-label="Add block"
-    className="editor-default-block-appender__content block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     onFocus={[MockFunction]}
     readOnly={true}
     role="button"
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 19301cf37d7e8a..fa2cda88367637 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -109,7 +109,7 @@ class InnerBlocks extends Component {
 		} = this.props;
 		const { templateInProcess } = this.state;
 
-		const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', {
+		const classes = classnames( 'block-editor-inner-blocks', {
 			'has-overlay': enableClickThrough && hasOverlay,
 		} );
 
diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss
index ff8e4b9adbe96a..b3651fd2cad976 100644
--- a/packages/block-editor/src/components/inner-blocks/style.scss
+++ b/packages/block-editor/src/components/inner-blocks/style.scss
@@ -13,7 +13,7 @@
 }
 
 // On fullwide blocks, don't go beyond the canvas.
-[data-align="full"] > .editor-block-list__block-edit > [data-block] .has-overlay::after {
+[data-align="full"] > .block-editor-block-list__block-edit > [data-block] .has-overlay::after {
 	right: 0;
 	left: 0;
 }
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index 5aeed7b0bd00f0..674db0f6deedc4 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -27,11 +27,11 @@ function InserterListItem( {
 	} : {};
 
 	return (
-		<li className="editor-block-types-list__list-item block-editor-block-types-list__list-item">
+		<li className="block-editor-block-types-list__list-item">
 			<Button
 				className={
 					classnames(
-						'editor-block-types-list__item block-editor-block-types-list__item',
+						'block-editor-block-types-list__item',
 						className
 					)
 				}
@@ -43,12 +43,12 @@ function InserterListItem( {
 				{ ...props }
 			>
 				<span
-					className="editor-block-types-list__item-icon block-editor-block-types-list__item-icon"
+					className="block-editor-block-types-list__item-icon"
 					style={ itemIconStyle }
 				>
 					<BlockIcon icon={ icon } showColors />
 				</span>
-				<span className="editor-block-types-list__item-title block-editor-block-types-list__item-title">
+				<span className="block-editor-block-types-list__item-title">
 					{ title }
 				</span>
 			</Button>
diff --git a/packages/block-editor/src/components/inserter-with-shortcuts/index.js b/packages/block-editor/src/components/inserter-with-shortcuts/index.js
index 71adf33922bff5..2a0b8155551aef 100644
--- a/packages/block-editor/src/components/inserter-with-shortcuts/index.js
+++ b/packages/block-editor/src/components/inserter-with-shortcuts/index.js
@@ -30,11 +30,11 @@ function InserterWithShortcuts( { items, isLocked, onInsert } ) {
 	} ).slice( 0, 3 );
 
 	return (
-		<div className="editor-inserter-with-shortcuts block-editor-inserter-with-shortcuts">
+		<div className="block-editor-inserter-with-shortcuts">
 			{ itemsWithoutDefaultBlock.map( ( item ) => (
 				<IconButton
 					key={ item.id }
-					className="editor-inserter-with-shortcuts__block block-editor-inserter-with-shortcuts__block"
+					className="block-editor-inserter-with-shortcuts__block"
 					onClick={ () => onInsert( item ) }
 					// translators: %s: block title/name to be added
 					label={ sprintf( __( 'Add %s' ), item.title ) }
diff --git a/packages/block-editor/src/components/inserter/child-blocks.js b/packages/block-editor/src/components/inserter/child-blocks.js
index 53590af3a1ee72..94764a94b4fe7d 100644
--- a/packages/block-editor/src/components/inserter/child-blocks.js
+++ b/packages/block-editor/src/components/inserter/child-blocks.js
@@ -12,9 +12,9 @@ import BlockIcon from '../block-icon';
 
 function ChildBlocks( { rootBlockIcon, rootBlockTitle, items, ...props } ) {
 	return (
-		<div className="editor-inserter__child-blocks block-editor-inserter__child-blocks">
+		<div className="block-editor-inserter__child-blocks">
 			{ ( rootBlockIcon || rootBlockTitle ) && (
-				<div className="editor-inserter__parent-block-header block-editor-inserter__parent-block-header">
+				<div className="block-editor-inserter__parent-block-header">
 					<BlockIcon icon={ rootBlockIcon } showColors />
 					{ rootBlockTitle && <h2>{ rootBlockTitle }</h2> }
 				</div>
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index fc153b21ea303b..2db998bb768e17 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -38,7 +38,7 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasSingl
 				event.currentTarget.focus();
 			} }
 			onClick={ onToggle }
-			className="editor-inserter__toggle block-editor-inserter__toggle"
+			className="block-editor-inserter__toggle"
 			aria-haspopup={ ! hasSingleBlockType ? 'true' : false }
 			aria-expanded={ ! hasSingleBlockType ? isOpen : false }
 			disabled={ disabled }
@@ -124,8 +124,8 @@ class Inserter extends Component {
 
 		return (
 			<Dropdown
-				className="editor-inserter block-editor-inserter"
-				contentClassName="editor-inserter__popover block-editor-inserter__popover"
+				className="block-editor-inserter"
+				contentClassName="block-editor-inserter__popover"
 				position={ position }
 				onToggle={ this.onToggle }
 				expandOnMobile
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 084ddb92c5e1ff..65990d5951dfa9 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -285,7 +285,7 @@ export class InserterMenu extends Component {
 		/* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
 		return (
 			<div
-				className={ classnames( 'editor-inserter__menu block-editor-inserter__menu', {
+				className={ classnames( 'block-editor-inserter__menu', {
 					'has-help-panel': hasHelpPanel,
 				} ) }
 				onKeyPress={ stopKeyPropagation }
@@ -299,13 +299,13 @@ export class InserterMenu extends Component {
 						id={ `block-editor-inserter__search-${ instanceId }` }
 						type="search"
 						placeholder={ __( 'Search for a block' ) }
-						className="editor-inserter__search block-editor-inserter__search"
+						className="block-editor-inserter__search"
 						autoFocus
 						onChange={ this.onChangeSearchInput }
 					/>
 
 					<div
-						className="editor-inserter__results block-editor-inserter__results"
+						className="block-editor-inserter__results"
 						ref={ this.inserterResults }
 						tabIndex="0"
 						role="region"
@@ -351,7 +351,7 @@ export class InserterMenu extends Component {
 
 						{ !! reusableItems.length && (
 							<PanelBody
-								className="editor-inserter__reusable-blocks-panel block-editor-inserter__reusable-blocks-panel"
+								className="block-editor-inserter__reusable-blocks-panel"
 								title={ __( 'Reusable' ) }
 								opened={ isPanelOpen( 'reusable' ) }
 								onToggle={ this.onTogglePanel( 'reusable' ) }
@@ -360,7 +360,7 @@ export class InserterMenu extends Component {
 							>
 								<BlockTypesList items={ reusableItems } onSelect={ onSelect } onHover={ this.onHover } />
 								<a
-									className="editor-inserter__manage-reusable-blocks block-editor-inserter__manage-reusable-blocks"
+									className="block-editor-inserter__manage-reusable-blocks"
 									href={ addQueryArgs( 'edit.php', { post_type: 'wp_block' } ) }
 								>
 									{ __( 'Manage All Reusable Blocks' ) }
@@ -382,7 +382,7 @@ export class InserterMenu extends Component {
 								}
 								if ( ! hasItems ) {
 									return (
-										<p className="editor-inserter__no-results block-editor-inserter__no-results">{ __( 'No blocks found.' ) }</p>
+										<p className="block-editor-inserter__no-results">{ __( 'No blocks found.' ) }</p>
 									);
 								}
 								return null;
diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
index e1dba581caf897..feac082de26346 100644
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
+exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index cb5fc3806f0301..d7d72d4a39ddf1 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -37,11 +37,11 @@ import URLPopover from '../url-popover';
 const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 	<URLPopover onClose={ onClose }>
 		<form
-			className="editor-media-placeholder__url-input-form block-editor-media-placeholder__url-input-form"
+			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
 		>
 			<input
-				className="editor-media-placeholder__url-input-field block-editor-media-placeholder__url-input-field"
+				className="block-editor-media-placeholder__url-input-field"
 				type="url"
 				aria-label={ __( 'URL' ) }
 				placeholder={ __( 'Paste or type URL' ) }
@@ -49,7 +49,7 @@ const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 				value={ src }
 			/>
 			<IconButton
-				className="editor-media-placeholder__url-input-submit-button block-editor-media-placeholder__url-input-submit-button"
+				className="block-editor-media-placeholder__url-input-submit-button"
 				icon="editor-break"
 				label={ __( 'Apply' ) }
 				type="submit"
@@ -203,7 +203,6 @@ export class MediaPlaceholder extends Component {
 
 		const placeholderClassName = classnames(
 			'block-editor-media-placeholder',
-			'editor-media-placeholder',
 			className,
 			{ 'is-appender': isAppender }
 		);
@@ -268,9 +267,9 @@ export class MediaPlaceholder extends Component {
 			src,
 		} = this.state;
 		return (
-			<div className="editor-media-placeholder__url-input-container block-editor-media-placeholder__url-input-container">
+			<div className="block-editor-media-placeholder__url-input-container">
 				<Button
-					className="editor-media-placeholder__button block-editor-media-placeholder__button"
+					className="block-editor-media-placeholder__button"
 					onClick={ this.openURLInput }
 					isPressed={ isURLInputVisible }
 					isLarge
@@ -317,10 +316,6 @@ export class MediaPlaceholder extends Component {
 					return (
 						<Button
 							isLarge
-							className={ classnames(
-								'editor-media-placeholder__button',
-								'editor-media-placeholder__media-library-button'
-							) }
 							onClick={ ( event ) => {
 								event.stopPropagation();
 								open();
@@ -348,7 +343,6 @@ export class MediaPlaceholder extends Component {
 										isLarge
 										className={ classnames(
 											'block-editor-media-placeholder__button',
-											'editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
 										icon="upload"
@@ -375,7 +369,6 @@ export class MediaPlaceholder extends Component {
 						isLarge
 						className={ classnames(
 							'block-editor-media-placeholder__button',
-							'editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'
 						) }
 						onChange={ this.onUpload }
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index 77949fec4ff2eb..60e95a148e6e3f 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -123,7 +123,7 @@ const MediaReplaceFlow = (
 		urlInputUIContent = (
 			<LinkViewer
 				isFullWidth={ true }
-				className="editor-format-toolbar__link-container-content block-editor-format-toolbar__link-container-content"
+				className="block-editor-format-toolbar__link-container-content"
 				url={ mediaURLValue }
 				onEditLinkClick={ () => ( setShowEditURLInput( ! showEditURLInput ) ) }
 			/>
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
index bc0bcef9558837..15a1c8302e58f2 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/index.js
+++ b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -19,18 +19,18 @@ function MultiSelectionInspector( { blocks } ) {
 	const words = wordCount( serialize( blocks ), 'words' );
 
 	return (
-		<div className="editor-multi-selection-inspector__card block-editor-multi-selection-inspector__card">
+		<div className="block-editor-multi-selection-inspector__card">
 			<BlockIcon icon={
 				<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" /></SVG>
 			} showColors />
-			<div className="editor-multi-selection-inspector__card-content block-editor-multi-selection-inspector__card-content">
-				<div className="editor-multi-selection-inspector__card-title block-editor-multi-selection-inspector__card-title">
+			<div className="block-editor-multi-selection-inspector__card-content">
+				<div className="block-editor-multi-selection-inspector__card-title">
 					{
 						/* translators: %d: number of blocks */
 						sprintf( _n( '%d block', '%d blocks', blocks.length ), blocks.length )
 					}
 				</div>
-				<div className="editor-multi-selection-inspector__card-description block-editor-multi-selection-inspector__card-description">
+				<div className="block-editor-multi-selection-inspector__card-description">
 					{
 						/* translators: %d: number of words */
 						sprintf( _n( '%d word', '%d words', words ), words )
diff --git a/packages/block-editor/src/components/panel-color-settings/index.js b/packages/block-editor/src/components/panel-color-settings/index.js
index aaa684579a4a88..6ef7a044eb2be1 100644
--- a/packages/block-editor/src/components/panel-color-settings/index.js
+++ b/packages/block-editor/src/components/panel-color-settings/index.js
@@ -89,7 +89,7 @@ export const PanelColorSettings = ifCondition( hasColorsToChoose )(
 		...props
 	} ) => {
 		const titleElement = (
-			<span className="editor-panel-color-settings__panel-title block-editor-panel-color-settings__panel-title">
+			<span className="block-editor-panel-color-settings__panel-title">
 				{ title }
 				{ renderColorIndicators( colorSettings, colors ) }
 			</span>
@@ -97,7 +97,7 @@ export const PanelColorSettings = ifCondition( hasColorsToChoose )(
 
 		return (
 			<PanelBody
-				className="editor-panel-color-settings block-editor-panel-color-settings"
+				className="block-editor-panel-color-settings"
 				title={ titleElement }
 				{ ...props }
 			>
diff --git a/packages/block-editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
index 569bd074451bdf..0be44f8415a846 100644
--- a/packages/block-editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -23,10 +23,10 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
 
 exports[`PanelColorSettings matches the snapshot 2`] = `
 <ForwardRef(PanelBody)
-  className="editor-panel-color-settings block-editor-panel-color-settings"
+  className="block-editor-panel-color-settings"
   title={
     <span
-      className="editor-panel-color-settings__panel-title block-editor-panel-color-settings__panel-title"
+      className="block-editor-panel-color-settings__panel-title"
     >
       Test Title
       <ColorIndicator
@@ -88,10 +88,10 @@ exports[`PanelColorSettings should render a color panel if at least one setting
 
 exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 2`] = `
 <ForwardRef(PanelBody)
-  className="editor-panel-color-settings block-editor-panel-color-settings"
+  className="block-editor-panel-color-settings"
   title={
     <span
-      className="editor-panel-color-settings__panel-title block-editor-panel-color-settings__panel-title"
+      className="block-editor-panel-color-settings__panel-title"
     >
       Test Title
       <ColorIndicator
@@ -157,10 +157,10 @@ exports[`PanelColorSettings should render a color panel if at least one setting
 
 exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 2`] = `
 <ForwardRef(PanelBody)
-  className="editor-panel-color-settings block-editor-panel-color-settings"
+  className="block-editor-panel-color-settings"
   title={
     <span
-      className="editor-panel-color-settings__panel-title block-editor-panel-color-settings__panel-title"
+      className="block-editor-panel-color-settings__panel-title"
     >
       Test Title
       <ColorIndicator
diff --git a/packages/block-editor/src/components/plain-text/index.js b/packages/block-editor/src/components/plain-text/index.js
index b05e48ed60b61c..1893538fe61ee9 100644
--- a/packages/block-editor/src/components/plain-text/index.js
+++ b/packages/block-editor/src/components/plain-text/index.js
@@ -17,7 +17,7 @@ const PlainText = forwardRef( ( { onChange, className, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
 			ref={ ref }
-			className={ classnames( 'editor-plain-text block-editor-plain-text', className ) }
+			className={ classnames( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...props }
 		/>
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
index 0aed5916c0bc48..56b5cf1d0252ee 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -17,7 +17,7 @@ const POPOVER_PROPS = {
 
 const FormatToolbar = () => {
 	return (
-		<div className="editor-format-toolbar block-editor-format-toolbar">
+		<div className="block-editor-format-toolbar">
 			<Toolbar>
 				{ [ 'bold', 'italic', 'link' ].map( ( format ) =>
 					<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 7a73ef6427e7ac..ca996ba661db59 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -38,8 +38,8 @@ import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 import { filePasteHandler } from './file-paste-handler';
 import FormatToolbarContainer from './format-toolbar-container';
 
-const wrapperClasses = 'editor-rich-text block-editor-rich-text';
-const classes = 'editor-rich-text__editable block-editor-rich-text__editable';
+const wrapperClasses = 'block-editor-rich-text';
+const classes = 'block-editor-rich-text__editable';
 
 /**
  * Get the multiline tag based on the multiline prop.
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index a4f233d3533f94..d502cfb62f924e 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/index.js
+++ b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -18,7 +18,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 
 	return (
 		selectedBlockClientId &&
-		<Button isDefault className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
+		<Button isDefault className="block-editor-skip-to-selected-block" onClick={ onClick }>
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	);
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index a1b57e5d3d6548..1eb4912d029d46 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -35,7 +35,7 @@ class URLInputButton extends Component {
 		const buttonLabel = url ? __( 'Edit link' ) : __( 'Insert link' );
 
 		return (
-			<div className="editor-url-input__button block-editor-url-input__button">
+			<div className="block-editor-url-input__button">
 				<IconButton
 					icon="admin-links"
 					label={ buttonLabel }
@@ -45,12 +45,12 @@ class URLInputButton extends Component {
 				/>
 				{ expanded &&
 					<form
-						className="editor-url-input__button-modal block-editor-url-input__button-modal"
+						className="block-editor-url-input__button-modal"
 						onSubmit={ this.submitLink }
 					>
-						<div className="editor-url-input__button-modal-line block-editor-url-input__button-modal-line">
+						<div className="block-editor-url-input__button-modal-line">
 							<IconButton
-								className="editor-url-input__back block-editor-url-input__back"
+								className="block-editor-url-input__back"
 								icon="arrow-left-alt"
 								label={ __( 'Close' ) }
 								onClick={ this.toggle }
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index f61001bb5978e9..9f2e6fd1a7dc8d 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -301,7 +301,7 @@ class URLInput extends Component {
 			<BaseControl
 				label={ label }
 				id={ id }
-				className={ classnames( 'editor-url-input block-editor-url-input', className, {
+				className={ classnames( 'block-editor-url-input', className, {
 					'is-full-width': isFullWidth,
 					'has-border': hasBorder,
 				} ) }
@@ -344,7 +344,6 @@ class URLInput extends Component {
 						<div
 							{ ...suggestionsListProps }
 							className={ classnames(
-								'editor-url-input__suggestions',
 								'block-editor-url-input__suggestions',
 								`${ className }__suggestions`
 							) }
@@ -353,7 +352,7 @@ class URLInput extends Component {
 								<Button
 									{ ...buildSuggestionItemProps( suggestion, index ) }
 									key={ suggestion.id }
-									className={ classnames( 'editor-url-input__suggestion block-editor-url-input__suggestion', {
+									className={ classnames( 'block-editor-url-input__suggestion', {
 										'is-selected': index === selectedSuggestion,
 									} ) }
 									onClick={ () => this.handleOnClick( suggestion ) }
diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js
index e39e4cc478e3e2..776597470f93d7 100644
--- a/packages/block-editor/src/components/url-popover/index.js
+++ b/packages/block-editor/src/components/url-popover/index.js
@@ -49,17 +49,17 @@ class URLPopover extends Component {
 
 		return (
 			<Popover
-				className="editor-url-popover block-editor-url-popover"
+				className="block-editor-url-popover"
 				focusOnMount={ focusOnMount }
 				position={ position }
 				{ ...popoverProps }
 			>
 				<div className="block-editor-url-popover__input-container">
-					<div className="editor-url-popover__row block-editor-url-popover__row">
+					<div className="block-editor-url-popover__row">
 						{ children }
 						{ !! renderSettings && (
 							<IconButton
-								className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
+								className="block-editor-url-popover__settings-toggle"
 								icon="arrow-down-alt2"
 								label={ __( 'Link settings' ) }
 								onClick={ this.toggleSettingsVisibility }
@@ -68,7 +68,7 @@ class URLPopover extends Component {
 						) }
 					</div>
 					{ showSettings && (
-						<div className="editor-url-popover__row block-editor-url-popover__row editor-url-popover__settings block-editor-url-popover__settings">
+						<div className="block-editor-url-popover__row block-editor-url-popover__settings">
 							{ renderSettings() }
 						</div>
 					) }
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
index c6d7ebe5091efb..f93e04fed4cf46 100644
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
 
 exports[`URLPopover matches the snapshot in its default state 1`] = `
 <Popover
-  className="editor-url-popover block-editor-url-popover"
+  className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
 >
@@ -10,14 +10,14 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
     className="block-editor-url-popover__input-container"
   >
     <div
-      className="editor-url-popover__row block-editor-url-popover__row"
+      className="block-editor-url-popover__row"
     >
       <div>
         Editor
       </div>
       <ForwardRef(IconButton)
         aria-expanded={false}
-        className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
+        className="block-editor-url-popover__settings-toggle"
         icon="arrow-down-alt2"
         label="Link settings"
         onClick={[Function]}
@@ -29,7 +29,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 
 exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
 <Popover
-  className="editor-url-popover block-editor-url-popover"
+  className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
 >
@@ -37,21 +37,21 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
     className="block-editor-url-popover__input-container"
   >
     <div
-      className="editor-url-popover__row block-editor-url-popover__row"
+      className="block-editor-url-popover__row"
     >
       <div>
         Editor
       </div>
       <ForwardRef(IconButton)
         aria-expanded={true}
-        className="editor-url-popover__settings-toggle block-editor-url-popover__settings-toggle"
+        className="block-editor-url-popover__settings-toggle"
         icon="arrow-down-alt2"
         label="Link settings"
         onClick={[Function]}
       />
     </div>
     <div
-      className="editor-url-popover__row block-editor-url-popover__row editor-url-popover__settings block-editor-url-popover__settings"
+      className="block-editor-url-popover__row block-editor-url-popover__settings"
     >
       <div>
         Settings
@@ -63,7 +63,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 
 exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <Popover
-  className="editor-url-popover block-editor-url-popover"
+  className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
 >
@@ -71,7 +71,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
     className="block-editor-url-popover__input-container"
   >
     <div
-      className="editor-url-popover__row block-editor-url-popover__row"
+      className="block-editor-url-popover__row"
     >
       <div>
         Editor
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 38e7dc18a64508..d97f7363e8b21e 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -12,14 +12,14 @@ import { __ } from '@wordpress/i18n';
 
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
-		<div className={ classnames( className, 'editor-warning block-editor-warning' ) }>
-			<div className="editor-warning__contents block-editor-warning__contents">
-				<p className="editor-warning__message block-editor-warning__message">{ children }</p>
+		<div className={ classnames( className, 'block-editor-warning' ) }>
+			<div className="block-editor-warning__contents">
+				<p className="block-editor-warning__message">{ children }</p>
 
 				{ Children.count( actions ) > 0 && (
-					<div className="editor-warning__actions block-editor-warning__actions">
+					<div className="block-editor-warning__actions">
 						{ Children.map( actions, ( action, i ) => (
-							<span key={ i } className="editor-warning__action block-editor-warning__action">
+							<span key={ i } className="block-editor-warning__action">
 								{ action }
 							</span>
 						) ) }
@@ -29,7 +29,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 
 			{ secondaryActions && (
 				<Dropdown
-					className="editor-warning__secondary block-editor-warning__secondary"
+					className="block-editor-warning__secondary"
 					position="bottom left"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<IconButton
diff --git a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
index de9e8358fdb80b..8025afed4c550e 100644
--- a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Warning should match snapshot 1`] = `
 <div
-  className="editor-warning block-editor-warning"
+  className="block-editor-warning"
 >
   <div
-    className="editor-warning__contents block-editor-warning__contents"
+    className="block-editor-warning__contents"
   >
     <p
-      className="editor-warning__message block-editor-warning__message"
+      className="block-editor-warning__message"
     >
       error
     </p>
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index cd9355bcf2a36e..5606559f7ad583 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -384,7 +384,7 @@ class WritingFlow extends Component {
 		// bubbling events from children to determine focus transition intents.
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
-			<div className="editor-writing-flow block-editor-writing-flow">
+			<div className="block-editor-writing-flow">
 				<div
 					ref={ this.bindContainer }
 					onKeyDown={ this.onKeyDown }
@@ -397,7 +397,7 @@ class WritingFlow extends Component {
 					aria-hidden
 					tabIndex={ -1 }
 					onClick={ this.focusLastTextField }
-					className="editor-writing-flow__click-redirect block-editor-writing-flow__click-redirect"
+					className="block-editor-writing-flow__click-redirect"
 				/>
 			</div>
 		);
diff --git a/packages/block-editor/src/utils/test/dom.js b/packages/block-editor/src/utils/test/dom.js
index 45533fa436a199..69e740f629f48d 100644
--- a/packages/block-editor/src/utils/test/dom.js
+++ b/packages/block-editor/src/utils/test/dom.js
@@ -7,8 +7,8 @@ describe( 'hasInnerBlocksContext()', () => {
 	it( 'should return false for a block node which has no inner blocks', () => {
 		const wrapper = document.createElement( 'div' );
 		wrapper.innerHTML = (
-			'<div class="editor-block-list__block block-editor-block-list__block" data-type="core/paragraph" tabindex="0">' +
-			'	<div class="editor-block-list__block-edit block-editor-block-list__block-edit" aria-label="Block: Paragraph">' +
+			'<div class="block-editor-block-list__block" data-type="core/paragraph" tabindex="0">' +
+			'	<div class="block-editor-block-list__block-edit" aria-label="Block: Paragraph">' +
 			'		<p contenteditable="true">This is a test.</p>' +
 			'	</div>' +
 			'</div>'
@@ -21,11 +21,11 @@ describe( 'hasInnerBlocksContext()', () => {
 	it( 'should return true for a block node which contains inner blocks', () => {
 		const wrapper = document.createElement( 'div' );
 		wrapper.innerHTML = (
-			'<div class="editor-block-list__block block-editor-block-list__block" data-type="core/columns" tabindex="0">' +
-			'	<div class="editor-block-list__block-edit block-editor-block-list__block-edit" aria-label="Block: Columns (beta)">' +
+			'<div class="block-editor-block-list__block" data-type="core/columns" tabindex="0">' +
+			'	<div class="block-editor-block-list__block-edit" aria-label="Block: Columns (beta)">' +
 			'		<div class="wp-block-columns has-2-columns">' +
-			'			<div class="editor-block-list__layout block-editor-block-list__layout"></div>' +
-			'			<div class="editor-block-list__layout block-editor-block-list__layout"></div>' +
+			'			<div class="block-editor-block-list__layout"></div>' +
+			'			<div class="block-editor-block-list__layout"></div>' +
 			'		</div>' +
 			'	</div>' +
 			'</div>'
diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss
index 6c86bb9221af0b..12c2bcfc1ef8fa 100644
--- a/packages/block-library/src/block/edit-panel/editor.scss
+++ b/packages/block-library/src/block/edit-panel/editor.scss
@@ -65,7 +65,7 @@
 	}
 }
 
-.editor-block-list__layout .is-selected .reusable-block-edit-panel {
+.block-editor-block-list__layout .is-selected .reusable-block-edit-panel {
 	border-color: $dark-opacity-light-800;
 	border-left-color: transparent;
 
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index c36f1b96b055a3..4c630758b7adaf 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -254,7 +254,7 @@ div[data-type="core/freeform"] {
 		border-left-color: transparent;
 	}
 
-	.editor-block-contextual-toolbar + div {
+	.block-editor-block-contextual-toolbar + div {
 		margin-top: 0;
 		padding-top: 0;
 	}
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 17d9a5a7b12afe..7c4be56fe335ff 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -2,9 +2,9 @@
 // This is sort of an experiment at making sure the editor looks as much like the end result as possible
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
 // When using CSS grid, margins do not collapse on the container.
-.wp-block-columns .editor-block-list__layout {
+.wp-block-columns .block-editor-block-list__layout {
 	// This max-width is used to constrain the main editor column, it should not cascade into columns
-	.editor-block-list__block {
+	.block-editor-block-list__block {
 		max-width: none;
 	}
 }
@@ -12,7 +12,7 @@
 .wp-block-columns {
 	display: block;
 
-	> .editor-inner-blocks > .editor-block-list__layout {
+	> .block-editor-inner-blocks > .block-editor-block-list__layout {
 		display: flex;
 
 		// Responsiveness: Allow wrapping on mobile.
@@ -23,9 +23,9 @@
 		}
 		// Set full heights on Columns to enable vertical alignment preview
 		> [data-type="core/column"],
-		> [data-type="core/column"] > .editor-block-list__block-edit,
-		> [data-type="core/column"] > .editor-block-list__block-edit > div[data-block],
-		> [data-type="core/column"] > .editor-block-list__block-edit .block-core-columns {
+		> [data-type="core/column"] > .block-editor-block-list__block-edit,
+		> [data-type="core/column"] > .block-editor-block-list__block-edit > div[data-block],
+		> [data-type="core/column"] > .block-editor-block-list__block-edit .block-core-columns {
 			display: flex;
 			flex-direction: column;
 
@@ -81,7 +81,7 @@
 				}
 			}
 
-			> .editor-block-list__block-edit {
+			> .block-editor-block-list__block-edit {
 				margin-top: 0;
 				margin-bottom: 0;
 
@@ -91,7 +91,7 @@
 					right: 0;
 				}
 
-				> .editor-block-contextual-toolbar {
+				> .block-editor-block-contextual-toolbar {
 					margin-left: -$border-width;
 				}
 
@@ -104,7 +104,7 @@
 				// The Columns block is a flex-container, therefore it nullifies margin collapsing.
 				// Therefore, blocks inside this will appear to create a double margin.
 				// We compensate for this using negative margins.
-				> div > .block-core-columns > .editor-inner-blocks {
+				> div > .block-core-columns > .block-editor-inner-blocks {
 					margin-top: -$default-block-margin;
 					margin-bottom: -$default-block-margin;
 				}
@@ -152,7 +152,7 @@ div.block-core-columns.is-vertically-aligned-bottom {
 /**
  * Fixes single Column breadcrumb position.
  */
-[data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb {
+[data-type="core/column"] > .block-editor-block-list__block-edit > .editor-block-list__breadcrumb {
 	left: -$block-left-border-width;
 }
 
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index 2023cab5e5b65f..75222a004b93fe 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -8,7 +8,7 @@ exports[`core/embed block edit matches snapshot 1`] = `
     class="components-placeholder__label"
   >
     <span
-      class="editor-block-icon block-editor-block-icon has-colors"
+      class="block-editor-block-icon has-colors"
     >
       <svg
         aria-hidden="true"
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 9ef7f28eae6b4d..7e5581943f3f41 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -5,20 +5,20 @@
 
 	// Ensure not rendering outside the element
 	// as -1px causes overflow-x scrollbars
-	.editor-block-list__insertion-point {
+	.block-editor-block-list__insertion-point {
 		left: 0;
 		right: 0;
 	}
 
 	// Only applied when background is added to cancel out padding
-	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks {
+	> .block-editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks {
 		margin-top: -#{$block-padding*2 + $block-spacing};
 		margin-bottom: -#{$block-padding*2 + $block-spacing};
 	}
 
 	// Full Width Blocks
 	// specificity required to only target immediate child Blocks of a Group
-	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+	> .block-editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
 		margin-left: auto;
 		margin-right: auto;
 		padding-left: $block-padding*2;
@@ -31,7 +31,7 @@
 	}
 
 	// Full Width Blocks with a background (ie: has padding)
-	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+	> .block-editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
 		// note: using position `left` causes hoz scrollbars so
 		// we opt to use margin instead
 		// the 30px matches the hoz padding applied in `theme.scss`
@@ -51,13 +51,13 @@
 .wp-block[data-type="core/group"][data-align="full"] {
 
 	// First tier of InnerBlocks must act like the container of the standard canvas
-	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks {
+	> .block-editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks {
 		margin-left: auto;
 		margin-right: auto;
 		padding-left: 0;
 		padding-right: 0;
 
-		> .editor-block-list__layout {
+		> .block-editor-block-list__layout {
 			margin-left: 0;
 			margin-right: 0;
 		}
@@ -65,7 +65,7 @@
 
 	// Full Width Blocks
 	// specificity required to only target immediate child Blocks of Group
-	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+	> .block-editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
 		padding-right: 0;
 		padding-left: 0;
 		left: 0;
@@ -73,7 +73,7 @@
 		max-width: none;
 
 		// Allow to be flush with the edges of the canvas
-		> .editor-block-list__block-edit {
+		> .block-editor-block-list__block-edit {
 			margin-left: 0;
 			margin-right: 0;
 		}
@@ -81,7 +81,7 @@
 
 	// Full Width Blocks with a background (ie: has padding)
 	// note: also duplicated above for all Group widths
-	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+	> .block-editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
 		width: calc(100% + 60px);
 	}
 }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 5f6cabb151f90b..5c67b8c8e4e1a8 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -42,7 +42,7 @@
 	grid-row: 1;
 }
 
-.wp-block-media-text .editor-inner-blocks {
+.wp-block-media-text .block-editor-inner-blocks {
 	word-break: break-word;
 	grid-column: 2;
 	grid-row: 1;
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index bcd2b4edf99d9a..7b1c5d639285dc 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -1,11 +1,11 @@
 // Editor specific styles for Social Links.
 .wp-block-social-links {
-	div.editor-url-input {
+	div.block-editor-url-input {
 		display: inline-block;
 		margin-left: $grid-size;
 	}
 
-	.editor-block-list__layout {
+	.block-editor-block-list__layout {
 		display: flex;
 		justify-content: flex-start;
 	}
diff --git a/packages/e2e-tests/specs/editor/blocks/group.test.js b/packages/e2e-tests/specs/editor/blocks/group.test.js
index 7ce9021d26bd4b..309a6e872bb1fa 100644
--- a/packages/e2e-tests/specs/editor/blocks/group.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/group.test.js
@@ -15,7 +15,7 @@ describe( 'Group', () => {
 
 	it( 'can be created using the block inserter', async () => {
 		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
+		await page.click( '.block-editor-block-list-item-group' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -30,9 +30,9 @@ describe( 'Group', () => {
 
 	it( 'can have other blocks appended to it using the button appender', async () => {
 		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
+		await page.click( '.block-editor-block-list-item-group' );
 		await page.click( '.block-editor-button-block-appender' );
-		await page.click( '.editor-block-list-item-paragraph' );
+		await page.click( '.block-editor-block-list-item-paragraph' );
 		await page.keyboard.type( 'Group Block with a Paragraph' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
index beb4e9b8a206e5..ed29927f1af8c0 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
@@ -2,6 +2,6 @@
 
 exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;
 
-exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-pressed\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-pressed\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
 
-exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-pressed\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-pressed\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-star-filled\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;
diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
index 74f8f81bf67e3f..92689539fb5e84 100644
--- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -28,7 +28,7 @@ describe( 'cpt locking', () => {
 	};
 
 	const shouldNotAllowBlocksToBeRemoved = async () => {
-		await page.type( '.editor-rich-text__editable.wp-block-paragraph', 'p1' );
+		await page.type( '.block-editor-rich-text__editable.wp-block-paragraph', 'p1' );
 		await clickBlockToolbarButton( 'More options' );
 		expect(
 			await page.$x( '//button[contains(text(), "Remove Block")]' )
@@ -36,12 +36,12 @@ describe( 'cpt locking', () => {
 	};
 
 	const shouldAllowBlocksToBeMoved = async () => {
-		await page.click( '.editor-rich-text__editable.wp-block-paragraph' );
+		await page.click( '.block-editor-rich-text__editable.wp-block-paragraph' );
 		expect(
 			await page.$( 'button[aria-label="Move up"]' )
 		).not.toBeNull();
 		await page.click( 'button[aria-label="Move up"]' );
-		await page.type( '.editor-rich-text__editable.wp-block-paragraph', 'p1' );
+		await page.type( '.block-editor-rich-text__editable.wp-block-paragraph', 'p1' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	};
 
@@ -55,7 +55,7 @@ describe( 'cpt locking', () => {
 		it( 'should not allow blocks to be removed', shouldNotAllowBlocksToBeRemoved );
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click( '.editor-rich-text__editable.wp-block-paragraph' );
+			await page.click( '.block-editor-rich-text__editable.wp-block-paragraph' );
 			expect(
 				await page.$( 'button[aria-label="Move up"]' )
 			).toBeNull();
@@ -111,7 +111,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should allow blocks to be removed', async () => {
-			await page.type( '.editor-rich-text__editable.wp-block-paragraph', 'p1' );
+			await page.type( '.block-editor-rich-text__editable.wp-block-paragraph', 'p1' );
 			await clickBlockToolbarButton( 'More options' );
 			const [ removeBlock ] = await page.$x( '//button[contains(text(), "Remove Block")]' );
 			await removeBlock.click();
diff --git a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-group.js b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-group.js
index a762c52a9f2a3a..435f912ce03a88 100644
--- a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-group.js
+++ b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-group.js
@@ -17,7 +17,7 @@ const PluginBlockSettingsMenuGroupSlot = ( { fillProps, selectedBlocks } ) => {
 		<Slot fillProps={ { ...fillProps, selectedBlocks } } >
 			{ ( fills ) => ! isEmpty( fills ) && (
 				<>
-					<div className="editor-block-settings-menu__separator block-editor-block-settings-menu__separator" />
+					<div className="block-editor-block-settings-menu__separator" />
 					{ fills }
 				</>
 			) }
diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
index cf73fe27de92f7..bc2f4d000cb16b 100644
--- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js
+++ b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
@@ -36,7 +36,7 @@ export function BlockInspectorButton( {
 
 	return (
 		<MenuItem
-			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+			className="block-editor-block-settings-menu__control"
 			onClick={ flow( areAdvancedSettingsOpened ? closeSidebar : openEditorSidebar, speakMessage, onClick ) }
 			icon="admin-generic"
 			shortcut={ shortcuts.toggleSidebar }

From acdb78001b49c76e1fa3e3929ef1f13117a3b13f Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 10 Dec 2019 13:11:49 -0500
Subject: [PATCH 2/3] Block Editor: Update lingering references to legacy block
 icon class

---
 .../edit-post/src/components/manage-blocks-modal/style.scss     | 2 +-
 packages/editor/src/components/autocompleters/style.scss        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index a763b04483bb11..0c61db4e232b1f 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -112,7 +112,7 @@
 		padding: 0.6rem 0 0.6rem 10px;
 	}
 
-	.editor-block-icon {
+	.block-editor-block-icon {
 		margin-right: 10px;
 		fill: $dark-gray-500;
 	}
diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss
index d41748a13d27ed..48a6e1fb299ec7 100644
--- a/packages/editor/src/components/autocompleters/style.scss
+++ b/packages/editor/src/components/autocompleters/style.scss
@@ -1,5 +1,5 @@
 .editor-autocompleters__block {
-	.editor-block-icon {
+	.block-editor-block-icon {
 		margin-right: 8px;
 	}
 }

From 81761ee0e49a431b061aa97fe6ae3d54aae48731 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 10 Dec 2019 16:08:58 -0500
Subject: [PATCH 3/3] E2E Tests: Restore expected block menu class name for
 group block

See: https://github.com/WordPress/gutenberg/blob/e6f9765/packages/blocks/src/api/serializer.js#L45-L58
---
 packages/e2e-tests/specs/editor/blocks/group.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/blocks/group.test.js b/packages/e2e-tests/specs/editor/blocks/group.test.js
index 309a6e872bb1fa..7ce9021d26bd4b 100644
--- a/packages/e2e-tests/specs/editor/blocks/group.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/group.test.js
@@ -15,7 +15,7 @@ describe( 'Group', () => {
 
 	it( 'can be created using the block inserter', async () => {
 		await searchForBlock( 'Group' );
-		await page.click( '.block-editor-block-list-item-group' );
+		await page.click( '.editor-block-list-item-group' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -30,9 +30,9 @@ describe( 'Group', () => {
 
 	it( 'can have other blocks appended to it using the button appender', async () => {
 		await searchForBlock( 'Group' );
-		await page.click( '.block-editor-block-list-item-group' );
+		await page.click( '.editor-block-list-item-group' );
 		await page.click( '.block-editor-button-block-appender' );
-		await page.click( '.block-editor-block-list-item-paragraph' );
+		await page.click( '.editor-block-list-item-paragraph' );
 		await page.keyboard.type( 'Group Block with a Paragraph' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();