@wordpress/block-library
Version:
Block library for the WordPress editor.
109 lines (104 loc) • 3.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CoverBlockControls;
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _shared = require("../shared");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
cleanEmptyObject
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function CoverBlockControls({
attributes,
setAttributes,
onSelectMedia,
currentSettings,
toggleUseFeaturedImage,
onClearMedia
}) {
const {
contentPosition,
id,
useFeaturedImage,
minHeight,
minHeightUnit
} = attributes;
const {
hasInnerBlocks,
url
} = currentSettings;
const [prevMinHeightValue, setPrevMinHeightValue] = (0, _element.useState)(minHeight);
const [prevMinHeightUnit, setPrevMinHeightUnit] = (0, _element.useState)(minHeightUnit);
const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100 && !attributes?.style?.dimensions?.aspectRatio;
const toggleMinFullHeight = () => {
if (isMinFullHeight) {
// If there aren't previous values, take the default ones.
if (prevMinHeightUnit === 'vh' && prevMinHeightValue === 100) {
return setAttributes({
minHeight: undefined,
minHeightUnit: undefined
});
}
// Set the previous values of height.
return setAttributes({
minHeight: prevMinHeightValue,
minHeightUnit: prevMinHeightUnit
});
}
setPrevMinHeightValue(minHeight);
setPrevMinHeightUnit(minHeightUnit);
// Set full height, and clear any aspect ratio value.
return setAttributes({
minHeight: 100,
minHeightUnit: 'vh',
style: cleanEmptyObject({
...attributes?.style,
dimensions: {
...attributes?.style?.dimensions,
aspectRatio: undefined // Reset aspect ratio when minHeight is set.
}
})
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, {
group: "block",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockAlignmentMatrixControl, {
label: (0, _i18n.__)('Change content position'),
value: contentPosition,
onChange: nextPosition => setAttributes({
contentPosition: nextPosition
}),
isDisabled: !hasInnerBlocks
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockFullHeightAligmentControl, {
isActive: isMinFullHeight,
onToggle: toggleMinFullHeight,
isDisabled: !hasInnerBlocks
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
group: "other",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, {
mediaId: id,
mediaURL: url,
allowedTypes: _shared.ALLOWED_MEDIA_TYPES,
accept: "image/*,video/*",
onSelect: onSelectMedia,
onToggleFeaturedImage: toggleUseFeaturedImage,
useFeaturedImage: useFeaturedImage,
name: !url ? (0, _i18n.__)('Add media') : (0, _i18n.__)('Replace'),
onReset: onClearMedia
})
})]
});
}
//# sourceMappingURL=block-controls.js.map