@wordpress/editor 13.25.0 → 13.26.0

package/src/components/inserter-sidebar/index.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Button, VisuallyHidden } from '@wordpress/components';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import { close } from '@wordpress/icons';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+export default function InserterSidebar() {
+	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
+		const { getInsertionPoint } = unlock( select( editorStore ) );
+		const { get } = select( preferencesStore );
+		return {
+			insertionPoint: getInsertionPoint(),
+			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+		};
+	}, [] );
+	const { setIsInserterOpened } = useDispatch( editorStore );
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
+	} );
+
+	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
+
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="editor-inserter-sidebar"
+		>
+			<TagName className="editor-inserter-sidebar__header">
+				<Button
+					icon={ close }
+					label={ __( 'Close block inserter' ) }
+					onClick={ () => setIsInserterOpened( false ) }
+				/>
+			</TagName>
+			<div className="editor-inserter-sidebar__content">
+				<Library
+					showMostUsedBlocks={ showMostUsedBlocks }
+					showInserterHelpPanel
+					shouldFocusBlock={ isMobileViewport }
+					rootClientId={ insertionPoint.rootClientId }
+					__experimentalInsertionIndex={
+						insertionPoint.insertionIndex
+					}
+					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
+				/>
+			</div>
+		</div>
+	);
+}

package/src/components/inserter-sidebar/style.scss

@@ -0,0 +1,22 @@
+.editor-inserter-sidebar {
+	@include reset;
+
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-inserter-sidebar__header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.editor-inserter-sidebar__content {
+	// Leave space for the close button
+	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+	@include break-medium() {
+		height: 100%;
+	}
+}

package/src/components/list-view-sidebar/index.js

@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalListView as ListView } from '@wordpress/block-editor';
+import { Button, TabPanel } from '@wordpress/components';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useCallback, useRef, useState } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import ListViewOutline from './list-view-outline';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+export default function ListViewSidebar() {
+	const { setIsListViewOpened } = useDispatch( editorStore );
+	const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
+
+	// This hook handles focus when the sidebar first renders.
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+
+	// When closing the list view, focus should return to the toggle button.
+	const closeListView = useCallback( () => {
+		setIsListViewOpened( false );
+		getListViewToggleRef().current?.focus();
+	}, [ getListViewToggleRef, setIsListViewOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeListView();
+			}
+		},
+		[ closeListView ]
+	);
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	// Tracks our current tab.
+	const [ tab, setTab ] = useState( 'list-view' );
+
+	// This ref refers to the sidebar as a whole.
+	const sidebarRef = useRef();
+	// This ref refers to the tab panel.
+	const tabPanelRef = useRef();
+	// This ref refers to the list view application area.
+	const listViewRef = useRef();
+
+	// Must merge the refs together so focus can be handled properly in the next function.
+	const listViewContainerRef = useMergeRefs( [
+		focusOnMountRef,
+		listViewRef,
+		setDropZoneElement,
+	] );
+
+	/*
+	 * Callback function to handle list view or outline focus.
+	 *
+	 * @param {string} currentTab The current tab. Either list view or outline.
+	 *
+	 * @return void
+	 */
+	function handleSidebarFocus( currentTab ) {
+		// Tab panel focus.
+		const tabPanelFocus = focus.tabbable.find( tabPanelRef.current )[ 0 ];
+		// List view tab is selected.
+		if ( currentTab === 'list-view' ) {
+			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
+			const listViewApplicationFocus = focus.tabbable.find(
+				listViewRef.current
+			)[ 0 ];
+			const listViewFocusArea = sidebarRef.current.contains(
+				listViewApplicationFocus
+			)
+				? listViewApplicationFocus
+				: tabPanelFocus;
+			listViewFocusArea.focus();
+			// Outline tab is selected.
+		} else {
+			tabPanelFocus.focus();
+		}
+	}
+
+	const handleToggleListViewShortcut = useCallback( () => {
+		// If the sidebar has focus, it is safe to close.
+		if (
+			sidebarRef.current.contains(
+				sidebarRef.current.ownerDocument.activeElement
+			)
+		) {
+			closeListView();
+		} else {
+			// If the list view or outline does not have focus, focus should be moved to it.
+			handleSidebarFocus( tab );
+		}
+	}, [ closeListView, tab ] );
+
+	// This only fires when the sidebar is open because of the conditional rendering.
+	// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+	useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut );
+
+	/**
+	 * Render tab content for a given tab name.
+	 *
+	 * @param {string} tabName The name of the tab to render.
+	 */
+	function renderTabContent( tabName ) {
+		if ( tabName === 'list-view' ) {
+			return (
+				<div className="editor-list-view-sidebar__list-view-panel-content">
+					<ListView dropZoneElement={ dropZoneElement } />
+				</div>
+			);
+		}
+		return <ListViewOutline />;
+	}
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-list-view-sidebar"
+			onKeyDown={ closeOnEscape }
+			ref={ sidebarRef }
+		>
+			<Button
+				className="editor-list-view-sidebar__close-button"
+				icon={ closeSmall }
+				label={ __( 'Close' ) }
+				onClick={ closeListView }
+			/>
+			<TabPanel
+				className="editor-list-view-sidebar__tab-panel"
+				ref={ tabPanelRef }
+				onSelect={ ( tabName ) => setTab( tabName ) }
+				selectOnMove={ false }
+				tabs={ [
+					{
+						name: 'list-view',
+						title: _x( 'List View', 'Post overview' ),
+						className: 'editor-list-view-sidebar__panel-tab',
+					},
+					{
+						name: 'outline',
+						title: _x( 'Outline', 'Post overview' ),
+						className: 'editor-list-view-sidebar__panel-tab',
+					},
+				] }
+			>
+				{ ( currentTab ) => (
+					<div
+						className="editor-list-view-sidebar__list-view-container"
+						ref={ listViewContainerRef }
+					>
+						{ renderTabContent( currentTab.name ) }
+					</div>
+				) }
+			</TabPanel>
+		</div>
+	);
+}

package/src/components/list-view-sidebar/list-view-outline.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CharacterCount from '../character-count';
+import WordCount from '../word-count';
+import TimeToRead from '../time-to-read';
+import DocumentOutline from '../document-outline';
+
+export default function ListViewOutline() {
+	return (
+		<>
+			<div className="editor-list-view-sidebar__outline">
+				<div>
+					<Text>{ __( 'Characters:' ) }</Text>
+					<Text>
+						<CharacterCount />
+					</Text>
+				</div>
+				<div>
+					<Text>{ __( 'Words:' ) }</Text>
+					<WordCount />
+				</div>
+				<div>
+					<Text>{ __( 'Time to read:' ) }</Text>
+					<TimeToRead />
+				</div>
+			</div>
+			<DocumentOutline />
+		</>
+	);
+}

package/src/components/list-view-sidebar/style.scss

@@ -0,0 +1,84 @@
+.editor-list-view-sidebar {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
+
+	.editor-list-view-sidebar__close-button {
+		position: absolute;
+		right: $grid-unit-10;
+		top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+		z-index: 1;
+		background: $white;
+	}
+
+	// The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available.
+	.components-tab-panel__tabs {
+		border-bottom: $border-width solid $gray-300;
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		padding-right: $grid-unit-70;
+
+		.editor-list-view-sidebar__panel-tab {
+			width: 50%;
+			margin-bottom: -$border-width;
+		}
+	}
+
+	.components-tab-panel__tab-content {
+		height: calc(100% - #{$grid-unit-60 - $border-width});
+	}
+}
+
+.editor-list-view-sidebar__list-view-panel-content,
+.editor-list-view-sidebar__list-view-container > .document-outline {
+	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
+	// The table cells use an extra pixels of space left and right. We compensate for that here.
+	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
+}
+
+.editor-list-view-sidebar__list-view-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.editor-list-view-sidebar__tab-panel {
+	height: 100%;
+}
+
+.editor-list-view-sidebar__outline {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	border-bottom: $border-width solid $gray-300;
+	padding: $grid-unit-20;
+
+	& > div > span:first-child {
+		// Width of the text information fields.
+		width: 90px;
+		display: inline-block;
+	}
+
+	& > div > span {
+		font-size: $helptext-font-size;
+		line-height: $default-line-height;
+		color: $gray-700;
+	}
+}

package/src/components/offline-status/index.native.js

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { AccessibilityInfo, Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	usePreferredColorSchemeStyle,
+	useNetworkConnectivity,
+	usePrevious,
+} from '@wordpress/compose';
+import { Icon } from '@wordpress/components';
+import { offline as offlineIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+/**
+ * Conditionally announces messages for screen reader users. This Hook provides
+ * two benefits over React Native's `accessibilityLiveRegion`:
+ *
+ * 1. It works on both iOS and Android.
+ * 2. It allows announcing a secondary message when the component is inactive.
+ *
+ * @param {string}  message                   The message to announce.
+ * @param {Object}  options                   Options for the Hook.
+ * @param {boolean} [options.isActive]        Whether the message should be announced.
+ * @param {string}  [options.inactiveMessage] The message to announce when inactive.
+ */
+function useAccessibilityLiveRegion( message, { isActive, inactiveMessage } ) {
+	const { announceForAccessibility } = AccessibilityInfo;
+	const prevIsActive = usePrevious( isActive );
+
+	useEffect( () => {
+		const unconditionalMessage = typeof isActive === 'undefined';
+		const initialRender = typeof prevIsActive === 'undefined';
+
+		if (
+			unconditionalMessage ||
+			( isActive && ! prevIsActive && ! initialRender )
+		) {
+			announceForAccessibility( message );
+		} else if ( ! isActive && prevIsActive && inactiveMessage ) {
+			announceForAccessibility( inactiveMessage );
+		}
+	}, [
+		message,
+		isActive,
+		prevIsActive,
+		inactiveMessage,
+		announceForAccessibility,
+	] );
+}
+
+const OfflineStatus = () => {
+	const { isConnected } = useNetworkConnectivity();
+
+	useAccessibilityLiveRegion( __( 'Network connection re-established' ), {
+		isActive: isConnected,
+		inactiveMessage: __( 'Network connection lost, working offline' ),
+	} );
+
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles.offline,
+		styles.offline__dark
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--text' ],
+		styles[ 'offline--text__dark' ]
+	);
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--icon' ],
+		styles[ 'offline--icon__dark' ]
+	);
+
+	return ! isConnected ? (
+		<View
+			accessible
+			accessibilityRole="alert"
+			accessibilityLabel={ __(
+				'Network connection lost, working offline'
+			) }
+			style={ containerStyle }
+		>
+			<View style={ containerStyle }>
+				<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+				<Text style={ textStyle }>{ __( 'Working Offline' ) }</Text>
+			</View>
+		</View>
+	) : null;
+};
+
+export default OfflineStatus;

package/src/components/offline-status/style.native.scss

@@ -0,0 +1,28 @@
+.offline {
+	background-color: $gray-lighten-30;
+	padding: $grid-unit;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+}
+
+.offline__dark {
+	background-color: $gray-70;
+}
+
+.offline--text {
+	color: $black;
+	padding-left: 3;
+}
+
+.offline--text__dark {
+	color: $white;
+}
+
+.offline--icon {
+	fill: $gray-70;
+}
+
+.offline--icon__dark {
+	fill: $gray-10;
+}

package/src/components/offline-status/test/index.native.js

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import { act, render, screen } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestConnectionStatus,
+	subscribeConnectionStatus,
+} from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import OfflineStatus from '../index';
+import { AccessibilityInfo } from 'react-native';
+
+jest.mock( '../style.native.scss', () => ( {
+	'offline--icon': {
+		fill: '',
+	},
+} ) );
+
+describe( 'when network connectivity is unavailable', () => {
+	beforeAll( () => {
+		requestConnectionStatus.mockImplementation( ( callback ) => {
+			callback( false );
+			return { remove: jest.fn() };
+		} );
+	} );
+
+	it( 'should display a helpful message', () => {
+		render( <OfflineStatus /> );
+
+		expect( screen.getByText( 'Working Offline' ) ).toBeVisible();
+	} );
+
+	it( 'should display an accessible message', () => {
+		render( <OfflineStatus /> );
+
+		expect(
+			screen.getByLabelText( 'Network connection lost, working offline' )
+		).toBeVisible();
+	} );
+
+	it( 'should announce network status', () => {
+		render( <OfflineStatus /> );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
+	} );
+
+	it( 'should announce changes to network status', () => {
+		let subscriptionCallback;
+		subscribeConnectionStatus.mockImplementation( ( callback ) => {
+			subscriptionCallback = callback;
+			return { remove: jest.fn() };
+		} );
+		render( <OfflineStatus /> );
+
+		act( () => subscriptionCallback( { isConnected: false } ) );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
+	} );
+} );
+
+describe( 'when network connectivity is available', () => {
+	beforeAll( () => {
+		requestConnectionStatus.mockImplementation( ( callback ) => {
+			callback( true );
+			return { remove: jest.fn() };
+		} );
+	} );
+
+	it( 'should not display a helpful message', () => {
+		render( <OfflineStatus /> );
+
+		expect( screen.queryByText( 'Working Offline' ) ).toBeNull();
+	} );
+
+	it( 'should not announce network status', () => {
+		render( <OfflineStatus /> );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).not.toHaveBeenCalled();
+	} );
+
+	it( 'should announce changes to network status', () => {
+		let subscriptionCallback;
+		subscribeConnectionStatus.mockImplementation( ( callback ) => {
+			subscriptionCallback = callback;
+			return { remove: jest.fn() };
+		} );
+		render( <OfflineStatus /> );
+
+		act( () => subscriptionCallback( { isConnected: false } ) );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
+	} );
+} );

package/src/components/page-attributes/panel.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, PanelRow } from '@wordpress/components';
+
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PageAttributesCheck from './check';
+import PageAttributesOrder from './order';
+import PageAttributesParent from './parent';
+
+const PANEL_NAME = 'page-attributes';
+
+export function PageAttributesPanel() {
+	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			isEditorPanelEnabled,
+			isEditorPanelOpened,
+		} = select( editorStore );
+		const { getPostType } = select( coreStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled || ! postType ) {
+		return null;
+	}
+
+	const onTogglePanel = ( ...args ) =>
+		toggleEditorPanelOpened( PANEL_NAME, ...args );
+
+	return (
+		<PageAttributesCheck>
+			<PanelBody
+				title={
+					postType?.labels?.attributes ?? __( 'Page attributes' )
+				}
+				opened={ isOpened }
+				onToggle={ onTogglePanel }
+			>
+				<PageAttributesParent />
+				<PanelRow>
+					<PageAttributesOrder />
+				</PanelRow>
+			</PanelBody>
+		</PageAttributesCheck>
+	);
+}
+
+export default PageAttributesPanel;