ColinD

I am attempting to set the alignment and add the class to the Responsive Picture (Group) block, not to any of the inner images.

If I add a class to the fallback image, that class is moved to the <figure> but classes applied to the other images are not. I also do not have an option to set alignfull on the inner images.

https://colinduwe.com/wp-content/uploads/2025/02/Timeline-Editor-Error.mov Here’s a video of the error in the editor when updating the item description with “<p” (it errors before I can type the closing “>”)

Thanks, the update seems to have corrected the issue.

Hi @charlescormier,

Do you expect to have a fix for the issue? Or would you consider providing access to the source code and accept a pull request if I could sort it out?

Thanks,
Colin

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
)

If there’s a OS repo for this, I’d submit a PR.