Block Editor: Remove legacy "editor-" class name compatibility (#19050)

* Block Editor: Remove legacy "editor-" class name compatibility

* Block Editor: Update lingering references to legacy block icon class

* 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/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.

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>

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 }

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}

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 }

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 }
 			) }

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 }
 							>

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' ) }
 		>

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 ) }

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 }

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 }

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 } />

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
 			) }
 		>

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,
 					} )
 				}

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,

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;
 	}
 }

packages/block-editor/src/components/block-mover/test/index.js

@@ -42,15 +42,15 @@ 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,
 				'aria-disabled': undefined,
 				'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,

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 }
 					/>

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 ] }

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 }

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;
 	}
 

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"
 		>

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"
 		>