UNPKG

@wordpress/block-editor

Version:
144 lines (142 loc) 4.67 kB
/** * External dependencies */ import clsx from 'clsx'; /** * WordPress dependencies */ import { getBlockType } from '@wordpress/blocks'; import { Button, VisuallyHidden } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { useSelect, useDispatch } from '@wordpress/data'; import { forwardRef } from '@wordpress/element'; import { __, isRTL } from '@wordpress/i18n'; /** * Internal dependencies */ import { chevronLeft, chevronRight, chevronUp, chevronDown } from '@wordpress/icons'; import { getBlockMoverDescription } from './mover-description'; import { store as blockEditorStore } from '../../store'; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; const getArrowIcon = (direction, orientation) => { if (direction === 'up') { if (orientation === 'horizontal') { return isRTL() ? chevronRight : chevronLeft; } return chevronUp; } else if (direction === 'down') { if (orientation === 'horizontal') { return isRTL() ? chevronLeft : chevronRight; } return chevronDown; } return null; }; const getMovementDirectionLabel = (moveDirection, orientation) => { if (moveDirection === 'up') { if (orientation === 'horizontal') { return isRTL() ? __('Move right') : __('Move left'); } return __('Move up'); } else if (moveDirection === 'down') { if (orientation === 'horizontal') { return isRTL() ? __('Move left') : __('Move right'); } return __('Move down'); } return null; }; const BlockMoverButton = forwardRef(({ clientIds, direction, orientation: moverOrientation, ...props }, ref) => { const instanceId = useInstanceId(BlockMoverButton); const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds]; const blocksCount = normalizedClientIds.length; const { disabled } = props; const { blockType, isDisabled, rootClientId, isFirst, isLast, firstIndex, orientation = 'vertical' } = useSelect(select => { const { getBlockIndex, getBlockRootClientId, getBlockOrder, getBlock, getBlockListSettings } = select(blockEditorStore); const firstClientId = normalizedClientIds[0]; const blockRootClientId = getBlockRootClientId(firstClientId); const firstBlockIndex = getBlockIndex(firstClientId); const lastBlockIndex = getBlockIndex(normalizedClientIds[normalizedClientIds.length - 1]); const blockOrder = getBlockOrder(blockRootClientId); const block = getBlock(firstClientId); const isFirstBlock = firstBlockIndex === 0; const isLastBlock = lastBlockIndex === blockOrder.length - 1; const { orientation: blockListOrientation } = getBlockListSettings(blockRootClientId) || {}; return { blockType: block ? getBlockType(block.name) : null, isDisabled: disabled || (direction === 'up' ? isFirstBlock : isLastBlock), rootClientId: blockRootClientId, firstIndex: firstBlockIndex, isFirst: isFirstBlock, isLast: isLastBlock, orientation: moverOrientation || blockListOrientation }; }, [clientIds, direction]); const { moveBlocksDown, moveBlocksUp } = useDispatch(blockEditorStore); const moverFunction = direction === 'up' ? moveBlocksUp : moveBlocksDown; const onClick = event => { moverFunction(clientIds, rootClientId); if (props.onClick) { props.onClick(event); } }; const descriptionId = `block-editor-block-mover-button__description-${instanceId}`; return /*#__PURE__*/_jsxs(_Fragment, { children: [/*#__PURE__*/_jsx(Button, { __next40pxDefaultSize: true, ref: ref, className: clsx('block-editor-block-mover-button', `is-${direction}-button`), icon: getArrowIcon(direction, orientation), label: getMovementDirectionLabel(direction, orientation), "aria-describedby": descriptionId, ...props, onClick: isDisabled ? null : onClick, disabled: isDisabled, accessibleWhenDisabled: true }), /*#__PURE__*/_jsx(VisuallyHidden, { id: descriptionId, children: getBlockMoverDescription(blocksCount, blockType && blockType.title, firstIndex, isFirst, isLast, direction === 'up' ? -1 : 1, orientation) })] }); }); export const BlockMoverUpButton = forwardRef((props, ref) => { return /*#__PURE__*/_jsx(BlockMoverButton, { direction: "up", ref: ref, ...props }); }); export const BlockMoverDownButton = forwardRef((props, ref) => { return /*#__PURE__*/_jsx(BlockMoverButton, { direction: "down", ref: ref, ...props }); }); //# sourceMappingURL=button.js.map