Light block: automatically add block class

packages/block-editor/src/components/block-edit/edit.js

@@ -21,16 +21,26 @@ 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 <Component { ...props } />;
+	}
+
 	// 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 <Component { ...props } className={ className } />;
 };
 

packages/block-editor/src/components/block-list/block.js

@@ -14,6 +14,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	getUnregisteredTypeHandlerName,
 	hasBlockSupport,
+	getBlockDefaultClassName,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, withSelect, useSelect } from '@wordpress/data';
@@ -94,11 +95,18 @@ 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,

packages/block-library/src/column/edit.js

@@ -21,13 +21,12 @@ import { __ } from '@wordpress/i18n';
 function ColumnEdit( {
 	attributes,
 	setAttributes,
-	className,
 	updateAlignment,
 	hasChildBlocks,
 } ) {
 	const { verticalAlignment, width } = attributes;
 
-	const classes = classnames( className, 'block-core-columns', {
+	const classes = classnames( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 

packages/block-library/src/columns/edit.js

@@ -46,7 +46,6 @@ const ALLOWED_BLOCKS = [ 'core/column' ];
 
 function ColumnsEditContainer( {
 	attributes,
-	className,
 	updateAlignment,
 	updateColumns,
 	clientId,
@@ -78,7 +77,7 @@ function ColumnsEditContainer( {
 		}
 	);
 
-	const classes = classnames( className, {
+	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 

packages/block-library/src/heading/edit.js

@@ -24,13 +24,7 @@ import {
 } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 
-function HeadingEdit( {
-	attributes,
-	setAttributes,
-	mergeBlocks,
-	onReplace,
-	className,
-} ) {
+function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 	const ref = useRef();
 	const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors(
 		[ { name: 'textColor', property: 'color' } ],
@@ -99,7 +93,7 @@ function HeadingEdit( {
 					} }
 					onReplace={ onReplace }
 					onRemove={ () => onReplace( [] ) }
-					className={ classnames( className, {
+					className={ classnames( {
 						[ `has-text-align-${ align }` ]: align,
 					} ) }
 					placeholder={ placeholder || __( 'Write heading…' ) }

packages/block-library/src/list/edit.js

@@ -37,7 +37,6 @@ export default function ListEdit( {
 	setAttributes,
 	mergeBlocks,
 	onReplace,
-	className,
 	isSelected,
 } ) {
 	const { ordered, values, type, reversed, start } = attributes;
@@ -153,7 +152,6 @@ export default function ListEdit( {
 					setAttributes( { values: nextValues } )
 				}
 				value={ values }
-				className={ className }
 				placeholder={ __( 'Write list…' ) }
 				onMerge={ mergeBlocks }
 				onSplit={ ( value ) =>

packages/block-library/src/paragraph/edit.js

@@ -75,7 +75,6 @@ function useDropCapMinimumHeight( isDropCap, deps ) {
 
 function ParagraphBlock( {
 	attributes,
-	className,
 	fontSize,
 	mergeBlocks,
 	onReplace,
@@ -153,15 +152,11 @@ function ParagraphBlock( {
 						ref={ ref }
 						identifier="content"
 						tagName={ Block.p }
-						className={ classnames(
-							'wp-block-paragraph',
-							className,
-							{
-								'has-drop-cap': dropCap,
-								[ `has-text-align-${ align }` ]: align,
-								[ fontSize.class ]: fontSize.class,
-							}
-						) }
+						className={ classnames( {
+							'has-drop-cap': dropCap,
+							[ `has-text-align-${ align }` ]: align,
+							[ fontSize.class ]: fontSize.class,
+						} ) }
 						style={ {
 							fontSize: fontSize.size
 								? fontSize.size + 'px'

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.wp-block-paragraph',
+			'.block-editor-rich-text__editable[data-type="core/paragraph"]',
 			'p1'
 		);
 		await clickBlockToolbarButton( 'More options' );
@@ -40,7 +40,7 @@ describe( 'cpt locking', () => {
 
 	const shouldAllowBlocksToBeMoved = async () => {
 		await page.click(
-			'.block-editor-rich-text__editable.wp-block-paragraph'
+			'.block-editor-rich-text__editable[data-type="core/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.wp-block-paragraph',
+			'.block-editor-rich-text__editable[data-type="core/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.wp-block-paragraph'
+				'.block-editor-rich-text__editable[data-type="core/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.wp-block-paragraph',
+				'.block-editor-rich-text__editable[data-type="core/paragraph"]',
 				'p1'
 			);
 			await clickBlockToolbarButton( 'More options' );

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.wp-block-paragraph';
+		'.block-editor-rich-text__editable[data-type="core/paragraph"]';
 	beforeAll( async () => {
 		await activatePlugin( 'gutenberg-test-innerblocks-allowed-blocks' );
 	} );

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( '.wp-block-paragraph' );
+		await page.click( '[data-type="core/paragraph"]' );
 		await page.keyboard.type( ' after publish' );
 
 		// Trigger remote autosave

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( '.wp-block-paragraph' );
+		await page.click( '[data-type="core/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( '.wp-block-paragraph' )
+				document.querySelectorAll( '[data-type="core/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( '.wp-block-paragraph' )
+				document.querySelectorAll( '[data-type="core/paragraph"]' )
 			);
 			const rect1 = elements[ 0 ].getBoundingClientRect();
 			const rect2 = elements[ 1 ].getBoundingClientRect();
@@ -387,7 +387,9 @@ describe( 'Multi-block selection', () => {
 
 			const range = selection.getRangeAt( 0 );
 			const rect1 = range.getClientRects()[ 0 ];
-			const element = document.querySelector( '.wp-block-paragraph' );
+			const element = document.querySelector(
+				'[data-type="core/paragraph"]'
+			);
 			const rect2 = element.getBoundingClientRect();
 
 			return [
@@ -429,7 +431,7 @@ describe( 'Multi-block selection', () => {
 
 		const [ coord1, coord2 ] = await page.evaluate( () => {
 			const elements = Array.from(
-				document.querySelectorAll( '.wp-block-paragraph' )
+				document.querySelectorAll( '[data-type="core/paragraph"]' )
 			);
 			const rect1 = elements[ 2 ].getBoundingClientRect();
 			const rect2 = elements[ 1 ].getBoundingClientRect();
@@ -472,7 +474,9 @@ describe( 'Multi-block selection', () => {
 		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
 
 		const coord = await page.evaluate( () => {
-			const element = document.querySelector( '.wp-block-paragraph' );
+			const element = document.querySelector(
+				'[data-type="core/paragraph"]'
+			);
 			const rect = element.getBoundingClientRect();
 			return {
 				x: rect.x - 1,

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( '.wp-block-paragraph' );
+		await page.click( '[data-type="core/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( '.wp-block-paragraph' );
+		await page.click( '[data-type="core/paragraph"]' );
 
 		await page.keyboard.type( '2' );