@wordpress/block-editor
Version:
156 lines (145 loc) • 7.38 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useNestedSettingsUpdate;
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _store = require("../../store");
var _layouts = require("../../layouts");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
const pendingSettingsUpdates = new WeakMap();
// Creates a memoizing caching function that remembers the last value and keeps returning it
// as long as the new values are shallowly equal. Helps keep dependencies stable.
function createShallowMemo() {
let value;
return newValue => {
if (value === undefined || !(0, _isShallowEqual.default)(value, newValue)) {
value = newValue;
}
return value;
};
}
function useShallowMemo(value) {
const [memo] = (0, _element.useState)(createShallowMemo);
return memo(value);
}
/**
* 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} parentLock
* @param {string[]} allowedBlocks An array of block names which are permitted
* in inner blocks.
* @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
* @param {?WPDirectInsertBlock} defaultBlock The default block to insert: [ blockName, { blockAttributes } ].
* @param {?boolean} directInsert If a default block should be inserted directly by the appender.
*
* @param {?WPDirectInsertBlock} __experimentalDefaultBlock A deprecated prop for the default block to insert: [ blockName, { blockAttributes } ]. Use `defaultBlock` instead.
*
* @param {?boolean} __experimentalDirectInsert A deprecated prop for whether a default block should be inserted directly by the appender. Use `directInsert` instead.
*
* @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.
*/
function useNestedSettingsUpdate(clientId, parentLock, allowedBlocks, prioritizedInserterBlocks, defaultBlock, directInsert, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, captureToolbars, orientation, layout) {
// Instead of adding a useSelect mapping here, please add to the useSelect
// mapping in InnerBlocks! Every subscription impacts performance.
const registry = (0, _data.useRegistry)();
// Implementors often pass a new array on every render,
// and the contents of the arrays are just strings, so the entire array
// can be passed as dependencies but We need to include the length of the array,
// otherwise if the arrays change length but the first elements are equal the comparison,
// does not works as expected.
const _allowedBlocks = useShallowMemo(allowedBlocks);
const _prioritizedInserterBlocks = useShallowMemo(prioritizedInserterBlocks);
const _templateLock = templateLock === undefined || parentLock === 'contentOnly' ? parentLock : templateLock;
(0, _element.useLayoutEffect)(() => {
const newSettings = {
allowedBlocks: _allowedBlocks,
prioritizedInserterBlocks: _prioritizedInserterBlocks,
templateLock: _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 = (0, _layouts.getLayoutType)(layout?.type);
newSettings.orientation = layoutType.getOrientation(layout);
}
if (__experimentalDefaultBlock !== undefined) {
(0, _deprecated.default)('__experimentalDefaultBlock', {
alternative: 'defaultBlock',
since: '6.3',
version: '6.4'
});
newSettings.defaultBlock = __experimentalDefaultBlock;
}
if (defaultBlock !== undefined) {
newSettings.defaultBlock = defaultBlock;
}
if (__experimentalDirectInsert !== undefined) {
(0, _deprecated.default)('__experimentalDirectInsert', {
alternative: 'directInsert',
since: '6.3',
version: '6.4'
});
newSettings.directInsert = __experimentalDirectInsert;
}
if (directInsert !== undefined) {
newSettings.directInsert = directInsert;
}
if (newSettings.directInsert !== undefined && typeof newSettings.directInsert !== 'boolean') {
(0, _deprecated.default)('Using `Function` as a `directInsert` argument', {
alternative: '`boolean` values',
since: '6.5'
});
}
// Batch updates to block list settings to avoid triggering cascading renders
// for each container block included in a tree and optimize initial render.
// To avoid triggering updateBlockListSettings for each container block
// causing X re-renderings for X container blocks,
// we batch all the updatedBlockListSettings in a single "data" batch
// which results in a single re-render.
if (!pendingSettingsUpdates.get(registry)) {
pendingSettingsUpdates.set(registry, {});
}
pendingSettingsUpdates.get(registry)[clientId] = newSettings;
window.queueMicrotask(() => {
const settings = pendingSettingsUpdates.get(registry);
if (Object.keys(settings).length) {
const {
updateBlockListSettings
} = registry.dispatch(_store.store);
updateBlockListSettings(settings);
pendingSettingsUpdates.set(registry, {});
}
});
}, [clientId, _allowedBlocks, _prioritizedInserterBlocks, _templateLock, defaultBlock, directInsert, __experimentalDefaultBlock, __experimentalDirectInsert, captureToolbars, orientation, layout, registry]);
}
//# sourceMappingURL=use-nested-settings-update.js.map