Skip to content

Commit

Permalink
Quote v2: implement exiting on Enter at end
Browse files Browse the repository at this point in the history
  • Loading branch information
ellatrix committed Mar 30, 2022
1 parent 25c6b5e commit 5008ec0
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 0 deletions.
6 changes: 6 additions & 0 deletions packages/block-library/src/paragraph/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ import {
import { createBlock } from '@wordpress/blocks';
import { formatLtr } from '@wordpress/icons';

/**
* Internal dependencies
*/
import { useExitOnEnterAtEnd } from './use-enter';

const name = 'core/paragraph';

function ParagraphRTLControl( { direction, setDirection } ) {
Expand Down Expand Up @@ -57,6 +62,7 @@ function ParagraphBlock( {
const { align, content, direction, dropCap, placeholder } = attributes;
const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
const blockProps = useBlockProps( {
ref: useExitOnEnterAtEnd( { clientId, content } ),
className: classnames( {
'has-drop-cap': dropCap,
[ `has-text-align-${ align }` ]: align,
Expand Down
72 changes: 72 additions & 0 deletions packages/block-library/src/paragraph/use-enter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/**
* WordPress dependencies
*/
import { useRef } from '@wordpress/element';
import { useRefEffect } from '@wordpress/compose';
import { ENTER } from '@wordpress/keycodes';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { hasBlockSupport } from '@wordpress/blocks';

export function useExitOnEnterAtEnd( props ) {
const { moveBlocksToPosition } = useDispatch( blockEditorStore );
const {
getBlockRootClientId,
getBlockIndex,
getBlockOrder,
getBlockName,
} = useSelect( blockEditorStore );
const propsRef = useRef( props );
propsRef.current = props;
return useRefEffect( ( element ) => {
function onKeyDown( event ) {
if ( event.defaultPrevented ) {
return;
}

if ( event.keyCode !== ENTER ) {
return;
}

const { content, clientId } = propsRef.current;

// The paragraph should be empty.
if ( content.length ) {
return;
}

const wrapperClientId = getBlockRootClientId( clientId );

if (
! hasBlockSupport(
getBlockName( wrapperClientId ),
'__experimentalExitOnEnterAtEnd',
false
)
) {
return;
}

const order = getBlockOrder( wrapperClientId );

// It should be the last block.
if ( order.indexOf( clientId ) !== order.length - 1 ) {
return;
}

event.preventDefault();

moveBlocksToPosition(
[ clientId ],
wrapperClientId,
getBlockRootClientId( wrapperClientId ),
getBlockIndex( wrapperClientId ) + 1
);
}

element.addEventListener( 'keydown', onKeyDown );
return () => {
element.removeEventListener( 'keydown', onKeyDown );
};
}, [] );
}
1 change: 1 addition & 0 deletions packages/block-library/src/quote/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"supports": {
"anchor": true,
"__experimentalSlashInserter": true,
"__experimentalExitOnEnterAtEnd": true,
"typography": {
"fontSize": true,
"lineHeight": true,
Expand Down

0 comments on commit 5008ec0

Please sign in to comment.