Keith Solomon
9ea16bf650
The FilterPanel was being mounted as a free-floating sibling of the block via an `editor.BlockEdit` HOC. In WordPress, a `PanelBody` only renders in the sidebar when wrapped in `<InspectorControls>`; without that wrapper, the panel renders wherever it lands in the React tree, which here was the editor canvas. Move the InspectorControls mount into the Edit component itself (the idiomatic place for an own block to expose sidebar controls), and drop the `editor.BlockEdit` filter from `src/index.js`. Add an Edit test that pins the contract: the filter panel must mount inside InspectorControls and never float outside it. Add a manual jest mock for @wordpress/block-editor so the Edit test can render in an environment without WordPress globals.
52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
/**
|
|
* Block registration entry point.
|
|
*
|
|
* @package SoloFiltersImageEnhancements
|
|
*/
|
|
|
|
import { registerBlockType } from '@wordpress/blocks';
|
|
import { addFilter } from '@wordpress/hooks';
|
|
|
|
import './styles/style.scss';
|
|
import './styles/editor.scss';
|
|
|
|
import metadata from './block.json';
|
|
import edit from './edit';
|
|
import save from './save';
|
|
import { PRESETS, DEFAULT_PRESET, isValidPresetSlug } from './presets';
|
|
import { transforms } from './transforms';
|
|
|
|
registerBlockType( metadata.name, {
|
|
...metadata,
|
|
edit,
|
|
save,
|
|
transforms,
|
|
} );
|
|
|
|
/**
|
|
* Normalise the filter attribute on save. If the saved slug is unknown
|
|
* (e.g. the post was edited by hand), fall back to DEFAULT_PRESET so the
|
|
* block still renders without errors.
|
|
*/
|
|
function ensureValidFilter( settings, name ) {
|
|
if ( name !== 'ksolo/image-filter' ) {
|
|
return settings;
|
|
}
|
|
const originalSave = settings.save;
|
|
settings.save = ( props ) => {
|
|
if ( ! isValidPresetSlug( props.attributes.filter ) ) {
|
|
props.attributes.filter = DEFAULT_PRESET;
|
|
}
|
|
return originalSave( props );
|
|
};
|
|
return settings;
|
|
}
|
|
addFilter(
|
|
'blocks.registerBlockType',
|
|
'solofilters-image-enhancements/ensure-valid-filter',
|
|
ensureValidFilter
|
|
);
|
|
|
|
// Re-export PRESETS so the consuming downstream code (e.g. a future
|
|
// design-tool integration) can grab them from this module.
|
|
export { PRESETS }; |