@wordpress/block-editor
Version:
84 lines (83 loc) • 2.68 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { DOWN } from '@wordpress/keycodes';
import { ToolbarButton, Dropdown, AlignmentMatrixControl } from '@wordpress/components';
import { jsx as _jsx } from "react/jsx-runtime";
const noop = () => {};
/**
* The alignment matrix control allows users to quickly adjust inner block alignment.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md
*
* @example
* ```jsx
* function Example() {
* return (
* <BlockControls>
* <BlockAlignmentMatrixControl
* label={ __( 'Change content position' ) }
* value="center"
* onChange={ ( nextPosition ) =>
* setAttributes( { contentPosition: nextPosition } )
* }
* />
* </BlockControls>
* );
* }
* ```
*
* @param {Object} props Component props.
* @param {string} props.label Label for the control. Defaults to 'Change matrix alignment'.
* @param {Function} props.onChange Function to execute upon change of matrix state.
* @param {string} props.value Content alignment location. One of: 'center', 'center center',
* 'center left', 'center right', 'top center', 'top left',
* 'top right', 'bottom center', 'bottom left', 'bottom right'.
* @param {boolean} props.isDisabled Whether the control should be disabled.
* @return {Element} The BlockAlignmentMatrixControl component.
*/
function BlockAlignmentMatrixControl(props) {
const {
label = __('Change matrix alignment'),
onChange = noop,
value = 'center',
isDisabled
} = props;
const icon = /*#__PURE__*/_jsx(AlignmentMatrixControl.Icon, {
value: value
});
return /*#__PURE__*/_jsx(Dropdown, {
popoverProps: {
placement: 'bottom-start'
},
renderToggle: ({
onToggle,
isOpen
}) => {
const openOnArrowDown = event => {
if (!isOpen && event.keyCode === DOWN) {
event.preventDefault();
onToggle();
}
};
return /*#__PURE__*/_jsx(ToolbarButton, {
onClick: onToggle,
"aria-haspopup": "true",
"aria-expanded": isOpen,
onKeyDown: openOnArrowDown,
label: label,
icon: icon,
showTooltip: true,
disabled: isDisabled
});
},
renderContent: () => /*#__PURE__*/_jsx(AlignmentMatrixControl, {
hasFocusBorder: false,
onChange: onChange,
value: value
})
});
}
export default BlockAlignmentMatrixControl;
//# sourceMappingURL=index.js.map