Improvements/revisions

blocks/api/serializer.js

@@ -16,7 +16,7 @@ import { applyFilters } from '@wordpress/hooks';
 import { getBlockType, getUnknownTypeHandlerName } from './registration';
 
 /**
- * Returns the block's name with common prefixes: 'core/' or 'core-' (in 'core-embed/') dropped
+ * Returns the block's name with common prefixes ('core/', 'core-') dropped
  *
  * @param {String}   blockName  The block name
  * @return {string}             Friendly name

blocks/hooks/custom-styles.js

@@ -6,64 +6,51 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Component, getWrapperDisplayName } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import { getBlockRandomAnchor, hasBlockSupport, getBlockType } from '../api';
+import { getBlockRandomAnchor, hasBlockSupport } from '../api';
 
 const CUSTOM_STYLE_ATTRIBUTES = [ 'backgroundColor', 'textColor' ];
 
-const hasCustomStyles = ( attributes ) => (
+const hasCustomStyleAttributes = ( attributes ) => (
 	CUSTOM_STYLE_ATTRIBUTES.some( attr => attributes[ attr ] )
 );
 
-class AddAnchorWhenNeeded extends Component {
-	componentWillReceiveProps( nextProps ) {
-		if ( ! nextProps.attributes.anchor && hasCustomStyles( nextProps.attributes ) ) {
-			nextProps.setAttributes( {
-				anchor: getBlockRandomAnchor( nextProps.name ),
-			} );
-		}
-	}
-
-	render() {
-		return null;
-	}
-}
-
-export function addAnchorWhenStylesNeed( BlockEdit ) {
-	const WrappedBlockEdit = ( props ) => {
-		let hasAnchor = false;
-		if ( hasBlockSupport( props.name, 'anchor' ) ) {
-			const blockType = getBlockType( props.name );
-			if ( blockType && hasCustomStyles( blockType.attributes ) ) {
-				hasAnchor = true;
+function withCustomStylesAnchor( BlockEdit ) {
+	return class CustomStylesAnchor extends Component {
+		componentWillReceiveProps( nextProps ) {
+			if ( hasBlockSupport( nextProps.name, 'anchor' ) &&
+				hasBlockSupport( nextProps.name, 'customStyles' ) &&
+				! nextProps.attributes.anchor &&
+				hasCustomStyleAttributes( nextProps.attributes )
+			) {
+				nextProps.setAttributes( {
+					anchor: getBlockRandomAnchor( nextProps.name ),
+				} );
 			}
 		}
 
-		return [
-			<BlockEdit key="block-edit-add-anchor" { ...props } />,
-			hasAnchor && <AddAnchorWhenNeeded key="add-anchor" { ...props } />,
-		];
+		render() {
+			return (
+				<BlockEdit { ...this.props } />
+			);
+		}
 	};
-
-	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'add-anchor' );
-
-	return WrappedBlockEdit;
 }
 
 export function addCustomStylesClass( extraProps, blockType, attributes ) {
-	if ( hasCustomStyles( attributes ) ) {
+	if ( hasBlockSupport( blockType.name, 'customStyles' ) && hasCustomStyleAttributes( attributes ) ) {
 		extraProps.className = classnames( extraProps.className, 'has-custom-styles' );
 	}
 
 	return extraProps;
 }
 
 export default function customAnchorStyles() {
-	addFilter( 'blocks.BlockEdit', 'core/custom-styles/inspector-control', addAnchorWhenStylesNeed );
+	addFilter( 'blocks.BlockEdit', 'core/custom-styles/inspector-control', withCustomStylesAnchor );
 	addFilter( 'blocks.getSaveContent.extraProps', 'core/custom-styles/save-props', addCustomStylesClass );
 }

blocks/library/paragraph/index.js

@@ -207,6 +207,7 @@ registerBlockType( 'core/paragraph', {
 	supports: {
 		className: false,
 		anchor: true,
+		customStyles: true,
 	},
 
 	attributes: {

lib/blocks.php

@@ -180,7 +180,7 @@ function gutenberg_render_block( $block ) {
  *
  * @return string CSS style block or empty string
  */
-function compute_styles( $blocks ) {
+function do_blocks_styles( $blocks ) {
 	$map_attrs_styles = array(
 		'textColor'       => 'color',
 		'backgroundColor' => 'background-color',
@@ -215,7 +215,7 @@ function compute_styles( $blocks ) {
 function do_blocks( $content ) {
 	$blocks = gutenberg_parse_blocks( $content );
 
-	$content_after_blocks = compute_styles( $blocks );
+	$content_after_blocks = do_blocks_styles( $blocks );
 	foreach ( $blocks as $block ) {
 		$content_after_blocks .= gutenberg_render_block( $block );
 	}