@wordpress/components
Version:
UI components for WordPress.
67 lines (64 loc) • 2.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.alignmentHelpers = exports.WIDE_ALIGNMENTS = exports.ALIGNMENT_BREAKPOINTS = void 0;
var _blocks = require("@wordpress/blocks");
/**
* WordPress dependencies
*/
const WIDE_ALIGNMENTS = exports.WIDE_ALIGNMENTS = {
alignments: {
wide: 'wide',
full: 'full'
},
excludeBlocks: ['core/heading'],
notInnerContainers: ['core/image', 'core/separator', 'core/media-text', 'core/quote', 'core/pullquote']
};
const ALIGNMENT_BREAKPOINTS = exports.ALIGNMENT_BREAKPOINTS = {
wide: 1024,
large: 820,
medium: 768,
small: 680,
mobile: 480
};
const isFullWidth = align => align === WIDE_ALIGNMENTS.alignments.full;
const isWideWidth = align => align === WIDE_ALIGNMENTS.alignments.wide;
const isWider = (width, breakpoint) => width > ALIGNMENT_BREAKPOINTS[breakpoint];
const isContainerRelated = blockName => {
if (WIDE_ALIGNMENTS.notInnerContainers.includes(blockName)) {
return false;
}
if (hasFullWidthSupport(blockName)) {
return true;
}
return hasParentFullWidthSupport(blockName);
};
/**
* Whether the block has support for full width alignment.
*
* @param {string} blockName
* @return {boolean} Return whether the block supports full width alignment.
*/
function hasFullWidthSupport(blockName) {
const blockType = (0, _blocks.getBlockType)(blockName);
const blockAlign = blockType?.supports?.align;
return !!Array.isArray(blockAlign) && blockAlign.includes(WIDE_ALIGNMENTS.alignments.full);
}
/**
* Whether the block's parent has support for full width alignment.
*
* @param {string} blockName
* @return {boolean} Return whether the block's parent supports full width alignment.
*/
function hasParentFullWidthSupport(blockName) {
const blockType = (0, _blocks.getBlockType)(blockName);
return !!blockType?.parent?.some(hasFullWidthSupport);
}
const alignmentHelpers = exports.alignmentHelpers = {
isFullWidth,
isWideWidth,
isWider,
isContainerRelated
};
//# sourceMappingURL=alignments.native.js.map