@gechiui/block-editor
Version:
116 lines (105 loc) • 4.08 kB
JavaScript
/**
* GeChiUI dependencies
*/
import { useLayoutEffect, useMemo } from '@gechiui/element';
import { useSelect, useDispatch } from '@gechiui/data';
import isShallowEqual from '@gechiui/is-shallow-equal';
/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
import { getLayoutType } from '../../layouts';
/**
* This hook is a side effect which updates the block-editor store when changes
* happen to inner block settings. The given props are transformed into a
* settings object, and if that is different from the current settings object in
* the block-editor store, then the store is updated with the new settings which
* came from props.
*
* @param {string} clientId The client ID of the block to update.
* @param {string[]} allowedBlocks An array of block names which are permitted
* in inner blocks.
* @param {?Array} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
* @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the
* appender.
* @param {string} [templateLock] The template lock specified for the inner
* blocks component. (e.g. "all")
* @param {boolean} captureToolbars Whether or children toolbars should be shown
* in the inner blocks component rather than on
* the child block.
* @param {string} orientation The direction in which the block
* should face.
* @param {Object} layout The layout object for the block container.
*/
export default function useNestedSettingsUpdate(
clientId,
allowedBlocks,
__experimentalDefaultBlock,
__experimentalDirectInsert,
templateLock,
captureToolbars,
orientation,
layout
) {
const { updateBlockListSettings } = useDispatch( blockEditorStore );
const { blockListSettings, parentLock } = useSelect(
( select ) => {
const rootClientId = select(
blockEditorStore
).getBlockRootClientId( clientId );
return {
blockListSettings: select(
blockEditorStore
).getBlockListSettings( clientId ),
parentLock: select( blockEditorStore ).getTemplateLock(
rootClientId
),
};
},
[ clientId ]
);
// Memoize as inner blocks implementors often pass a new array on every
// render.
const _allowedBlocks = useMemo( () => allowedBlocks, allowedBlocks );
useLayoutEffect( () => {
const newSettings = {
allowedBlocks: _allowedBlocks,
templateLock:
templateLock === undefined ? parentLock : templateLock,
};
// These values are not defined for RN, so only include them if they
// are defined.
if ( captureToolbars !== undefined ) {
newSettings.__experimentalCaptureToolbars = captureToolbars;
}
// Orientation depends on layout,
// ideally the separate orientation prop should be deprecated.
if ( orientation !== undefined ) {
newSettings.orientation = orientation;
} else {
const layoutType = getLayoutType( layout?.type );
newSettings.orientation = layoutType.getOrientation( layout );
}
if ( __experimentalDefaultBlock !== undefined ) {
newSettings.__experimentalDefaultBlock = __experimentalDefaultBlock;
}
if ( __experimentalDirectInsert !== undefined ) {
newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
}
if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
updateBlockListSettings( clientId, newSettings );
}
}, [
clientId,
blockListSettings,
_allowedBlocks,
__experimentalDefaultBlock,
__experimentalDirectInsert,
templateLock,
parentLock,
captureToolbars,
orientation,
updateBlockListSettings,
layout,
] );
}