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 ); }