@wordpress/editor 13.26.0 → 13.27.0

package/src/components/preferences-modal/enable-panel.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { compose, ifCondition } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+export default compose(
+	withSelect( ( select, { panelName } ) => {
+		const { isEditorPanelEnabled, isEditorPanelRemoved } =
+			select( editorStore );
+		return {
+			isRemoved: isEditorPanelRemoved( panelName ),
+			isChecked: isEditorPanelEnabled( panelName ),
+		};
+	} ),
+	ifCondition( ( { isRemoved } ) => ! isRemoved ),
+	withDispatch( ( dispatch, { panelName } ) => ( {
+		onChange: () =>
+			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
+	} ) )
+)( PreferenceBaseOption );

package/src/components/preferences-modal/enable-plugin-document-setting-panel.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import EnablePanelOption from './enable-panel';
+
+const { Fill, Slot } = createSlotFill(
+	'EnablePluginDocumentSettingPanelOption'
+);
+
+const EnablePluginDocumentSettingPanelOption = ( { label, panelName } ) => (
+	<Fill>
+		<EnablePanelOption label={ label } panelName={ panelName } />
+	</Fill>
+);
+
+EnablePluginDocumentSettingPanelOption.Slot = Slot;
+
+export default EnablePluginDocumentSettingPanelOption;

package/src/components/preferences-modal/index.js

@@ -0,0 +1,269 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import {
+	store as preferencesStore,
+	privateApis as preferencesPrivateApis,
+} from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import EnablePanelOption from './enable-panel';
+import EnablePluginDocumentSettingPanelOption from './enable-plugin-document-setting-panel';
+import BlockManager from '../block-manager';
+import PostTaxonomies from '../post-taxonomies';
+import PostFeaturedImageCheck from '../post-featured-image/check';
+import PostExcerptCheck from '../post-excerpt/check';
+import PageAttributesCheck from '../page-attributes/check';
+import PostTypeSupportCheck from '../post-type-support-check';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const {
+	PreferencesModal,
+	PreferencesModalTabs,
+	PreferencesModalSection,
+	PreferenceToggleControl,
+} = unlock( preferencesPrivateApis );
+
+export default function EditorPreferencesModal( {
+	extraSections = {},
+	isActive,
+	onClose,
+} ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const { showBlockBreadcrumbsOption } = useSelect(
+		( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const { get } = select( preferencesStore );
+			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
+			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
+			return {
+				showBlockBreadcrumbsOption:
+					! isDistractionFreeEnabled &&
+					isLargeViewport &&
+					isRichEditingEnabled,
+			};
+		},
+		[ isLargeViewport ]
+	);
+
+	const { setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editorStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	const toggleDistractionFree = () => {
+		setPreference( 'core', 'fixedToolbar', true );
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		// Todo: Check sidebar when closing/opening distraction free.
+	};
+
+	const turnOffDistractionFree = () => {
+		setPreference( 'core', 'distractionFree', false );
+	};
+
+	const sections = useMemo(
+		() => [
+			{
+				name: 'general',
+				tabLabel: __( 'General' ),
+				content: (
+					<>
+						<PreferencesModalSection title={ __( 'Interface' ) }>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="showListViewByDefault"
+								help={ __(
+									'Opens the block list view sidebar by default.'
+								) }
+								label={ __( 'Always open list view' ) }
+							/>
+							{ showBlockBreadcrumbsOption && (
+								<PreferenceToggleControl
+									scope="core"
+									featureName="showBlockBreadcrumbs"
+									help={ __(
+										'Display the block hierarchy trail at the bottom of the editor.'
+									) }
+									label={ __( 'Show block breadcrumbs' ) }
+								/>
+							) }
+							<PreferenceToggleControl
+								scope="core"
+								featureName="allowRightClickOverrides"
+								help={ __(
+									'Allows contextual list view menus via right-click, overriding browser defaults.'
+								) }
+								label={ __(
+									'Allow right-click contextual menus'
+								) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection
+							title={ __( 'Document settings' ) }
+							description={ __(
+								'Select what settings are shown in the document panel.'
+							) }
+						>
+							<EnablePluginDocumentSettingPanelOption.Slot />
+							<PostTaxonomies
+								taxonomyWrapper={ ( content, taxonomy ) => (
+									<EnablePanelOption
+										label={ taxonomy.labels.menu_name }
+										panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+									/>
+								) }
+							/>
+							<PostFeaturedImageCheck>
+								<EnablePanelOption
+									label={ __( 'Featured image' ) }
+									panelName="featured-image"
+								/>
+							</PostFeaturedImageCheck>
+							<PostExcerptCheck>
+								<EnablePanelOption
+									label={ __( 'Excerpt' ) }
+									panelName="post-excerpt"
+								/>
+							</PostExcerptCheck>
+							<PostTypeSupportCheck
+								supportKeys={ [ 'comments', 'trackbacks' ] }
+							>
+								<EnablePanelOption
+									label={ __( 'Discussion' ) }
+									panelName="discussion-panel"
+								/>
+							</PostTypeSupportCheck>
+							<PageAttributesCheck>
+								<EnablePanelOption
+									label={ __( 'Page attributes' ) }
+									panelName="page-attributes"
+								/>
+							</PageAttributesCheck>
+						</PreferencesModalSection>
+						{ extraSections?.general }
+					</>
+				),
+			},
+			{
+				name: 'appearance',
+				tabLabel: __( 'Appearance' ),
+				content: (
+					<PreferencesModalSection
+						title={ __( 'Appearance' ) }
+						description={ __(
+							'Customize the editor interface to suit your needs.'
+						) }
+					>
+						<PreferenceToggleControl
+							scope="core"
+							featureName="fixedToolbar"
+							onToggle={ turnOffDistractionFree }
+							help={ __(
+								'Access all block and document tools in a single place.'
+							) }
+							label={ __( 'Top toolbar' ) }
+						/>
+						<PreferenceToggleControl
+							scope="core"
+							featureName="distractionFree"
+							onToggle={ toggleDistractionFree }
+							help={ __(
+								'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+							) }
+							label={ __( 'Distraction free' ) }
+						/>
+						<PreferenceToggleControl
+							scope="core"
+							featureName="focusMode"
+							help={ __(
+								'Highlights the current block and fades other content.'
+							) }
+							label={ __( 'Spotlight mode' ) }
+						/>
+						{ extraSections?.appearance }
+					</PreferencesModalSection>
+				),
+			},
+			{
+				name: 'accessibility',
+				tabLabel: __( 'Accessibility' ),
+				content: (
+					<>
+						<PreferencesModalSection
+							title={ __( 'Navigation' ) }
+							description={ __(
+								'Optimize the editing experience for enhanced control.'
+							) }
+						>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="keepCaretInsideBlock"
+								help={ __(
+									'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
+								) }
+								label={ __(
+									'Contain text cursor inside block'
+								) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection title={ __( 'Interface' ) }>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="showIconLabels"
+								label={ __( 'Show button text labels' ) }
+								help={ __(
+									'Show text instead of icons on buttons across the interface.'
+								) }
+							/>
+						</PreferencesModalSection>
+					</>
+				),
+			},
+			{
+				name: 'blocks',
+				tabLabel: __( 'Blocks' ),
+				content: (
+					<>
+						<PreferencesModalSection title={ __( 'Inserter' ) }>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="mostUsedBlocks"
+								help={ __(
+									'Adds a category with the most frequently used blocks in the inserter.'
+								) }
+								label={ __( 'Show most used blocks' ) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection
+							title={ __( 'Manage block visibility' ) }
+							description={ __(
+								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
+							) }
+						>
+							<BlockManager />
+						</PreferencesModalSection>
+					</>
+				),
+			},
+		],
+		[ isLargeViewport, showBlockBreadcrumbsOption, extraSections ]
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return (
+		<PreferencesModal closeModal={ onClose }>
+			<PreferencesModalTabs sections={ sections } />
+		</PreferencesModal>
+	);
+}

package/src/components/preferences-modal/test/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import EditPostPreferencesModal from '../';
+
+// This allows us to tweak the returned value on each test.
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
+
+describe( 'EditPostPreferencesModal', () => {
+	it( 'should not render when the modal is not active', () => {
+		useSelect.mockImplementation( () => [ false, false, false ] );
+		render( <EditPostPreferencesModal /> );
+		expect(
+			screen.queryByRole( 'dialog', { name: 'Preferences' } )
+		).not.toBeInTheDocument();
+	} );
+} );

package/src/components/provider/disable-non-page-content-blocks.js

@@ -44,9 +44,9 @@ function DisableBlock( { clientId } ) {
 export default function DisableNonPageContentBlocks() {
 	useBlockEditingMode( 'disabled' );
 	const clientIds = useSelect( ( select ) => {
-		const { __experimentalGetGlobalBlocksByName } =
-			select( blockEditorStore );
-		return __experimentalGetGlobalBlocksByName( PAGE_CONTENT_BLOCK_TYPES );
+		return select( blockEditorStore ).getBlocksByName(
+			PAGE_CONTENT_BLOCK_TYPES
+		);
 	}, [] );
 
 	return clientIds.map( ( clientId ) => {

package/src/components/provider/use-block-editor-settings.js

@@ -7,10 +7,12 @@ import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
+	fetchBlockPatterns,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -29,7 +31,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalPreferredStyleVariations',
 	'__unstableGalleryWithImageBlocks',
 	'alignWide',
-	'allowedBlockTypes',
 	'blockInspectorTabs',
 	'allowedMimeTypes',
 	'bodyPlaceholder',
@@ -88,18 +89,19 @@ function useBlockEditorSettings( settings, postType, postId ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		allowRightClickOverrides,
+		blockTypes,
 		focusMode,
 		hasFixedToolbar,
 		isDistractionFree,
 		keepCaretInsideBlock,
 		reusableBlocks,
 		hasUploadPermissions,
+		hiddenBlockTypes,
 		canUseUnfilteredHTML,
 		userCanCreatePages,
 		pageOnFront,
 		pageForPosts,
 		userPatternCategories,
-		restBlockPatterns,
 		restBlockPatternCategories,
 	} = useSelect(
 		( select ) => {
@@ -110,11 +112,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				getEntityRecord,
 				getUserPatternCategories,
 				getEntityRecords,
-				getBlockPatterns,
 				getBlockPatternCategories,
 			} = select( coreStore );
 			const { get } = select( preferencesStore );
-
+			const { getBlockTypes } = select( blocksStore );
 			const siteSettings = canUser( 'read', 'settings' )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
@@ -124,6 +125,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					'core',
 					'allowRightClickOverrides'
 				),
+				blockTypes: getBlockTypes(),
 				canUseUnfilteredHTML: getRawEntityRecord(
 					'postType',
 					postType,
@@ -132,6 +134,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				focusMode: get( 'core', 'focusMode' ),
 				hasFixedToolbar:
 					get( 'core', 'fixedToolbar' ) || ! isLargeViewport,
+				hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
 				reusableBlocks: isWeb
@@ -144,7 +147,6 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				pageOnFront: siteSettings?.page_on_front,
 				pageForPosts: siteSettings?.page_for_posts,
 				userPatternCategories: getUserPatternCategories(),
-				restBlockPatterns: getBlockPatterns(),
 				restBlockPatternCategories: getBlockPatternCategories(),
 			};
 		},
@@ -160,22 +162,16 @@ function useBlockEditorSettings( settings, postType, postId ) {
 
 	const blockPatterns = useMemo(
 		() =>
-			[
-				...( settingsBlockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-			]
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
-				.filter( ( { postTypes } ) => {
+			[ ...( settingsBlockPatterns || [] ) ].filter(
+				( { postTypes } ) => {
 					return (
 						! postTypes ||
 						( Array.isArray( postTypes ) &&
 							postTypes.includes( postType ) )
 					);
-				} ),
-		[ settingsBlockPatterns, restBlockPatterns, postType ]
+				}
+			),
+		[ settingsBlockPatterns, postType ]
 	);
 
 	const blockPatternCategories = useMemo(
@@ -215,6 +211,25 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ saveEntityRecord, userCanCreatePages ]
 	);
 
+	const allowedBlockTypes = useMemo( () => {
+		// Omit hidden block types if exists and non-empty.
+		if ( hiddenBlockTypes && hiddenBlockTypes.length > 0 ) {
+			// Defer to passed setting for `allowedBlockTypes` if provided as
+			// anything other than `true` (where `true` is equivalent to allow
+			// all block types).
+			const defaultAllowedBlockTypes =
+				true === settings.allowedBlockTypes
+					? blockTypes.map( ( { name } ) => name )
+					: settings.allowedBlockTypes || [];
+
+			return defaultAllowedBlockTypes.filter(
+				( type ) => ! hiddenBlockTypes.includes( type )
+			);
+		}
+
+		return settings.allowedBlockTypes;
+	}, [ settings.allowedBlockTypes, hiddenBlockTypes, blockTypes ] );
+
 	const forceDisableFocusMode = settings.focusMode === false;
 
 	return useMemo(
@@ -224,14 +239,26 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
-			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatterns: blockPatterns,
+			__experimentalFetchBlockPatterns: async () => {
+				return ( await fetchBlockPatterns() ).filter(
+					( { postTypes } ) => {
+						return (
+							! postTypes ||
+							( Array.isArray( postTypes ) &&
+								postTypes.includes( postType ) )
+						);
+					}
+				);
+			},
+			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
@@ -261,6 +288,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 		} ),
 		[
+			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode,
 			forceDisableFocusMode,

package/src/hooks/pattern-partial-syncing.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
-import { hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -31,43 +30,41 @@ const {
  */
 const withPartialSyncingControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const blockEditingMode = useBlockEditingMode();
-		const hasCustomFieldsSupport = hasBlockSupport(
-			props.name,
-			'__experimentalConnections',
-			false
-		);
-		const isEditingPattern = useSelect(
-			( select ) =>
-				select( editorStore ).getCurrentPostType() ===
-				PATTERN_TYPES.user,
-			[]
-		);
-
-		const shouldShowPartialSyncingControls =
-			hasCustomFieldsSupport &&
-			props.isSelected &&
-			isEditingPattern &&
-			blockEditingMode === 'default' &&
-			Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
-				props.name
-			);
+		const isSupportedBlock = Object.keys(
+			PARTIAL_SYNCING_SUPPORTED_BLOCKS
+		).includes( props.name );
 
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ shouldShowPartialSyncingControls && (
-					<PartialSyncingControls { ...props } />
+				{ props.isSelected && isSupportedBlock && (
+					<ControlsWithStoreSubscription { ...props } />
 				) }
 			</>
 		);
 	}
 );
 
-if ( window.__experimentalPatternPartialSyncing ) {
-	addFilter(
-		'editor.BlockEdit',
-		'core/editor/with-partial-syncing-controls',
-		withPartialSyncingControls
+// Split into a separate component to avoid a store subscription
+// on every block.
+function ControlsWithStoreSubscription( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	const isEditingPattern = useSelect(
+		( select ) =>
+			select( editorStore ).getCurrentPostType() === PATTERN_TYPES.user,
+		[]
+	);
+
+	return (
+		isEditingPattern &&
+		blockEditingMode === 'default' && (
+			<PartialSyncingControls { ...props } />
+		)
 	);
 }
+
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/with-partial-syncing-controls',
+	withPartialSyncingControls
+);

package/src/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './bindings';
 import './hooks';
 
 export { storeConfig, store } from './store';

package/src/private-apis.js

@@ -4,28 +4,32 @@
 import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
+import EnablePluginDocumentSettingPanelOption from './components/preferences-modal/enable-plugin-document-setting-panel';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import DocumentTools from './components/document-tools';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
 import PostViewLink from './components/post-view-link';
 import PreviewDropdown from './components/preview-dropdown';
-import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PreferencesModal from './components/preferences-modal';
 
 export const privateApis = {};
 lock( privateApis, {
 	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
+	EnablePluginDocumentSettingPanelOption,
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,
+	PluginPostExcerpt,
 	PostPanelRow,
 	PostViewLink,
 	PreviewDropdown,
-	PluginPostExcerpt,
+	PreferencesModal,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

package/src/store/defaults.js

@@ -9,6 +9,7 @@ import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
  * @property {boolean|Array} allowedBlockTypes     Allowed block types
  * @property {boolean}       richEditingEnabled    Whether rich editing is enabled or not
  * @property {boolean}       codeEditingEnabled    Whether code editing is enabled or not
+ * @property {boolean}       fontLibraryEnabled    Whether the font library is enabled or not.
  * @property {boolean}       enableCustomFields    Whether the WordPress custom fields are enabled or not.
  *                                                 true  = the user has opted to show the Custom Fields panel at the bottom of the editor.
  *                                                 false = the user has opted to hide the Custom Fields panel at the bottom of the editor.
@@ -26,6 +27,7 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 
 	richEditingEnabled: true,
 	codeEditingEnabled: true,
+	fontLibraryEnabled: true,
 	enableCustomFields: undefined,
 	defaultRenderingMode: 'post-only',
 };