A11y im Editor… Keyboard Shortcuts in die Elements-Blöcke einbauen

[lukasniebler]

Keyboard-Shortcuts für gängige Blöcke einbauen.

[lukasniebler]

Snippets aus https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/edit.js

import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';

function onKeyDown( event ) {
        if ( isKeyboardEvent.primary( event, 'k' ) ) {
            startEditing( event );
        } else if ( isKeyboardEvent.primaryShift( event, 'k' ) ) {
            unlink();
            richTextRef.current?.focus();
        }
    }

const useEnterRef = useEnter( { content: text, clientId } );

function useEnter( props ) {
    const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
    const { getBlock, getBlockRootClientId, getBlockIndex } =
        useSelect( blockEditorStore );
    const propsRef = useRef( props );
    propsRef.current = props;
    return useRefEffect( ( element ) => {
        function onKeyDown( event ) {
            if ( event.defaultPrevented || event.keyCode !== ENTER ) {
                return;
            }
            const { content, clientId } = propsRef.current;
            if ( content.length ) {
                return;
            }
            event.preventDefault();
            const topParentListBlock = getBlock(
                getBlockRootClientId( clientId )
            );
            const blockIndex = getBlockIndex( clientId );
            const head = cloneBlock( {
                ...topParentListBlock,
                innerBlocks: topParentListBlock.innerBlocks.slice(
                    0,
                    blockIndex
                ),
            } );
            const middle = createBlock( getDefaultBlockName() );
            const after = topParentListBlock.innerBlocks.slice(
                blockIndex + 1
            );
            const tail = after.length
                ? [
                        cloneBlock( {
                            ...topParentListBlock,
                            innerBlocks: after,
                        } ),
                  ]
                : [];
            replaceBlocks(
                topParentListBlock.clientId,
                [ head, middle, ...tail ],
                1
            );
            // We manually change the selection here because we are replacing
            // a different block than the selected one.
            selectionChange( middle.clientId );
        }

        element.addEventListener( 'keydown', onKeyDown );
        return () => {
            element.removeEventListener( 'keydown', onKeyDown );
        };
    }, [] );
}