Show custom classes in markup while editing (#5488)

Show custom classes in markup while editing for heading, paragraph, list, video and audio blocks. Refactor, make consistent use of className in embed block.
WordPress · Mar 15, 2018 · e4d58ec · e4d58ec
1 parent ba7159e
commit e4d58ec
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 17 deletions.
diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -58,20 +58,20 @@ export const settings = {
 	},
 
 	edit: class extends Component {
-		constructor( { className } ) {
+		constructor() {
 			super( ...arguments );
 			// edit component has its own src in the state so it can be edited
 			// without setting the actual value outside of the edit UI
 			this.state = {
 				editing: ! this.props.attributes.src,
 				src: this.props.attributes.src,
-				className,
 			};
 		}
+
 		render() {
 			const { caption, id } = this.props.attributes;
-			const { setAttributes, isSelected } = this.props;
-			const { editing, className, src } = this.state;
+			const { setAttributes, isSelected, className } = this.props;
+			const { editing, src } = this.state;
 			const switchToEditing = () => {
 				this.setState( { editing: true } );
 			};

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -143,7 +143,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 			render() {
 				const { html, type, error, fetching } = this.state;
 				const { align, url, caption } = this.props.attributes;
-				const { setAttributes, isSelected } = this.props;
+				const { setAttributes, isSelected, className } = this.props;
 				const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 
 				const controls = isSelected && (
@@ -207,14 +207,10 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 						/>
 					</div>
 				);
-				let typeClassName = 'wp-block-embed';
-				if ( 'video' === type ) {
-					typeClassName += ' is-video';
-				}
 
 				return [
 					controls,
-					<figure key="embed" className={ typeClassName }>
+					<figure key="embed" className={ classnames( className, { 'is-video': 'video' === type } ) }>
 						{ ( cannotPreview ) ? (
 							<Placeholder icon={ icon } label={ __( 'Embed URL' ) }>
 								<p className="components-placeholder__error"><a href={ url }>{ url }</a></p>

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -101,7 +101,7 @@ export const settings = {
 		};
 	},
 
-	edit( { attributes, setAttributes, isSelected, mergeBlocks, insertBlocksAfter, onReplace } ) {
+	edit( { attributes, setAttributes, isSelected, mergeBlocks, insertBlocksAfter, onReplace, className } ) {
 		const { align, content, nodeName, placeholder } = attributes;
 
 		return [
@@ -163,6 +163,7 @@ export const settings = {
 				}
 				onRemove={ () => onReplace( [] ) }
 				style={ { textAlign: align } }
+				className={ className }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 				isSelected={ isSelected }
 			/>,

diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js
@@ -234,6 +234,7 @@ export const settings = {
 				setAttributes,
 				mergeBlocks,
 				onReplace,
+				className,
 			} = this.props;
 			const { nodeName, values } = attributes;
 
@@ -276,6 +277,7 @@ export const settings = {
 					onChange={ this.setNextValues }
 					value={ values }
 					wrapperClassName="blocks-list"
+					className={ className }
 					placeholder={ __( 'Write list…' ) }
 					onMerge={ mergeBlocks }
 					onSplit={

diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -89,6 +89,7 @@ class ParagraphBlock extends Component {
 			isSelected,
 			mergeBlocks,
 			onReplace,
+			className,
 		} = this.props;
 
 		const {
@@ -102,8 +103,6 @@ class ParagraphBlock extends Component {
 			width,
 		} = attributes;
 
-		const className = dropCap ? 'has-drop-cap' : null;
-
 		return [
 			isSelected && (
 				<BlockControls key="controls">
@@ -169,6 +168,7 @@ class ParagraphBlock extends Component {
 							tagName="p"
 							className={ classnames( 'wp-block-paragraph', className, {
 								'has-background': backgroundColor,
+								'has-drop-cap': dropCap,
 							} ) }
 							style={ {
 								backgroundColor: backgroundColor,

diff --git a/blocks/library/video/index.js b/blocks/library/video/index.js
@@ -65,21 +65,20 @@ export const settings = {
 	},
 
 	edit: class extends Component {
-		constructor( { className } ) {
+		constructor() {
 			super( ...arguments );
 			// edit component has its own src in the state so it can be edited
 			// without setting the actual value outside of the edit UI
 			this.state = {
 				editing: ! this.props.attributes.src,
 				src: this.props.attributes.src,
-				className,
 			};
 		}
 
 		render() {
 			const { align, caption, id } = this.props.attributes;
-			const { setAttributes, isSelected } = this.props;
-			const { editing, className, src } = this.state;
+			const { setAttributes, isSelected, className } = this.props;
+			const { editing, src } = this.state;
 			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 			const switchToEditing = () => {
 				this.setState( { editing: true } );