diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
index a4f08d0c96a36..c31095753d206 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -21,26 +21,16 @@ export const Edit = ( props ) => {
return null;
}
- // `edit` and `save` are functions or components describing the markup
- // with which a block is displayed. If `blockType` is valid, assign
- // them preferentially as the render value for the block.
- const Component = blockType.edit || blockType.save;
- const lightBlockWrapper = hasBlockSupport(
- blockType,
- 'lightBlockWrapper',
- false
- );
-
- if ( lightBlockWrapper ) {
- return ;
- }
-
// Generate a class name for the block's editable form
const generatedClassName = hasBlockSupport( blockType, 'className', true )
? getBlockDefaultClassName( name )
: null;
const className = classnames( generatedClassName, attributes.className );
+ // `edit` and `save` are functions or components describing the markup
+ // with which a block is displayed. If `blockType` is valid, assign
+ // them preferentially as the render value for the block.
+ const Component = blockType.edit || blockType.save;
return ;
};
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 78d7f4fe399dc..c8472aac6bf4a 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -14,7 +14,6 @@ import {
isUnmodifiedDefaultBlock,
getUnregisteredTypeHandlerName,
hasBlockSupport,
- getBlockDefaultClassName,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { withDispatch, withSelect, useSelect } from '@wordpress/data';
@@ -96,18 +95,11 @@ function BlockListBlock( {
}
const isAligned = wrapperProps && wrapperProps[ 'data-align' ];
- const generatedClassName =
- lightBlockWrapper && hasBlockSupport( blockType, 'className', true )
- ? getBlockDefaultClassName( name )
- : null;
- const customClassName = lightBlockWrapper ? attributes.className : null;
// The wp-block className is important for editor styles.
// Generate the wrapper class names handling the different states of the
// block.
const wrapperClassName = classnames(
- generatedClassName,
- customClassName,
'wp-block block-editor-block-list__block',
{
'has-selected-ui': hasSelectedUI,
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index 1664bff4ffeb5..6d2042a047c85 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -21,12 +21,13 @@ import { __ } from '@wordpress/i18n';
function ColumnEdit( {
attributes,
setAttributes,
+ className,
updateAlignment,
hasChildBlocks,
} ) {
const { verticalAlignment, width } = attributes;
- const classes = classnames( 'block-core-columns', {
+ const classes = classnames( className, 'block-core-columns', {
[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
} );
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 372e535a931a8..97142b2c72001 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -44,6 +44,7 @@ const ALLOWED_BLOCKS = [ 'core/column' ];
function ColumnsEditContainer( {
attributes,
+ className,
updateAlignment,
updateColumns,
clientId,
@@ -59,7 +60,7 @@ function ColumnsEditContainer( {
[ clientId ]
);
- const classes = classnames( {
+ const classes = classnames( className, {
[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
} );
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index cc68a15f0d79b..55c42beb6e3c9 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -24,7 +24,13 @@ import {
} from '@wordpress/block-editor';
import { useRef, Platform } from '@wordpress/element';
-function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
+function HeadingEdit( {
+ attributes,
+ setAttributes,
+ mergeBlocks,
+ onReplace,
+ className,
+} ) {
const ref = useRef();
const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors(
[ { name: 'textColor', property: 'color' } ],
@@ -95,7 +101,7 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
} }
onReplace={ onReplace }
onRemove={ () => onReplace( [] ) }
- className={ classnames( {
+ className={ classnames( className, {
[ `has-text-align-${ align }` ]: align,
} ) }
placeholder={ placeholder || __( 'Write heading…' ) }
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index d10f443e2d4f8..177a57f99c0ee 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -37,6 +37,7 @@ export default function ListEdit( {
setAttributes,
mergeBlocks,
onReplace,
+ className,
isSelected,
} ) {
const { ordered, values, type, reversed, start } = attributes;
@@ -152,6 +153,7 @@ export default function ListEdit( {
setAttributes( { values: nextValues } )
}
value={ values }
+ className={ className }
placeholder={ __( 'Write list…' ) }
onMerge={ mergeBlocks }
onSplit={ ( value ) =>
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 105b1a502c763..456c2e0282035 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -75,6 +75,7 @@ function useDropCapMinimumHeight( isDropCap, deps ) {
function ParagraphBlock( {
attributes,
+ className,
fontSize,
mergeBlocks,
onReplace,
@@ -152,11 +153,15 @@ function ParagraphBlock( {
ref={ ref }
identifier="content"
tagName={ Block.p }
- className={ classnames( {
- 'has-drop-cap': dropCap,
- [ `has-text-align-${ align }` ]: align,
- [ fontSize.class ]: fontSize.class,
- } ) }
+ className={ classnames(
+ 'wp-block-paragraph',
+ className,
+ {
+ 'has-drop-cap': dropCap,
+ [ `has-text-align-${ align }` ]: align,
+ [ fontSize.class ]: fontSize.class,
+ }
+ ) }
style={ {
fontSize: fontSize.size
? fontSize.size + 'px'
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 7c559bc6b3169..bd3dcbbdad25e 100644
--- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -29,7 +29,7 @@ describe( 'cpt locking', () => {
const shouldNotAllowBlocksToBeRemoved = async () => {
await page.type(
- '.block-editor-rich-text__editable[data-type="core/paragraph"]',
+ '.block-editor-rich-text__editable.wp-block-paragraph',
'p1'
);
await clickBlockToolbarButton( 'More options' );
@@ -40,7 +40,7 @@ describe( 'cpt locking', () => {
const shouldAllowBlocksToBeMoved = async () => {
await page.click(
- '.block-editor-rich-text__editable[data-type="core/paragraph"]'
+ '.block-editor-rich-text__editable.wp-block-paragraph'
);
// Hover the block switcher to show the movers
await page.hover(
@@ -49,7 +49,7 @@ describe( 'cpt locking', () => {
expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
await page.click( 'button[aria-label="Move up"]' );
await page.type(
- '.block-editor-rich-text__editable[data-type="core/paragraph"]',
+ '.block-editor-rich-text__editable.wp-block-paragraph',
'p1'
);
expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -69,7 +69,7 @@ describe( 'cpt locking', () => {
it( 'should not allow blocks to be moved', async () => {
await page.click(
- '.block-editor-rich-text__editable[data-type="core/paragraph"]'
+ '.block-editor-rich-text__editable.wp-block-paragraph'
);
expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
} );
@@ -135,7 +135,7 @@ describe( 'cpt locking', () => {
it( 'should allow blocks to be removed', async () => {
await page.type(
- '.block-editor-rich-text__editable[data-type="core/paragraph"]',
+ '.block-editor-rich-text__editable.wp-block-paragraph',
'p1'
);
await clickBlockToolbarButton( 'More options' );
diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
index 5d5318b97337c..24d01d7abaf72 100644
--- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
@@ -13,7 +13,7 @@ import {
describe( 'Allowed Blocks Setting on InnerBlocks ', () => {
const paragraphSelector =
- '.block-editor-rich-text__editable[data-type="core/paragraph"]';
+ '.block-editor-rich-text__editable.wp-block-paragraph';
beforeAll( async () => {
await activatePlugin( 'gutenberg-test-innerblocks-allowed-blocks' );
} );
diff --git a/packages/e2e-tests/specs/editor/various/autosave.test.js b/packages/e2e-tests/specs/editor/various/autosave.test.js
index 5780302794aac..a4f6d83b85eb8 100644
--- a/packages/e2e-tests/specs/editor/various/autosave.test.js
+++ b/packages/e2e-tests/specs/editor/various/autosave.test.js
@@ -310,7 +310,7 @@ describe( 'autosave', () => {
await page.keyboard.type( 'before publish' );
await publishPost();
- await page.click( '[data-type="core/paragraph"]' );
+ await page.click( '.wp-block-paragraph' );
await page.keyboard.type( ' after publish' );
// Trigger remote autosave
diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index 7037e53a74736..832cf25d7d4fa 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -259,7 +259,7 @@ describe( 'Multi-block selection', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '2' );
await page.keyboard.down( 'Shift' );
- await page.click( '[data-type="core/paragraph"]' );
+ await page.click( '.wp-block-paragraph' );
await page.keyboard.up( 'Shift' );
await testNativeSelection();
@@ -275,7 +275,7 @@ describe( 'Multi-block selection', () => {
const [ coord1, coord2 ] = await page.evaluate( () => {
const elements = Array.from(
- document.querySelectorAll( '[data-type="core/paragraph"]' )
+ document.querySelectorAll( '.wp-block-paragraph' )
);
const rect1 = elements[ 0 ].getBoundingClientRect();
const rect2 = elements[ 1 ].getBoundingClientRect();
@@ -311,7 +311,7 @@ describe( 'Multi-block selection', () => {
const [ coord1, coord2 ] = await page.evaluate( () => {
const elements = Array.from(
- document.querySelectorAll( '[data-type="core/paragraph"]' )
+ document.querySelectorAll( '.wp-block-paragraph' )
);
const rect1 = elements[ 0 ].getBoundingClientRect();
const rect2 = elements[ 1 ].getBoundingClientRect();
@@ -387,9 +387,7 @@ describe( 'Multi-block selection', () => {
const range = selection.getRangeAt( 0 );
const rect1 = range.getClientRects()[ 0 ];
- const element = document.querySelector(
- '[data-type="core/paragraph"]'
- );
+ const element = document.querySelector( '.wp-block-paragraph' );
const rect2 = element.getBoundingClientRect();
return [
@@ -431,7 +429,7 @@ describe( 'Multi-block selection', () => {
const [ coord1, coord2 ] = await page.evaluate( () => {
const elements = Array.from(
- document.querySelectorAll( '[data-type="core/paragraph"]' )
+ document.querySelectorAll( '.wp-block-paragraph' )
);
const rect1 = elements[ 2 ].getBoundingClientRect();
const rect2 = elements[ 1 ].getBoundingClientRect();
@@ -474,9 +472,7 @@ describe( 'Multi-block selection', () => {
expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
const coord = await page.evaluate( () => {
- const element = document.querySelector(
- '[data-type="core/paragraph"]'
- );
+ const element = document.querySelector( '.wp-block-paragraph' );
const rect = element.getBoundingClientRect();
return {
x: rect.x - 1,
diff --git a/packages/e2e-tests/specs/editor/various/undo.test.js b/packages/e2e-tests/specs/editor/various/undo.test.js
index 3f2f5d3b752d1..c37cba5b95f75 100644
--- a/packages/e2e-tests/specs/editor/various/undo.test.js
+++ b/packages/e2e-tests/specs/editor/various/undo.test.js
@@ -173,7 +173,7 @@ describe( 'undo', () => {
await page.keyboard.type( 'test' );
await saveDraft();
await page.reload();
- await page.click( '[data-type="core/paragraph"]' );
+ await page.click( '.wp-block-paragraph' );
await pressKeyWithModifier( 'primary', 'a' );
await pressKeyWithModifier( 'primary', 'b' );
await pressKeyWithModifier( 'primary', 'z' );
@@ -397,7 +397,7 @@ describe( 'undo', () => {
await page.$( '.editor-history__undo[aria-disabled="true"]' )
).not.toBeNull();
- await page.click( '[data-type="core/paragraph"]' );
+ await page.click( '.wp-block-paragraph' );
await page.keyboard.type( '2' );