diff --git a/blocks/api/serializer.js b/blocks/api/serializer.js
index e27112eda84d75..e28492f6826157 100644
--- a/blocks/api/serializer.js
+++ b/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
diff --git a/blocks/hooks/custom-styles.js b/blocks/hooks/custom-styles.js
index ca0fffc2bb95a7..d865d5e147ef96 100644
--- a/blocks/hooks/custom-styles.js
+++ b/blocks/hooks/custom-styles.js
@@ -6,57 +6,44 @@ 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 [
- ,
- hasAnchor && ,
- ];
+ render() {
+ return (
+
+ );
+ }
};
-
- 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' );
}
@@ -64,6 +51,6 @@ export function addCustomStylesClass( extraProps, blockType, attributes ) {
}
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 );
}
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
index c8babb32ea4866..35962ad0b53b99 100644
--- a/blocks/library/paragraph/index.js
+++ b/blocks/library/paragraph/index.js
@@ -207,6 +207,7 @@ registerBlockType( 'core/paragraph', {
supports: {
className: false,
anchor: true,
+ customStyles: true,
},
attributes: {
diff --git a/lib/blocks.php b/lib/blocks.php
index 276329de3ff943..8ad67a7eec5b26 100644
--- a/lib/blocks.php
+++ b/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 );
}