Editor: Move generatedClassName logic out of BlockListBlock

blocks/api/index.js

@@ -1,7 +1,12 @@
 export { createBlock, getPossibleBlockTransformations, switchToBlockType, createReusableBlock } from './factory';
 export { default as parse, getBlockAttributes } from './parser';
 export { default as rawHandler } from './raw-handling';
-export { default as serialize, getBlockDefaultClassname, getBlockContent } from './serializer';
+export {
+	default as serialize,
+	getBlockContent,
+	getBlockDefaultClassname,
+	getSaveElement,
+} from './serializer';
 export { isValidBlock } from './validation';
 export { getCategories } from './categories';
 export {

blocks/api/serializer.js

@@ -28,24 +28,25 @@ export function getBlockDefaultClassname( blockName ) {
 
 /**
  * Given a block type containg a save render implementation and attributes, returns the
- * static markup to be saved.
+ * enhanced element to be saved or string when raw HTML expected.
  *
  * @param  {Object} blockType  Block type
  * @param  {Object} attributes Block attributes
- * @return {string}            Save content
+ * @return {Object|string}     Save content
  */
-export function getSaveContent( blockType, attributes ) {
+export function getSaveElement( blockType, attributes ) {
 	const { save } = blockType;
-	let saveContent;
+
+	let saveElement;
 
 	if ( save.prototype instanceof Component ) {
-		saveContent = createElement( save, { attributes } );
+		saveElement = createElement( save, { attributes } );
 	} else {
-		saveContent = save( { attributes } );
+		saveElement = save( { attributes } );
 
 		// Special-case function render implementation to allow raw HTML return
-		if ( 'string' === typeof saveContent ) {
-			return saveContent;
+		if ( 'string' === typeof saveElement ) {
+			return saveElement;
 		}
 	}
 
@@ -59,10 +60,28 @@ export function getSaveContent( blockType, attributes ) {
 
 		return cloneElement( element, props );
 	};
-	const contentWithExtraProps = Children.map( saveContent, addExtraContainerProps );
+
+	return Children.map( saveElement, addExtraContainerProps );
+}
+
+/**
+ * Given a block type containg a save render implementation and attributes, returns the
+ * static markup to be saved.
+ *
+ * @param  {Object} blockType  Block type
+ * @param  {Object} attributes Block attributes
+ * @return {string}            Save content
+ */
+export function getSaveContent( blockType, attributes ) {
+	const saveElement = getSaveElement( blockType, attributes );
+
+	// Special-case function render implementation to allow raw HTML return
+	if ( 'string' === typeof saveElement ) {
+		return saveElement;
+	}
 
 	// Otherwise, infer as element
-	return renderToString( contentWithExtraProps );
+	return renderToString( saveElement );
 }
 
 /**

editor/components/block-list/block.js

@@ -8,14 +8,13 @@ import { get, partial, reduce, size } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, compose, createElement } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
 import {
-	getBlockType,
 	BlockEdit,
-	getBlockDefaultClassname,
 	createBlock,
-	hasBlockSupport,
+	getBlockType,
+	getSaveElement,
 	isReusableBlock,
 } from '@wordpress/blocks';
 import { withFilters, withContext } from '@wordpress/components';
@@ -377,12 +376,6 @@ export class BlockListBlock extends Component {
 			wrapperProps = blockType.getEditWrapperProps( block.attributes );
 		}
 
-		// Generate a class name for the block's editable form
-		const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
-			getBlockDefaultClassname( block.name ) :
-			null;
-		const className = classnames( generatedClassName, block.attributes.className );
-
 		// Disable reason: Each block can be selected by clicking on it
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
@@ -433,11 +426,7 @@ export class BlockListBlock extends Component {
 							<BlockHtml uid={ block.uid } />
 						) }
 						{ ! isValid && [
-							createElement( blockType.save, {
-								key: 'invalid-preview',
-								attributes: block.attributes,
-								className,
-							} ),
+							getSaveElement( blockType, block.attributes ),
 							<InvalidBlockWarning
 								key="invalid-warning"
 								block={ block }