@wordpress/edit-site 5.25.0 → 5.26.0

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

@@ -1,123 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
-import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { useCallback, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { ESCAPE } from '@wordpress/keycodes';
-import { focus } from '@wordpress/dom';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { PrivateListView } = unlock( blockEditorPrivateApis );
-
-export default function ListViewSidebar( { listViewToggleElement } ) {
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
-
-	// 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 );
-		listViewToggleElement?.focus();
-	}, [ listViewToggleElement, 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 );
-
-	// This ref refers to the sidebar as a whole.
-	const sidebarRef = useRef();
-	// This ref refers to the close button.
-	const sidebarCloseButtonRef = useRef();
-	// This ref refers to the list view application area.
-	const listViewRef = useRef();
-
-	/*
-	 * Callback function to handle list view or close button focus.
-	 *
-	 * @return void
-	 */
-	function handleSidebarFocus() {
-		// Either focus the list view or the sidebar close button. 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
-			: sidebarCloseButtonRef.current;
-		listViewFocusArea.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 close button does not have focus, focus should be moved to it.
-			handleSidebarFocus();
-		}
-	}, [ closeListView ] );
-
-	// 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/edit-site/toggle-list-view',
-		handleToggleListViewShortcut
-	);
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className="edit-site-editor__list-view-panel"
-			onKeyDown={ closeOnEscape }
-			ref={ sidebarRef }
-		>
-			<div className="edit-site-editor__list-view-panel-header">
-				<strong>{ __( 'List View' ) }</strong>
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close' ) }
-					onClick={ closeListView }
-					ref={ sidebarCloseButtonRef }
-				/>
-			</div>
-			<div
-				className="edit-site-editor__list-view-panel-content"
-				ref={ useMergeRefs( [
-					focusOnMountRef,
-					setDropZoneElement,
-					listViewRef,
-				] ) }
-			>
-				<PrivateListView dropZoneElement={ dropZoneElement } />
-			</div>
-		</div>
-	);
-}

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

@@ -1,65 +0,0 @@
-/**
- * Note that this CSS file should be in sync with its counterpart in the other editor:
- * packages/edit-post/src/components/secondary-sidebar/style.scss
- */
-
-.edit-site-editor__inserter-panel,
-.edit-site-editor__list-view-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.edit-site-editor__list-view-panel {
-	@include break-medium() {
-		// Same width as the Inserter.
-		// @see packages/block-editor/src/components/inserter/style.scss
-		width: 350px;
-	}
-}
-
-.edit-site-editor__inserter-panel-header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.edit-site-editor__inserter-panel-content,
-.edit-site-editor__list-view-panel-content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-}
-
-
-.edit-site-editor__inserter-panel-content {
-	@include break-medium() {
-		height: 100%;
-	}
-}
-
-.edit-site-editor__list-view-panel-header {
-	align-items: center;
-	border-bottom: $border-width solid $gray-300;
-	display: flex;
-	justify-content: space-between;
-	height: $grid-unit-60;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
-}
-
-.edit-site-editor__list-view-panel-content {
-	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);
-}

package/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js

@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { createPrivateSlotFill } = unlock( componentsPrivateApis );
-const SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME = 'SidebarFixedBottom';
-const { Slot: SidebarFixedBottomSlot, Fill: SidebarFixedBottomFill } =
-	createPrivateSlotFill( SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME );
-
-export default function SidebarFixedBottom( { children } ) {
-	return (
-		<SidebarFixedBottomFill>
-			<div className="edit-site-sidebar-fixed-bottom-slot">
-				{ children }
-			</div>
-		</SidebarFixedBottomFill>
-	);
-}
-
-export { SidebarFixedBottomSlot };

package/src/components/sidebar-edit-mode/template-panel/last-revision.js

@@ -1,82 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button, PanelRow } from '@wordpress/components';
-import { sprintf, _n, __ } from '@wordpress/i18n';
-import { backup } from '@wordpress/icons';
-import { addQueryArgs } from '@wordpress/url';
-import { PostTypeSupportCheck } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import useEditedEntityRecord from '../../use-edited-entity-record';
-
-const useRevisionData = () => {
-	const { record: currentTemplate } = useEditedEntityRecord();
-
-	const lastRevisionId =
-		currentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
-
-	const revisionsCount =
-		currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-
-	return {
-		currentTemplate,
-		lastRevisionId,
-		revisionsCount,
-	};
-};
-
-function PostLastRevisionCheck( { children } ) {
-	const { lastRevisionId, revisionsCount } = useRevisionData();
-
-	if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
-		return null;
-	}
-
-	if ( ! lastRevisionId || revisionsCount < 2 ) {
-		return null;
-	}
-
-	return (
-		<PostTypeSupportCheck supportKeys="revisions">
-			{ children }
-		</PostTypeSupportCheck>
-	);
-}
-
-const PostLastRevision = () => {
-	const { lastRevisionId, revisionsCount } = useRevisionData();
-
-	return (
-		<PostLastRevisionCheck>
-			<PanelRow
-				header={ __( 'Editing history' ) }
-				className="edit-site-template-revisions"
-			>
-				<Button
-					href={ addQueryArgs( 'revision.php', {
-						revision: lastRevisionId,
-					} ) }
-					className="edit-site-template-last-revision__title"
-					icon={ backup }
-				>
-					{ sprintf(
-						/* translators: %d: number of revisions */
-						_n( '%d Revision', '%d Revisions', revisionsCount ),
-						revisionsCount
-					) }
-				</Button>
-			</PanelRow>
-		</PostLastRevisionCheck>
-	);
-};
-
-export default function LastRevision() {
-	return (
-		<PostLastRevisionCheck>
-			<PostLastRevision />
-		</PostLastRevisionCheck>
-	);
-}

package/src/components/sidebar-edit-mode/template-panel/pattern-categories.js

@@ -1,279 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, FlexBlock, PanelRow } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDebounce } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_TYPES } from '../../../utils/constants';
-
-export const unescapeString = ( arg ) => {
-	return decodeEntities( arg );
-};
-
-/**
- * Returns a term object with name unescaped.
- *
- * @param {Object} term The term object to unescape.
- *
- * @return {Object} Term object with name property unescaped.
- */
-export const unescapeTerm = ( term ) => {
-	return {
-		...term,
-		name: unescapeString( term.name ),
-	};
-};
-
-/**
- * Shared reference to an empty array for cases where it is important to avoid
- * returning a new array reference on every invocation.
- *
- * @type {Array<any>}
- */
-const EMPTY_ARRAY = [];
-
-/**
- * Module constants
- */
-const MAX_TERMS_SUGGESTIONS = 20;
-const DEFAULT_QUERY = {
-	per_page: MAX_TERMS_SUGGESTIONS,
-	_fields: 'id,name',
-	context: 'view',
-};
-
-const isSameTermName = ( termA, termB ) =>
-	unescapeString( termA ).toLowerCase() ===
-	unescapeString( termB ).toLowerCase();
-
-const termNamesToIds = ( names, terms ) => {
-	return names.map(
-		( termName ) =>
-			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
-	);
-};
-
-export default function PatternCategories( { post } ) {
-	const slug = 'wp_pattern_category';
-	const [ values, setValues ] = useState( [] );
-	const [ search, setSearch ] = useState( '' );
-	const debouncedSearch = useDebounce( setSearch, 500 );
-
-	const {
-		terms,
-		taxonomy,
-		hasAssignAction,
-		hasCreateAction,
-		hasResolvedTerms,
-	} = useSelect(
-		( select ) => {
-			const { getEntityRecords, getTaxonomy, hasFinishedResolution } =
-				select( coreStore );
-			const _taxonomy = getTaxonomy( slug );
-			const _termIds =
-				post?.wp_pattern_category?.length > 0
-					? post?.wp_pattern_category
-					: EMPTY_ARRAY;
-			const query = {
-				...DEFAULT_QUERY,
-				include: _termIds?.join( ',' ),
-				per_page: -1,
-			};
-
-			return {
-				hasCreateAction: _taxonomy
-					? post._links?.[
-							'wp:action-create-' + _taxonomy.rest_base
-					  ] ?? false
-					: false,
-				hasAssignAction: _taxonomy
-					? post._links?.[
-							'wp:action-assign-' + _taxonomy.rest_base
-					  ] ?? false
-					: false,
-				taxonomy: _taxonomy,
-				termIds: _termIds,
-				terms: _termIds?.length
-					? getEntityRecords( 'taxonomy', slug, query )
-					: EMPTY_ARRAY,
-				hasResolvedTerms: hasFinishedResolution( 'getEntityRecords', [
-					'taxonomy',
-					slug,
-					query,
-				] ),
-			};
-		},
-		[ slug, post ]
-	);
-
-	const { searchResults } = useSelect(
-		( select ) => {
-			const { getEntityRecords } = select( coreStore );
-
-			return {
-				searchResults: !! search
-					? getEntityRecords( 'taxonomy', slug, {
-							...DEFAULT_QUERY,
-							search,
-					  } )
-					: EMPTY_ARRAY,
-			};
-		},
-		[ search, slug ]
-	);
-
-	// Update terms state only after the selectors are resolved.
-	// We're using this to avoid terms temporarily disappearing on slow networks
-	// while core data makes REST API requests.
-	useEffect( () => {
-		if ( hasResolvedTerms ) {
-			const newValues = ( terms ?? [] ).map( ( term ) =>
-				unescapeString( term.name )
-			);
-
-			setValues( newValues );
-		}
-	}, [ terms, hasResolvedTerms ] );
-
-	const suggestions = useMemo( () => {
-		return ( searchResults ?? [] ).map( ( term ) =>
-			unescapeString( term.name )
-		);
-	}, [ searchResults ] );
-
-	const { saveEntityRecord, editEntityRecord, invalidateResolution } =
-		useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	if ( ! hasAssignAction ) {
-		return null;
-	}
-
-	async function findOrCreateTerm( term ) {
-		try {
-			const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
-				throwOnError: true,
-			} );
-			invalidateResolution( 'getUserPatternCategories' );
-			return unescapeTerm( newTerm );
-		} catch ( error ) {
-			if ( error.code !== 'term_exists' ) {
-				throw error;
-			}
-
-			return {
-				id: error.data.term_id,
-				name: term.name,
-			};
-		}
-	}
-
-	function onUpdateTerms( newTermIds ) {
-		editEntityRecord( 'postType', PATTERN_TYPES.user, post.id, {
-			wp_pattern_category: newTermIds,
-		} );
-	}
-
-	function onChange( termNames ) {
-		const availableTerms = [
-			...( terms ?? [] ),
-			...( searchResults ?? [] ),
-		];
-		const uniqueTerms = termNames.reduce( ( acc, name ) => {
-			if (
-				! acc.some( ( n ) => n.toLowerCase() === name.toLowerCase() )
-			) {
-				acc.push( name );
-			}
-			return acc;
-		}, [] );
-
-		const newTermNames = uniqueTerms.filter(
-			( termName ) =>
-				! availableTerms.find( ( term ) =>
-					isSameTermName( term.name, termName )
-				)
-		);
-
-		// Optimistically update term values.
-		// The selector will always re-fetch terms later.
-		setValues( uniqueTerms );
-
-		if ( newTermNames.length === 0 ) {
-			return onUpdateTerms(
-				termNamesToIds( uniqueTerms, availableTerms )
-			);
-		}
-
-		if ( ! hasCreateAction ) {
-			return;
-		}
-
-		Promise.all(
-			newTermNames.map( ( termName ) =>
-				findOrCreateTerm( { name: termName } )
-			)
-		)
-			.then( ( newTerms ) => {
-				const newAvailableTerms = availableTerms.concat( newTerms );
-				return onUpdateTerms(
-					termNamesToIds( uniqueTerms, newAvailableTerms )
-				);
-			} )
-			.catch( ( error ) => {
-				createErrorNotice( error.message, {
-					type: 'snackbar',
-				} );
-			} );
-	}
-
-	const singularName =
-		taxonomy?.labels?.singular_name ??
-		( slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' ) );
-	const termAddedLabel = sprintf(
-		/* translators: %s: term name. */
-		_x( '%s added', 'term' ),
-		singularName
-	);
-	const termRemovedLabel = sprintf(
-		/* translators: %s: term name. */
-		_x( '%s removed', 'term' ),
-		singularName
-	);
-	const removeTermLabel = sprintf(
-		/* translators: %s: term name. */
-		_x( 'Remove %s', 'term' ),
-		singularName
-	);
-
-	return (
-		<PanelRow initialOpen={ true } title={ __( 'Categories' ) }>
-			<FlexBlock>
-				<FormTokenField
-					__next40pxDefaultSize
-					value={ values }
-					suggestions={ suggestions }
-					onChange={ onChange }
-					onInputChange={ debouncedSearch }
-					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-					label={ __( 'Pattern categories' ) }
-					messages={ {
-						added: termAddedLabel,
-						removed: termRemovedLabel,
-						remove: removeTermLabel,
-					} }
-					tokenizeOnBlur
-				/>
-			</FlexBlock>
-		</PanelRow>
-	);
-}