@wordpress/block-library
Version:
Block library for the WordPress editor.
95 lines (91 loc) • 2.62 kB
JavaScript
import { createElement, Fragment } from "@wordpress/element";
/**
* WordPress dependencies
*/
import { useEntityProp } from '@wordpress/core-data';
import { SelectControl, TextControl } from '@wordpress/components';
import { sprintf, __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
export function TemplatePartAdvancedControls(_ref) {
let {
tagName,
setAttributes,
isEntityAvailable,
templatePartId,
defaultWrapper
} = _ref;
const [area, setArea] = useEntityProp('postType', 'wp_template_part', 'area', templatePartId);
const [title, setTitle] = useEntityProp('postType', 'wp_template_part', 'title', templatePartId);
const {
areaOptions
} = useSelect(select => {
// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
// Blocks can be loaded into a *non-post* block editor.
/* eslint-disable @wordpress/data-no-store-string-literals */
const definedAreas = select('core/editor').__experimentalGetDefaultTemplatePartAreas();
/* eslint-enable @wordpress/data-no-store-string-literals */
return {
areaOptions: definedAreas.map(_ref2 => {
let {
label,
area: _area
} = _ref2;
return {
label,
value: _area
};
})
};
}, []);
return createElement(InspectorControls, {
__experimentalGroup: "advanced"
}, isEntityAvailable && createElement(Fragment, null, createElement(TextControl, {
label: __('Title'),
value: title,
onChange: value => {
setTitle(value);
},
onFocus: event => event.target.select()
}), createElement(SelectControl, {
label: __('Area'),
labelPosition: "top",
options: areaOptions,
value: area,
onChange: setArea
})), createElement(SelectControl, {
label: __('HTML element'),
options: [{
label: sprintf(
/* translators: %s: HTML tag based on area. */
__('Default based on area (%s)'), `<${defaultWrapper}>`),
value: ''
}, {
label: '<header>',
value: 'header'
}, {
label: '<main>',
value: 'main'
}, {
label: '<section>',
value: 'section'
}, {
label: '<article>',
value: 'article'
}, {
label: '<aside>',
value: 'aside'
}, {
label: '<footer>',
value: 'footer'
}, {
label: '<div>',
value: 'div'
}],
value: tagName || '',
onChange: value => setAttributes({
tagName: value
})
}));
}
//# sourceMappingURL=advanced-controls.js.map