I want to create a block filter that adds an option to put in a max-width for the block (they select it with the RangeControl component). It can’t just add a class name. It should be an inline style, that adds this to the block: style="max-width: 50em".
Is that possible with a block filter? When I use this, it works, but it shows a block validation error in the console.
function addClassFrontEnd(props, block, attributes) {
if (allowedBlocks.indexOf(block.name) === -1) {
return props;
}
const { className } = props;
const { hasMaxWidth } = attributes;
const maxWidth = hasMaxWidth ? hasMaxWidth + "em" : undefined;
return assign({}, props, {
className: classnames(
className,
hasMaxWidth ? `has-max-width` : ""
),
style: { maxWidth },
});
}
// Comment out to test the PHP approach defined in intro-to-block-filters.php
addFilter(
"blocks.getSaveContent.extraProps",
"mobilebevpros/width-add-front-end-class",
addClassFrontEnd
);
Is there a better way to handle this? Using a class would be ideal, but I’d have to make a ton of classes: has-maxwidth-50em, has-max-width-51em, etc.