@get_dave I am so sorry for the back and forth. But i found out today that NO, it did not magically fix itself, but a php filter i put on the Block to add the styles that i forgot about at rendering.
So the real answer is here: not only does the adding styles to ExtraProps per blocks.getSaveContent.extraProps Filter with the Block Editor in WordPress 5.9, it also doesn’t work with the Pull Request you linked me to.
I’m pasting the complete code of my index.js for more context:
/**
* External Dependencies
*/
import classnames from 'classnames';
/**
* WordPress Dependencies
*/
const { __ } = wp.i18n;
const { addFilter } = wp.hooks;
const { Fragment } = wp.element;
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
const { createHigherOrderComponent } = wp.compose;
import { Panel, PanelBody, PanelRow, ToggleControl, TextControl, SelectControl } from '@wordpress/components';
import './index.scss';
//restrict to specific block names
const allowedBlocks = [ 'core/image' ];
/**
*
* @param {Object} settings Settings for the block.
*
* @return {Object} settings Modified settings.
*/
function addAttributes( settings ) {
if( allowedBlocks.includes( settings.name ) ){
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
huliaAbsolutePositioning:{
type: 'boolean',
default: false,
},
huliaScaleDown:{
type: 'boolean',
default: false,
},
huliaTransformDirection:{
type: 'string',
default: 'top-left'
},
huliaTop:{
type: 'string'
},
huliaBottom:{
type: 'string'
},
huliaLeft:{
type: 'string'
},
huliaRight:{
type: 'string'
}
}
}
}
return settings;
}
/**
* Add controls on Advanced Block Panel.
*
* @param {function} BlockEdit Block edit component.
*
* @return {function} BlockEdit Modified block edit component.
*/
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const {
name,
attributes,
setAttributes,
isSelected
} = props;
const {
huliaAbsolutePositioning,
huliaTop,
huliaLeft,
huliaRight,
huliaBottom,
huliaScaleDown,
huliaTransformDirection
} = attributes;
if( ! allowedBlocks.includes( name )){
return (
<Fragment>
<BlockEdit {...props} />
</Fragment>
)
}
return (
<Fragment>
<BlockEdit {...props}/>
{ isSelected && allowedBlocks.includes( name ) &&
<InspectorControls>
<Panel>
<PanelBody title="Positionierung" initialOpen={ false }>
<PanelRow>
<ToggleControl
label={ !! huliaAbsolutePositioning ? __( 'Absolut positioniert' ) : __( 'normale Positionierung' ) }
checked={ !! huliaAbsolutePositioning }
onChange={ () => setAttributes( { huliaAbsolutePositioning: ! huliaAbsolutePositioning } ) }
/>
</PanelRow>
{
!! huliaAbsolutePositioning &&
<Fragment>
<PanelRow>
<TextControl
onChange={ e => setAttributes( { huliaTop : e } ) }
label="Abstand von oben"
value={ huliaTop } />
</PanelRow>
<PanelRow>
<TextControl
onChange={ e => setAttributes( { huliaRight : e } ) }
label="Abstand von rechts"
value={ huliaRight } />
</PanelRow>
<PanelRow>
<TextControl
onChange={ e => setAttributes( { huliaLeft : e } ) }
label="Abstand von links"
value={ huliaLeft } />
</PanelRow>
<PanelRow>
<TextControl
onChange={ e => setAttributes( { huliaBottom : e } ) }
label="Abstand von unten"
value={ huliaBottom } />
</PanelRow>
</Fragment>
}
<PanelRow>
<ToggleControl
label={ !! huliaScaleDown ? __( 'Auf die h?lfte Skalieren' ) : __( 'nicht runterskalieren' ) }
checked={ !! huliaScaleDown }
onChange={ () => setAttributes( { huliaScaleDown: ! huliaScaleDown } ) }
/>
</PanelRow>
{
!! huliaScaleDown &&
<Fragment>
<PanelRow>
<SelectControl
label={ __( 'Ausrichtung' ) }
value={ huliaTransformDirection } // e.g: value = [ 'a', 'c' ]
onChange={ ( newDirection ) => {
setAttributes({huliaTransformDirection: newDirection});
} }
options={ [
{ value: null, label: 'Bitte ausw?hlen', disabled: true },
{ value: 'top-left', label: 'Oben links' },
{ value: 'top-right', label: 'Oben rechts' },
{ value: 'bottom-left', label: 'Unten links' },
{ value: 'bottom-right', label: 'Unten rechts' },
] }
/>
</PanelRow>
</Fragment>
}
</PanelBody>
</Panel>
</InspectorControls>
}
</Fragment>
);
};
}, 'withInspectorControls');
/**
* Use BlockList Filter to show the correct styles and classes within the Block Editor
*/
const showInEditor = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
const {
name,
block,
attributes,
setAttributes,
isSelected,
className
} = props;
const {
huliaAbsolutePositioning,
huliaTop,
huliaLeft,
huliaRight,
huliaBottom,
huliaScaleDown,
huliaTransformDirection
} = attributes;
let wrapperProps = props.wrapperProps ? props.wrapperProps : {};
if( ! allowedBlocks.includes( name ) ){
return <BlockListBlock {...props} />
}
const mystyle = ( !! huliaAbsolutePositioning )
?
{
'top': huliaTop || 'auto',
'left': huliaLeft || 'auto',
'right': huliaRight || 'auto',
'bottom': huliaBottom || 'auto'
}
:
{};
const classes = (!! huliaAbsolutePositioning) ? 'has-absolute-positioning' + ( !! huliaScaleDown ? ' is-scale-half' + ( !! huliaTransformDirection ? ' has-transform-origin-'+huliaTransformDirection : '' ) : '' ) : '';
const newClassName = classnames( className, classes );
wrapperProps.className = newClassName;
wrapperProps.style = mystyle;
return <BlockListBlock {...props} className={ newClassName } wrapperProps={ wrapperProps } />
};
});
/**
* Add custom element class and styles in save element.
*
* @param {Object} extraProps Block element.
* @param {Object} blockType Blocks object.
* @param {Object} attributes Blocks attributes.
*
* @return {Object} extraProps Modified block element.
*/
function applyExtraClass( extraProps, blockType, attributes ) {
const {
huliaAbsolutePositioning,
huliaTop,
huliaLeft,
huliaRight,
huliaBottom,
huliaScaleDown,
huliaTransformDirection
} = attributes;
if( ! allowedBlocks.includes( blockType.name ) ){
return extraProps;
}
const mystyle = ( !! huliaAbsolutePositioning )
?
{
'top': huliaTop || 'auto',
'left': huliaLeft || 'auto',
'right': huliaRight || 'auto',
'bottom': huliaBottom || 'auto'
}
:
{};
const classes = (!! huliaAbsolutePositioning) ? 'has-absolute-positioning' + ( !! huliaScaleDown ? ' is-scale-half' + ( !! huliaTransformDirection ? ' has-transform-origin-'+huliaTransformDirection : '' ) : '' ) : '';
return lodash.assign(
extraProps,
{
className: classnames( extraProps.className, classes ),
style: mystyle
}
);
}
//add filters
addFilter(
'blocks.registerBlockType',
'huishu/uniiique-lab-image-addition',
addAttributes
);
addFilter(
'editor.BlockEdit',
'huishu/uniiique-lab-image-addition',
withInspectorControls
);
addFilter(
'blocks.getSaveContent.extraProps',
'huishu/uniiique-lab-image-addition',
applyExtraClass
);
wp.hooks.addFilter(
'editor.BlockListBlock',
'huishu/uniiique-lab-image-addition',
showInEditor
);
