Why are the paragraph block inline styles different?

  • Resolved ColinD

    (@colind)


    8 months ago

    I’ve added a color control to the paragraph and heading blocks and it’s mostly working but the inline styles are not being shown in the editor. I’m using the blocks.getSaveContent.extraProps filter to add the props.style but that doesn’t seem to generate inline styles for the paragraph block in the editor. It does work as expected on the front end
    Gist

    function applyOverlineStyle(props, blockType, attributes) {
	if( ! enableOverlineColorOnBlocks.includes( blockType.name ) ){
		return props;
	}
	
	const { overlineColor, customOverlineColor } = attributes;

	props.style = {
		...props.style,
		'--wp--custom--overline-color': overlineColor
					? var( --wp--preset--color--${ overlineColor } )
				: customOverlineColor,
	}
	
	return props;
}

addFilter(
	'blocks.getSaveContent.extraProps',
	'pinwheel/overline-apply-style',
	applyOverlineStyle
)

    How should I be adding the style to the paragraph?

Viewing 1 replies (of 1 total)
  • Thread Starter ColinD

    (@colind)

    7 months, 4 weeks ago

    Resolved this. blocks.getSaveContent.extraProps only affects the block in the front end. For the editor, use the filter editor.BlockListBlock to create a HOC and add your styles as a style property to wrapperProps of the returned component.

    const applyOverlineEditorStyle = createHigherOrderComponent( ( BlockListBlock ) => {	
	return ( props ) => {
		if ( ! enableOverlineColorOnBlocks.includes( props.name ) ) {
			return <BlockListBlock {...props} />;
		}
		const { overlineColor, customOverlineColor } = props.attributes;
		const wrapperProps = {
			...props.wrapperProps,
			'style': { '--wp--custom--overline-color': overlineColor
						? var( --wp--preset--color--${ overlineColor } )
					: customOverlineColor
				}
		}
		return <BlockListBlock { ...props } wrapperProps={ wrapperProps }/>;
	};
}, 'applyOverlineEditorStyle' );

addFilter(
	'editor.BlockListBlock',
	'pinwheel/overline-apply-editor-style',
	applyOverlineEditorStyle
)
Viewing 1 replies (of 1 total)
  • The topic ‘Why are the paragraph block inline styles different?’ is closed to new replies.