@wordpress/block-library
Version:
Block library for the WordPress editor.
363 lines (360 loc) • 12.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CoverInspectorControls;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _shared = require("../shared");
var _lockUnlock = require("../../lock-unlock");
var _hooks = require("../../utils/hooks");
var _constants = require("../constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
cleanEmptyObject,
ResolutionTool,
HTMLElementControl
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function CoverHeightInput({
onChange,
onUnitChange,
unit = 'px',
value = ''
}) {
const instanceId = (0, _compose.useInstanceId)(_components.__experimentalUnitControl);
const inputId = `block-cover-height-input-${instanceId}`;
const isPx = unit === 'px';
const [availableUnits] = (0, _blockEditor.useSettings)('spacing.units');
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem', 'vw', 'vh'],
defaultValues: {
px: 430,
'%': 20,
em: 20,
rem: 20,
vw: 20,
vh: 50
}
});
const handleOnChange = unprocessedValue => {
const inputValue = unprocessedValue !== '' ? parseFloat(unprocessedValue) : undefined;
if (isNaN(inputValue) && inputValue !== undefined) {
return;
}
onChange(inputValue);
};
const computedValue = (0, _element.useMemo)(() => {
const [parsedQuantity] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
return [parsedQuantity, unit].join('');
}, [unit, value]);
const min = isPx ? _shared.COVER_MIN_HEIGHT : 0;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Minimum height'),
id: inputId,
isResetValueOnUnitChange: true,
min: min,
onChange: handleOnChange,
onUnitChange: onUnitChange,
units: units,
value: computedValue
});
}
function CoverInspectorControls({
attributes,
setAttributes,
clientId,
setOverlayColor,
coverRef,
currentSettings,
updateDimRatio,
featuredImage
}) {
const {
useFeaturedImage,
id,
dimRatio,
focalPoint,
hasParallax,
isRepeated,
minHeight,
minHeightUnit,
alt,
tagName
} = attributes;
const {
isVideoBackground,
isImageBackground,
mediaElement,
url,
overlayColor
} = currentSettings;
const sizeSlug = attributes.sizeSlug || _constants.DEFAULT_MEDIA_SIZE_SLUG;
const {
gradientValue,
setGradient
} = (0, _blockEditor.__experimentalUseGradient)();
const {
getSettings
} = (0, _data.useSelect)(_blockEditor.store);
const imageSizes = getSettings()?.imageSizes;
const image = (0, _data.useSelect)(select => id && isImageBackground ? select(_coreData.store).getMedia(id, {
context: 'view'
}) : null, [id, isImageBackground]);
const currentBackgroundImage = useFeaturedImage ? featuredImage : image;
function updateImage(newSizeSlug) {
const newUrl = currentBackgroundImage?.media_details?.sizes?.[newSizeSlug]?.source_url;
if (!newUrl) {
return null;
}
setAttributes({
url: newUrl,
sizeSlug: newSizeSlug
});
}
const imageSizeOptions = imageSizes?.filter(({
slug
}) => currentBackgroundImage?.media_details?.sizes?.[slug]?.source_url)?.map(({
name,
slug
}) => ({
value: slug,
label: name
}));
const toggleParallax = () => {
setAttributes({
hasParallax: !hasParallax,
...(!hasParallax ? {
focalPoint: undefined
} : {})
});
};
const toggleIsRepeated = () => {
setAttributes({
isRepeated: !isRepeated
});
};
const showFocalPointPicker = isVideoBackground || isImageBackground && (!hasParallax || isRepeated);
const imperativeFocalPointPreview = value => {
const [styleOfRef, property] = mediaElement.current ? [mediaElement.current.style, 'objectPosition'] : [coverRef.current.style, 'backgroundPosition'];
styleOfRef[property] = (0, _shared.mediaPosition)(value);
};
const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: !!url && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setAttributes({
hasParallax: false,
focalPoint: undefined,
isRepeated: false,
alt: '',
sizeSlug: undefined
});
},
dropdownMenuProps: dropdownMenuProps,
children: [isImageBackground && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Fixed background'),
isShownByDefault: true,
hasValue: () => hasParallax,
onDeselect: () => setAttributes({
hasParallax: false,
focalPoint: undefined
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Fixed background'),
checked: hasParallax,
onChange: toggleParallax
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Repeated background'),
isShownByDefault: true,
hasValue: () => isRepeated,
onDeselect: () => setAttributes({
isRepeated: false
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Repeated background'),
checked: isRepeated,
onChange: toggleIsRepeated
})
})]
}), showFocalPointPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Focal point'),
isShownByDefault: true,
hasValue: () => !!focalPoint,
onDeselect: () => setAttributes({
focalPoint: undefined
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FocalPointPicker, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Focal point'),
url: url,
value: focalPoint,
onDragStart: imperativeFocalPointPreview,
onDrag: imperativeFocalPointPreview,
onChange: newFocalPoint => setAttributes({
focalPoint: newFocalPoint
})
})
}), !useFeaturedImage && url && !isVideoBackground && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Alternative text'),
isShownByDefault: true,
hasValue: () => !!alt,
onDeselect: () => setAttributes({
alt: ''
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Alternative text'),
value: alt,
onChange: newAlt => setAttributes({
alt: newAlt
}),
help: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
href:
// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
(0, _i18n.__)('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
children: (0, _i18n.__)('Describe the purpose of the image.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), (0, _i18n.__)('Leave empty if decorative.')]
})
})
}), !!imageSizeOptions?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResolutionTool, {
value: sizeSlug,
onChange: updateImage,
options: imageSizeOptions,
defaultValue: _constants.DEFAULT_MEDIA_SIZE_SLUG
})]
})
}), colorGradientSettings.hasColorsOrGradients && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
group: "color",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
__experimentalIsRenderedInSidebar: true,
settings: [{
colorValue: overlayColor.color,
gradientValue,
label: (0, _i18n.__)('Overlay'),
onColorChange: setOverlayColor,
onGradientChange: setGradient,
isShownByDefault: true,
resetAllFilter: () => ({
overlayColor: undefined,
customOverlayColor: undefined,
gradient: undefined,
customGradient: undefined
}),
clearable: true
}],
panelId: clientId,
...colorGradientSettings
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => {
// If there's a media background the dimRatio will be
// defaulted to 50 whereas it will be 100 for colors.
return dimRatio === undefined ? false : dimRatio !== (url ? 50 : 100);
},
label: (0, _i18n.__)('Overlay opacity'),
onDeselect: () => updateDimRatio(url ? 50 : 100),
resetAllFilter: () => ({
dimRatio: url ? 50 : 100
}),
isShownByDefault: true,
panelId: clientId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Overlay opacity'),
value: dimRatio,
onChange: newDimRatio => updateDimRatio(newDimRatio),
min: 0,
max: 100,
step: 10,
required: true,
__next40pxDefaultSize: true
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
group: "dimensions",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
className: "single-column",
hasValue: () => !!minHeight,
label: (0, _i18n.__)('Minimum height'),
onDeselect: () => setAttributes({
minHeight: undefined,
minHeightUnit: undefined
}),
resetAllFilter: () => ({
minHeight: undefined,
minHeightUnit: undefined
}),
isShownByDefault: true,
panelId: clientId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CoverHeightInput, {
value: attributes?.style?.dimensions?.aspectRatio ? '' : minHeight,
unit: minHeightUnit,
onChange: newMinHeight => setAttributes({
minHeight: newMinHeight,
style: cleanEmptyObject({
...attributes?.style,
dimensions: {
...attributes?.style?.dimensions,
aspectRatio: undefined // Reset aspect ratio when minHeight is set.
}
})
}),
onUnitChange: nextUnit => setAttributes({
minHeightUnit: nextUnit
})
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
group: "advanced",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLElementControl, {
tagName: tagName,
onChange: value => setAttributes({
tagName: value
}),
clientId: clientId,
options: [{
label: (0, _i18n.__)('Default (<div>)'),
value: 'div'
}, {
label: '<header>',
value: 'header'
}, {
label: '<main>',
value: 'main'
}, {
label: '<section>',
value: 'section'
}, {
label: '<article>',
value: 'article'
}, {
label: '<aside>',
value: 'aside'
}, {
label: '<footer>',
value: 'footer'
}]
})
})]
});
}
//# sourceMappingURL=inspector-controls.js.map