Revert "Light block: automatically add block class (WordPress#20658)"…

… due to issues: WordPress#21152 WordPress#21114 This reverts commit 8a94254.
roo2 · Mar 26, 2020 · 9987674 · 9987674
1 parent 4da1dd4
commit 9987674
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 50 deletions.
diff --git 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 <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 } />;
 };
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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' );