@wordpress/block-library
Version:
Block library for the WordPress editor.
102 lines (99 loc) • 2.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = FormatControls;
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
// All WP post formats, sorted alphabetically by translated name.
// Value is the post format slug. Label is the name.
const POST_FORMATS = [{
value: 'aside',
label: (0, _i18n.__)('Aside')
}, {
value: 'audio',
label: (0, _i18n.__)('Audio')
}, {
value: 'chat',
label: (0, _i18n.__)('Chat')
}, {
value: 'gallery',
label: (0, _i18n.__)('Gallery')
}, {
value: 'image',
label: (0, _i18n.__)('Image')
}, {
value: 'link',
label: (0, _i18n.__)('Link')
}, {
value: 'quote',
label: (0, _i18n.__)('Quote')
}, {
value: 'standard',
label: (0, _i18n.__)('Standard')
}, {
value: 'status',
label: (0, _i18n.__)('Status')
}, {
value: 'video',
label: (0, _i18n.__)('Video')
}].sort((a, b) => {
const normalizedA = a.label.toUpperCase();
const normalizedB = b.label.toUpperCase();
if (normalizedA < normalizedB) {
return -1;
}
if (normalizedA > normalizedB) {
return 1;
}
return 0;
});
// A helper function to convert translatable post format names into their static values.
function formatNamesToValues(names, formats) {
return names.map(name => {
return formats.find(item => item.label.toLocaleLowerCase() === name.toLocaleLowerCase())?.value;
}).filter(Boolean);
}
function FormatControls({
onChange,
query: {
format
}
}) {
// 'format' is expected to be an array. If it is not an array, for example
// if a user has manually entered an invalid value in the block markup,
// convert it to an array to prevent JavaScript errors.
const normalizedFormats = Array.isArray(format) ? format : [format];
const {
supportedFormats
} = (0, _data.useSelect)(select => {
const themeSupports = select(_coreData.store).getThemeSupports();
return {
supportedFormats: themeSupports.formats
};
}, []);
const formats = POST_FORMATS.filter(item => supportedFormats.includes(item.value));
const values = normalizedFormats.map(name => formats.find(item => item.value === name)?.label).filter(Boolean);
const suggestions = formats.filter(item => !normalizedFormats.includes(item.value)).map(item => item.label);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
label: (0, _i18n.__)('Formats'),
value: values,
suggestions: suggestions,
onChange: newValues => {
onChange({
format: formatNamesToValues(newValues, formats)
});
},
__experimentalShowHowTo: false,
__experimentalExpandOnFocus: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true
});
}
//# sourceMappingURL=format-controls.js.map