@automattic/newspack-blocks 4.31.1 → 4.32.0-alpha.2

package/src/components/reorder-modal.js

@@ -0,0 +1,382 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import {
+	Button,
+	Modal,
+	Notice,
+	Spinner,
+	__experimentalConfirmDialog as ConfirmDialog, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+import { Icon, chevronDown, chevronUp, close, dragHandle } from '@wordpress/icons';
+import { Card } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import './reorder-modal.scss';
+
+export const moveItem = ( items, from, to ) => {
+	if ( from === to || from < 0 || to < 0 || from >= items.length || to >= items.length ) {
+		return items;
+	}
+	const next = [ ...items ];
+	const [ moved ] = next.splice( from, 1 );
+	next.splice( to, 0, moved );
+	return next;
+};
+
+const OVERLAY_SELECTOR = '.components-modal__screen-overlay';
+
+// The overlay carries the dismissal handling and the drop target, and `Modal`
+// forwards its ref to it today. Deriving it from whatever node arrives keeps
+// both working if core ever forwards that ref somewhere else.
+export const findOverlay = node =>
+	node?.closest?.( OVERLAY_SELECTOR ) ||
+	node?.querySelector?.( OVERLAY_SELECTOR ) ||
+	node?.ownerDocument?.querySelector( OVERLAY_SELECTOR ) ||
+	null;
+
+// Disabled controls stay focusable here, so they report `aria-disabled` rather
+// than the native attribute.
+const isAvailable = button => !! button && ! button.matches( ':disabled, [aria-disabled="true"]' );
+
+// Speech input matches on the visible label, so it has to open the accessible
+// name. Composing both from one translated string keeps that true in every locale.
+const nameWithTitle = ( label, title ) =>
+	sprintf(
+		/* translators: keep %1$s first: it repeats the button's visible label, which speech input matches on. 1: the control's visible label. 2: title of the content being moved. */
+		__( '%1$s: %2$s', 'newspack-blocks' ),
+		label,
+		title
+	);
+
+const ReorderModal = ( { title, ids, fetchItems, onSave, onClose } ) => {
+	const moveUpLabel = __( 'Move Up', 'newspack-blocks' );
+	const moveDownLabel = __( 'Move Down', 'newspack-blocks' );
+	const [ items, setItems ] = useState( null );
+	const [ dragIndex, setDragIndex ] = useState( null );
+	const [ hasFetchError, setHasFetchError ] = useState( false );
+	const [ isConfirmingDiscard, setIsConfirmingDiscard ] = useState( false );
+	const listRef = useRef( null );
+	const overlayRef = useRef( null );
+	const pendingFocus = useRef( null );
+	const closeRef = useRef( null );
+	const preDragItems = useRef( null );
+	const dragBlocked = useRef( false );
+	const captureOverlay = useCallback( node => {
+		overlayRef.current = findOverlay( node );
+	}, [] );
+
+	// The order the modal opened with. Snapshotted so a change to `ids` from
+	// elsewhere in the editor cannot desynchronise it from `items`.
+	const openedWith = useRef( ids );
+
+	const isDirty = !! items && items.some( ( item, index ) => item.id !== openedWith.current[ index ] );
+
+	useEffect( () => {
+		let cancelled = false;
+		const openIds = openedWith.current;
+		const withLabels = labels => openIds.map( id => ( { id, label: labels[ id ] || __( '(no title)', 'newspack-blocks' ) } ) );
+
+		fetchItems( openIds )
+			.then( results => {
+				if ( cancelled ) {
+					return;
+				}
+				const labels = {};
+				results.forEach( ( { value, label } ) => {
+					labels[ value ] = label;
+				} );
+				const loaded = withLabels( labels );
+				setItems( loaded );
+				speak(
+					sprintf(
+						/* translators: %d: number of items in the list. */
+						_n( '%d item ready to reorder.', '%d items ready to reorder.', loaded.length, 'newspack-blocks' ),
+						loaded.length
+					)
+				);
+			} )
+			.catch( error => {
+				// eslint-disable-next-line no-console
+				console.error( 'Newspack Blocks: could not prepare the content to reorder.', error );
+				if ( ! cancelled ) {
+					setHasFetchError( true );
+					// Only to leave the loading state: the error view lists nothing.
+					setItems( [] );
+				}
+			} );
+
+		return () => {
+			cancelled = true;
+		};
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	// A chevron that reaches an end of the list stops accepting moves, so send
+	// focus to the row's other chevron.
+	useEffect( () => {
+		const pending = pendingFocus.current;
+		pendingFocus.current = null;
+		if ( ! pending || ! listRef.current ) {
+			return;
+		}
+		const row = listRef.current.querySelector( `[data-item-id="${ pending.id }"]` );
+		if ( ! row ) {
+			return;
+		}
+		const preferred = row.querySelector( `[data-direction="${ pending.direction }"]` );
+		const fallback = row.querySelector( `[data-direction="${ 'up' === pending.direction ? 'down' : 'up' }"]` );
+		if ( isAvailable( preferred ) ) {
+			preferred.focus();
+		} else if ( isAvailable( fallback ) ) {
+			fallback.focus();
+		}
+	}, [ items ] );
+
+	const moveTo = ( from, to, direction ) => {
+		const next = moveItem( items, from, to );
+		if ( next === items ) {
+			return;
+		}
+		pendingFocus.current = { id: items[ from ].id, direction };
+		setItems( next );
+		speak(
+			sprintf(
+				/* translators: 1: title of the moved item. 2: its new position. 3: total number of items. */
+				__( '%1$s moved to position %2$d of %3$d.', 'newspack-blocks' ),
+				items[ from ].label,
+				to + 1,
+				items.length
+			)
+		);
+	};
+
+	const requestClose = () => {
+		if ( isDirty ) {
+			setIsConfirmingDiscard( true );
+			return;
+		}
+		onClose();
+	};
+
+	useEffect( () => {
+		closeRef.current = requestClose;
+	}, [ requestClose ] );
+
+	const handleKeyDown = event => {
+		if ( 'Escape' !== event.key || event.defaultPrevented ) {
+			return;
+		}
+		event.preventDefault();
+		requestClose();
+	};
+
+	// `Modal` plays its exit animation before it reports a close request, which
+	// would fade the modal out and back in whenever the confirmation vetoes one.
+	// Its own dismissal handlers are off, so drive the overlay press here.
+	useEffect( () => {
+		const overlay = overlayRef.current;
+		if ( ! overlay ) {
+			return;
+		}
+		let pressedOverlay = false;
+		const onPointerDown = event => {
+			pressedOverlay = event.target === overlay;
+			if ( pressedOverlay ) {
+				event.preventDefault();
+			}
+		};
+		const onPointerUp = event => {
+			const dismisses = pressedOverlay && 0 === event.button && event.target === overlay;
+			pressedOverlay = false;
+			if ( dismisses ) {
+				closeRef.current();
+			}
+		};
+		overlay.addEventListener( 'pointerdown', onPointerDown );
+		overlay.addEventListener( 'pointerup', onPointerUp );
+		return () => {
+			overlay.removeEventListener( 'pointerdown', onPointerDown );
+			overlay.removeEventListener( 'pointerup', onPointerUp );
+		};
+	}, [] );
+
+	// Rows are the only drop targets, and the frame's own padding is not one, so a
+	// release a few pixels wide of the list would report a cancelled drag and undo
+	// the reorder. Accepting the drop across the whole dialog leaves "cancelled"
+	// meaning only Escape or a release outside it.
+	useEffect( () => {
+		const frame = overlayRef.current?.querySelector( '.components-modal__frame' );
+		if ( ! frame ) {
+			return;
+		}
+		const accept = event => event.preventDefault();
+		frame.addEventListener( 'dragover', accept );
+		frame.addEventListener( 'drop', accept );
+		return () => {
+			frame.removeEventListener( 'dragover', accept );
+			frame.removeEventListener( 'drop', accept );
+		};
+	}, [] );
+
+	const handleDragOver = ( event, index ) => {
+		event.preventDefault();
+		if ( null === dragIndex ) {
+			return;
+		}
+		event.dataTransfer.dropEffect = 'move';
+		if ( dragIndex === index ) {
+			return;
+		}
+		setItems( moveItem( items, dragIndex, index ) );
+		setDragIndex( index );
+	};
+
+	return (
+		<>
+			<Modal
+				ref={ captureOverlay }
+				title={ title }
+				onRequestClose={ requestClose }
+				onKeyDown={ handleKeyDown }
+				isDismissible={ false }
+				shouldCloseOnEsc={ false }
+				shouldCloseOnClickOutside={ false }
+				headerActions={ <Button size="compact" icon={ close } label={ __( 'Close', 'newspack-blocks' ) } onClick={ requestClose } /> }
+				size="medium"
+				className="newspack-blocks-reorder-modal"
+			>
+				<div className="newspack-blocks-reorder-modal__body" aria-busy={ ! items }>
+					{ ! items && (
+						<div className="newspack-blocks-reorder-modal__loading">
+							<Spinner />
+							<span className="screen-reader-text">{ __( 'Loading content…', 'newspack-blocks' ) }</span>
+						</div>
+					) }
+					{ items && hasFetchError && (
+						<>
+							<Notice status="error" isDismissible={ false } className="newspack-blocks-reorder-modal__notice">
+								{ __( 'The content could not be loaded, so the order cannot be saved.', 'newspack-blocks' ) }
+							</Notice>
+							<div className="newspack-blocks-reorder-modal__footer">
+								<Button variant="tertiary" onClick={ requestClose }>
+									{ __( 'Cancel', 'newspack-blocks' ) }
+								</Button>
+							</div>
+						</>
+					) }
+					{ items && ! hasFetchError && (
+						<>
+							{ /* `list-style: none` drops list semantics in Safari, so the role is restated. */ }
+							{ /* eslint-disable-next-line jsx-a11y/no-redundant-roles */ }
+							<ul className="newspack-blocks-reorder-modal__list" role="list" ref={ listRef }>
+								{ items.map( ( item, index ) => (
+									<Card.Root
+										key={ item.id }
+										render={ <li /> }
+										data-item-id={ item.id }
+										className={ classnames( 'newspack-blocks-reorder-modal__item', {
+											'is-dragging': dragIndex === index,
+										} ) }
+										draggable
+										// `dragstart` always fires at the draggable row, never at the
+										// chevron inside it, so the grab point is recorded separately.
+										onPointerDown={ event => {
+											dragBlocked.current = !! event.target.closest?.( 'button' );
+										} }
+										onDragStart={ event => {
+											if ( dragBlocked.current ) {
+												event.preventDefault();
+												return;
+											}
+											preDragItems.current = items;
+											// Firefox and Safari will not start a drag until the payload is set.
+											event.dataTransfer.setData( 'text/plain', String( item.id ) );
+											event.dataTransfer.effectAllowed = 'move';
+											setDragIndex( index );
+										} }
+										onDragOver={ event => handleDragOver( event, index ) }
+										onDragEnd={ event => {
+											// A cancelled drag reports no drop effect: put the order back.
+											if ( 'none' === event.dataTransfer.dropEffect && preDragItems.current ) {
+												setItems( preDragItems.current );
+											}
+											preDragItems.current = null;
+											setDragIndex( null );
+										} }
+										onDrop={ event => event.preventDefault() }
+									>
+										<span className="newspack-blocks-reorder-modal__grip" aria-hidden="true">
+											<Icon icon={ dragHandle } />
+										</span>
+										<span className="newspack-blocks-reorder-modal__move">
+											<Button
+												icon={ chevronUp }
+												size="small"
+												data-direction="up"
+												disabled={ 0 === index }
+												accessibleWhenDisabled
+												label={ moveUpLabel }
+												aria-label={ nameWithTitle( moveUpLabel, item.label ) }
+												onClick={ () => moveTo( index, index - 1, 'up' ) }
+											/>
+											<Button
+												icon={ chevronDown }
+												size="small"
+												data-direction="down"
+												disabled={ index === items.length - 1 }
+												accessibleWhenDisabled
+												label={ moveDownLabel }
+												aria-label={ nameWithTitle( moveDownLabel, item.label ) }
+												onClick={ () => moveTo( index, index + 1, 'down' ) }
+											/>
+										</span>
+										<Card.Content className="newspack-blocks-reorder-modal__title" title={ item.label }>
+											{ item.label }
+										</Card.Content>
+									</Card.Root>
+								) ) }
+							</ul>
+							<div className="newspack-blocks-reorder-modal__footer">
+								<Button variant="tertiary" onClick={ requestClose }>
+									{ __( 'Cancel', 'newspack-blocks' ) }
+								</Button>
+								<Button
+									variant="primary"
+									disabled={ ! isDirty }
+									accessibleWhenDisabled
+									onClick={ () => onSave( items.map( item => item.id ) ) }
+								>
+									{ __( 'Save', 'newspack-blocks' ) }
+								</Button>
+							</div>
+						</>
+					) }
+				</div>
+			</Modal>
+			{ isConfirmingDiscard && (
+				<ConfirmDialog
+					isOpen
+					contentLabel={ __( 'Discard the new order?', 'newspack-blocks' ) }
+					confirmButtonText={ __( 'Discard', 'newspack-blocks' ) }
+					cancelButtonText={ __( 'Keep editing', 'newspack-blocks' ) }
+					onConfirm={ onClose }
+					onCancel={ () => setIsConfirmingDiscard( false ) }
+				>
+					{ __( 'The order you set will be lost.', 'newspack-blocks' ) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+};
+
+export default ReorderModal;

package/src/components/reorder-modal.scss

@@ -0,0 +1,87 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-blocks-reorder-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		min-height: calc(#{wp-vars.$grid-unit} * 23);
+	}
+
+	&__loading {
+		align-items: center;
+		display: flex;
+		flex: 1;
+		justify-content: center;
+	}
+
+	&__notice {
+		margin: 0 0 wp-vars.$grid-unit-10;
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: wp-vars.$grid-unit-10;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	&__item {
+		--newspack-blocks-reorder-divider: #{wp-colors.$gray-100};
+		--wp-ui-card-padding: #{wp-vars.$grid-unit-15};
+
+		align-items: stretch;
+		cursor: grab;
+		flex-direction: row;
+		margin: 0;
+
+		&:focus-within,
+		&:hover {
+			--newspack-blocks-reorder-divider: #{wp-colors.$gray-300};
+
+			border-color: wp-colors.$gray-300;
+		}
+
+		&.is-dragging {
+			cursor: grabbing;
+			opacity: 0.5;
+		}
+	}
+
+	&__grip {
+		align-items: center;
+		color: wp-colors.$gray-700;
+		display: flex;
+		padding-left: wp-vars.$grid-unit-05;
+	}
+
+	&__move {
+		align-items: center;
+		border-right: 1px solid var(--newspack-blocks-reorder-divider);
+		display: flex;
+		flex-direction: column;
+		padding: wp-vars.$grid-unit-05;
+	}
+
+	&__title {
+		@include wp-mixins.heading-large();
+
+		align-self: center;
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__footer {
+		display: flex;
+		gap: wp-vars.$grid-unit-10;
+		justify-content: flex-end;
+		margin-top: auto;
+		padding-top: wp-vars.$grid-unit-30;
+	}
+}