Introduce ExperimentalBlockEditorProvider – a way to prevent setting …

…experimental block editor settings via the public BlockEditorProvider
WordPress · Jan 20, 2023 · 2513840 · 2513840
1 parent 83a1914
commit 2513840
Show file tree

Hide file tree

Showing 25 changed files with 323 additions and 144 deletions.
diff --git a/packages/block-editor/src/components/block-mover/stories/index.js b/packages/block-editor/src/components/block-mover/stories/index.js
@@ -11,7 +11,7 @@ import { Toolbar } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockMover from '../';
-import BlockEditorProvider from '../../provider';
+import { ExperimentalBlockEditorProvider } from '../../provider';
 import { store as blockEditorStore } from '../../../store';
 
 registerCoreBlocks();
@@ -35,9 +35,9 @@ function Provider( { children } ) {
 
 	return (
 		<div style={ wrapperStyle }>
-			<BlockEditorProvider value={ blocks }>
+			<ExperimentalBlockEditorProvider value={ blocks }>
 				{ children }
-			</BlockEditorProvider>
+			</ExperimentalBlockEditorProvider>
 		</div>
 	);
 }

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -14,7 +14,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import BlockEditorProvider from '../provider';
+import { ExperimentalBlockEditorProvider } from '../provider';
 import AutoHeightBlockPreview from './auto';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
@@ -66,13 +66,16 @@ export function BlockPreview( {
 	}
 
 	return (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
 				minHeight={ minHeight }
 				additionalStyles={ additionalStyles }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }
 
@@ -126,12 +129,15 @@ export function useBlockPreview( {
 	);
 
 	const children = (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<BlockListItems
 				renderAppender={ false }
 				__experimentalLayout={ __experimentalLayout }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 
 	return {

diff --git a/packages/block-editor/src/components/inserter/stories/index.js b/packages/block-editor/src/components/inserter/stories/index.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import BlockLibrary from '../library';
-import BlockEditorProvider from '../../provider';
+import { ExperimentalBlockEditorProvider } from '../../provider';
 import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
@@ -16,11 +16,11 @@ export const libraryWithoutPatterns = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider>
+		<ExperimentalBlockEditorProvider>
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -32,7 +32,7 @@ export const libraryWithPatterns = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -41,7 +41,7 @@ export const libraryWithPatterns = () => {
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -53,7 +53,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -63,7 +63,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -75,7 +75,7 @@ export const quickInserter = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -85,6 +85,6 @@ export const quickInserter = () => {
 			<div style={ wrapperStyle }>
 				<Inserter __experimentalIsQuick />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,21 +14,81 @@ import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
-function BlockEditorProvider( props ) {
-	const { children, settings } = props;
+export const ExperimentalBlockEditorProvider = withRegistryProvider(
+	( props ) => {
+		const { children, settings } = props;
 
-	const { updateSettings } = useDispatch( blockEditorStore );
-	useEffect( () => {
-		updateSettings( {
-			...settings,
-			__internalIsInitialized: true,
-		} );
-	}, [ settings ] );
+		const { updateSettings } = useDispatch( blockEditorStore );
+		useEffect( () => {
+			updateSettings( {
+				...settings,
+				__internalIsInitialized: true,
+			} );
+		}, [ settings ] );
 
-	// Syncs the entity provider with changes in the block-editor store.
-	useBlockSync( props );
+		// Syncs the entity provider with changes in the block-editor store.
+		useBlockSync( props );
 
-	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
-}
+		return <BlockRefsProvider>{ children }</BlockRefsProvider>;
+	}
+);
 
-export default withRegistryProvider( BlockEditorProvider );
+/**
+ * The public BlockEditorProvider does not accept any experimental settings
+ * introduced after WordPress 6.1. To use them, you need to rely on
+ * ExperimentalBlockEditorProvider.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/46131
+ */
+const publicExperimentalSettingsFromBeforeWordPress62 = [
+	'__experimentalBlockDirectory',
+	'__experimentalDiscussionSettings',
+	'__experimentalFeatures',
+	'__experimentalPreferredStyleVariations',
+	'__experimentalSetIsInserterOpened',
+	'__unstableGalleryWithImageBlocks',
+	'__experimentalReusableBlocks',
+	'__experimentalBlockPatterns',
+	'__experimentalBlockPatternCategories',
+	'__experimentalAdditionalBlockPatterns',
+	'__experimentalAdditionalBlockPatternCategories',
+	'__experimentalFetchLinkSuggestions',
+	'__unstableEnableFullSiteEditingBlocks',
+	'__unstableIsBlockBasedTheme',
+	'__unstableFetchMedia',
+	'__experimentalFetchUrlData',
+	'__experimentalFetchRichUrlData',
+	'__experimentalCanUserUseUnfilteredHTML',
+	'__experimentalUndo',
+	'__experimentalCreatePageEntity',
+	'__experimentalUserCanCreatePages',
+	'__experimentalPreferPatternsOnRoot',
+	'__unstableIsPreviewMode',
+];
+const BlockEditorProvider = ( props ) => {
+	const cleanSettings = useMemo( () => {
+		const clean = {};
+		for ( const key in props.settings ) {
+			if (
+				key.startsWith( '__' ) &&
+				! publicExperimentalSettingsFromBeforeWordPress62.includes(
+					key
+				)
+			) {
+				continue;
+			}
+			clean[ key ] = props.settings[ key ];
+		}
+		return clean;
+	}, [ props.settings ] );
+	return (
+		<ExperimentalBlockEditorProvider
+			{ ...props }
+			settings={ cleanSettings }
+		>
+			{ props.children }
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
+export default BlockEditorProvider;
diff --git a/packages/block-editor/src/experiments.js b/packages/block-editor/src/experiments.js
@@ -7,6 +7,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/exp
  * Internal dependencies
  */
 import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -20,4 +21,5 @@ export const { lock, unlock } =
 export const experiments = {};
 lock( experiments, {
 	...globalStyles,
+	ExperimentalBlockEditorProvider,
 } );
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
@@ -33,6 +33,7 @@
 		"@wordpress/data": "file:../data",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
+		"@wordpress/experiments": "file:../experiments",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",

diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-editor-provider.js b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-editor-provider.js
@@ -1,14 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { BlockEditorProvider } from '@wordpress/block-editor';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import useSidebarBlockEditor from './use-sidebar-block-editor';
 import useBlocksFocusControl from '../focus-control/use-blocks-focus-control';
 
+import { unlock } from '../../experiments';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorExperiments );
+
 export default function SidebarEditorProvider( {
 	sidebar,
 	settings,
@@ -19,14 +23,14 @@ export default function SidebarEditorProvider( {
 	useBlocksFocusControl( blocks );
 
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
 			settings={ settings }
 			useSubRegistry={ false }
 		>
 			{ children }
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }
diff --git a/packages/customize-widgets/src/experiments.js b/packages/customize-widgets/src/experiments.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/edit-site'
+	);
diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json
@@ -38,6 +38,7 @@
 		"@wordpress/data": "file:../data",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
+		"@wordpress/experiments": "file:../experiments",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -3,8 +3,8 @@
  */
 import {
 	BlockEditorKeyboardShortcuts,
-	BlockEditorProvider,
 	BlockTools,
+	blockEditorExperiments,
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
 import { useEntityBlockEditor } from '@wordpress/core-data';
@@ -43,6 +43,10 @@ import {
 	NAVIGATION_POST_POST_TYPE,
 } from '../../constants';
 
+import { unlock } from '../../experiments';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorExperiments );
+
 const interfaceLabels = {
 	/* translators: accessibility text for the navigation screen top bar landmark region. */
 	header: __( 'Navigation top bar' ),
@@ -117,7 +121,7 @@ export default function Layout( { blockEditorSettings } ) {
 					<BlockEditorKeyboardShortcuts.Register />
 					<NavigationEditorShortcuts.Register />
 					<NavigationEditorShortcuts saveBlocks={ savePost } />
-					<BlockEditorProvider
+					<ExperimentalBlockEditorProvider
 						value={ blocks }
 						onInput={ onInput }
 						onChange={ onChange }
@@ -198,7 +202,7 @@ export default function Layout( { blockEditorSettings } ) {
 							) }
 						</IsMenuNameControlFocusedContext.Provider>
 						<UnsavedChangesWarning />
-					</BlockEditorProvider>
+					</ExperimentalBlockEditorProvider>
 					<Popover.Slot />
 					<PluginArea />
 				</SlotFillProvider>

diff --git a/packages/edit-navigation/src/experiments.js b/packages/edit-navigation/src/experiments.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/edit-navigation'
+	);
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
@@ -39,6 +39,7 @@
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
+		"@wordpress/experiments": "file:../experiments",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",