diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 783b45da932a3d..2215625596dc5c 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -629,8 +629,7 @@ function BlockListBlockProvider( props ) { const attributes = getBlockAttributes( clientId ); const { name: blockName, isValid } = blockWithoutAttributes; const blockType = getBlockType( blockName ); - const { supportsLayout, __unstableIsPreviewMode: isPreviewMode } = - getSettings(); + const { supportsLayout, isPreviewMode } = getSettings(); const hasLightBlockWrapper = blockType?.apiVersion > 1; const previewContext = { isPreviewMode, diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 8e8f69f46ae276..2d91108ccb4123 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -187,7 +187,7 @@ function Items( { const _order = getBlockOrder( rootClientId ); - if ( getSettings().__unstableIsPreviewMode ) { + if ( getSettings().isPreviewMode ) { return { order: _order, selectedBlocks: EMPTY_ARRAY, diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index 1c9bbe571db320..9eef0f1dc2abd5 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -59,7 +59,7 @@ export function BlockPreview( { () => ( { ...originalSettings, focusMode: false, // Disable "Spotlight mode". - __unstableIsPreviewMode: true, + isPreviewMode: true, } ), [ originalSettings ] ); @@ -124,7 +124,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) { ...originalSettings, styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles. focusMode: false, // Disable "Spotlight mode". - __unstableIsPreviewMode: true, + isPreviewMode: true, } ), [ originalSettings ] ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index b14514f934fb3e..a69d8db29e07df 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -117,7 +117,7 @@ function Iframe( { const settings = getSettings(); return { resolvedAssets: settings.__unstableResolvedAssets, - isPreviewMode: settings.__unstableIsPreviewMode, + isPreviewMode: settings.isPreviewMode, }; }, [] ); const { styles = '', scripts = '' } = resolvedAssets; diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js index 8c24b797efeac8..abbb122ae3a0e0 100644 --- a/packages/block-editor/src/components/provider/index.js +++ b/packages/block-editor/src/components/provider/index.js @@ -46,9 +46,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider( return ( - { ! settings?.__unstableIsPreviewMode && ( - - ) } + { ! settings?.isPreviewMode && } { children } ); diff --git a/packages/block-editor/src/components/provider/test/experimental-provider.js b/packages/block-editor/src/components/provider/test/experimental-provider.js index 2bb2aaadce95cc..8bb94698fffc81 100644 --- a/packages/block-editor/src/components/provider/test/experimental-provider.js +++ b/packages/block-editor/src/components/provider/test/experimental-provider.js @@ -5,7 +5,7 @@ import { render } from '@testing-library/react'; /** * WordPress dependencies */ -import { useRegistry } from '@wordpress/data'; +import { useRegistry, useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -21,6 +21,20 @@ const HasEditorSetting = ( props ) => { return

Test.

; }; +const PreviewModeGetter = () => { + const previewModeKeys = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + const settings = getSettings(); + return { + // This property will be removed in the future. There is a test that asserts we're throwing a deprecation warning. + __unstableIsPreviewMode: settings.__unstableIsPreviewMode, + isPreviewMode: settings.isPreviewMode, + }; + }, [] ); + + return <>{ JSON.stringify( previewModeKeys ) }; +}; + describe( 'BlockEditorProvider', () => { let registry; const setRegistry = ( reg ) => { @@ -58,6 +72,34 @@ describe( 'BlockEditorProvider', () => { const settings = registry.select( blockEditorStore ).getSettings(); expect( settings ).toHaveProperty( 'stableSetting' ); } ); + it( 'preserves deprecated getters incoming from the settings reducer', async () => { + const consoleWarn = jest + .spyOn( global.console, 'warn' ) + .mockImplementation(); + + const { container } = render( + + + + ); + + expect( container ).toHaveTextContent( + JSON.stringify( { + __unstableIsPreviewMode: true, + isPreviewMode: true, + } ) + ); + + expect( consoleWarn ).toHaveBeenCalledWith( + '__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.' + ); + + consoleWarn.mockRestore(); + } ); } ); describe( 'ExperimentalBlockEditorProvider', () => { diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 54877eafc36901..8314ad872468b2 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -167,7 +167,8 @@ export const SETTINGS_DEFAULTS = { __mobileEnablePageTemplates: false, __experimentalBlockPatterns: [], __experimentalBlockPatternCategories: [], - __unstableIsPreviewMode: false, + + isPreviewMode: false, // These settings will be completely revamped in the future. // The goal is to evolve this into an API which will instruct diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 0ca3eb2cf522e6..e79833e0a73da7 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { Platform } from '@wordpress/element'; +import deprecated from '@wordpress/deprecated'; import { speak } from '@wordpress/a11y'; import { __ } from '@wordpress/i18n'; @@ -41,14 +42,32 @@ export function __experimentalUpdateSettings( settings, { stripExperimentalSettings = false, reset = false } = {} ) { - let cleanSettings = settings; + let incomingSettings = settings; + + if ( Object.hasOwn( incomingSettings, '__unstableIsPreviewMode' ) ) { + deprecated( + "__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings", + { + since: '6.8', + alternative: 'isPreviewMode', + } + ); + + incomingSettings = { ...incomingSettings }; + incomingSettings.isPreviewMode = + incomingSettings.__unstableIsPreviewMode; + delete incomingSettings.__unstableIsPreviewMode; + } + + let cleanSettings = incomingSettings; + // There are no plugins in the mobile apps, so there is no // need to strip the experimental settings: if ( stripExperimentalSettings && Platform.OS === 'web' ) { cleanSettings = {}; - for ( const key in settings ) { + for ( const key in incomingSettings ) { if ( ! privateSettings.includes( key ) ) { - cleanSettings[ key ] = settings[ key ]; + cleanSettings[ key ] = incomingSettings[ key ]; } } } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 1435e815813c46..2f0fa70d616fd9 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -8,6 +8,7 @@ import fastDeepEqual from 'fast-deep-equal/es6'; */ import { pipe } from '@wordpress/compose'; import { combineReducers, select } from '@wordpress/data'; +import deprecated from '@wordpress/deprecated'; import { store as blocksStore } from '@wordpress/blocks'; /** * Internal dependencies @@ -1660,17 +1661,30 @@ export function template( state = { isValid: true }, action ) { */ export function settings( state = SETTINGS_DEFAULTS, action ) { switch ( action.type ) { - case 'UPDATE_SETTINGS': - if ( action.reset ) { - return { - ...SETTINGS_DEFAULTS, - ...action.settings, - }; - } - return { - ...state, - ...action.settings, - }; + case 'UPDATE_SETTINGS': { + const updatedSettings = action.reset + ? { + ...SETTINGS_DEFAULTS, + ...action.settings, + } + : { + ...state, + ...action.settings, + }; + + Object.defineProperty( updatedSettings, '__unstableIsPreviewMode', { + get() { + deprecated( '__unstableIsPreviewMode', { + since: '6.8', + alternative: 'isPreviewMode', + } ); + + return this.isPreviewMode; + }, + } ); + + return updatedSettings; + } } return state; diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index f960363cdb0ddb..ce973e44f4523b 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/packages/block-editor/src/store/test/actions.js @@ -1125,6 +1125,47 @@ describe( 'actions', () => { } ); } ); + describe( 'updateSettings', () => { + it( 'warns when setting the deprecated __unstableIsPreviewMode property and sets the stable property instead', () => { + const consoleWarn = jest + .spyOn( global.console, 'warn' ) + .mockImplementation(); + + const store = createRegistry().registerStore( + blockEditorStoreName, + { + actions, + selectors, + reducer, + } + ); + + store.dispatch( + updateSettings( { + __unstableIsPreviewMode: true, + } ) + ); + + expect( consoleWarn ).toHaveBeenCalledWith( + "__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings is deprecated since version 6.8. Please use isPreviewMode instead." + ); + + consoleWarn.mockClear(); + + expect( store.getState().settings.__unstableIsPreviewMode ).toBe( + true + ); + + expect( store.getState().settings.isPreviewMode ).toBe( true ); + + expect( consoleWarn ).toHaveBeenCalledWith( + '__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.' + ); + + consoleWarn.mockRestore(); + } ); + } ); + describe( 'registerInserterMediaCategory', () => { describe( 'should log errors when invalid', () => { it( 'valid object', () => { diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 1f1b9a9143d981..c99d639ba8a09e 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -32,6 +32,7 @@ import { insertionPoint, template, blockListSettings, + settings, lastBlockAttributesChange, lastBlockInserted, blockEditingModes, @@ -3070,6 +3071,28 @@ describe( 'state', () => { } ); } ); + describe( 'settings', () => { + it( 'should warn about __unstableIsPreviewMode deprecation', () => { + const consoleWarn = jest + .spyOn( global.console, 'warn' ) + .mockImplementation(); + + const settingsObject = settings( undefined, { + type: 'UPDATE_SETTINGS', + reset: true, + } ); + + expect( settingsObject.__unstableIsPreviewMode ).toBeDefined(); + expect( settingsObject.isPreviewMode ).toBeDefined(); + + expect( consoleWarn ).toHaveBeenCalledWith( + '__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.' + ); + + consoleWarn.mockRestore(); + } ); + } ); + describe( 'blockListSettings', () => { it( 'should add new settings', () => { const original = deepFreeze( {} ); diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index dcdfb157b235b6..e6dd0368249627 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -72,7 +72,7 @@ export function useSpecificEditorSettings() { defaultRenderingMode, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord, - __unstableIsPreviewMode: canvas === 'view', + isPreviewMode: canvas === 'view', }; }, [ settings, diff --git a/packages/edit-site/src/components/page-patterns/use-pattern-settings.js b/packages/edit-site/src/components/page-patterns/use-pattern-settings.js index 28a16b1d7ed7db..274604395baac5 100644 --- a/packages/edit-site/src/components/page-patterns/use-pattern-settings.js +++ b/packages/edit-site/src/components/page-patterns/use-pattern-settings.js @@ -43,7 +43,7 @@ export default function usePatternSettings() { return { ...restStoredSettings, __experimentalBlockPatterns: blockPatterns, - __unstableIsPreviewMode: true, + isPreviewMode: true, }; }, [ storedSettings, blockPatterns ] ); diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js index d43b5e8d2ac025..5ce95872e0c9ae 100644 --- a/packages/edit-site/src/components/revisions/index.js +++ b/packages/edit-site/src/components/revisions/index.js @@ -53,7 +53,10 @@ function Revisions( { userConfig, blocks } ) { [] ); const settings = useMemo( - () => ( { ...originalSettings, __unstableIsPreviewMode: true } ), + () => ( { + ...originalSettings, + isPreviewMode: true, + } ), [ originalSettings ] ); diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 42b6e3f4fc99b6..0d8c49d76af507 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -91,7 +91,10 @@ function StyleBook( { ); const settings = useMemo( - () => ( { ...originalSettings, __unstableIsPreviewMode: true } ), + () => ( { + ...originalSettings, + isPreviewMode: true, + } ), [ originalSettings ] ); @@ -328,7 +331,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => { () => ( { ...originalSettings, focusMode: false, // Disable "Spotlight mode". - __unstableIsPreviewMode: true, + isPreviewMode: true, } ), [ originalSettings ] ); diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index b1471e25583415..a9c726f660b22e 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -57,7 +57,7 @@ function useEditorCommandLoader() { isDistractionFree: get( 'core', 'distractionFree' ), isFocusMode: get( 'core', 'focusMode' ), isTopToolbar: get( 'core', 'fixedToolbar' ), - isPreviewMode: getSettings().__unstableIsPreviewMode, + isPreviewMode: getSettings().isPreviewMode, isViewable: getPostType( getCurrentPostType() )?.viewable ?? false, isCodeEditingEnabled: getEditorSettings().codeEditingEnabled, isRichEditingEnabled: getEditorSettings().richEditingEnabled, diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 6dc4c3fe770608..4c3fcc30e23d82 100644 --- a/packages/editor/src/components/editor-interface/index.js +++ b/packages/editor/src/components/editor-interface/index.js @@ -83,7 +83,7 @@ export default function EditorInterface( { isInserterOpened: select( editorStore ).isInserterOpened(), isListViewOpened: select( editorStore ).isListViewOpened(), isDistractionFree: get( 'core', 'distractionFree' ), - isPreviewMode: editorSettings.__unstableIsPreviewMode, + isPreviewMode: editorSettings.isPreviewMode, showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), // translators: Default label for the Document in the Block Breadcrumb. documentLabel: postTypeLabel || _x( 'Document', 'noun' ), diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 87fea30e31cdb9..50d02610062c00 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -330,7 +330,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( useSubRegistry={ false } > { children } - { ! settings.__unstableIsPreviewMode && ( + { ! settings.isPreviewMode && ( <> diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 12a67e44262b21..170ec96c107288 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -74,6 +74,7 @@ const BLOCK_EDITOR_SETTINGS = [ 'imageDimensions', 'imageEditing', 'imageSizes', + 'isPreviewMode', 'isRTL', 'locale', 'maxWidth', @@ -85,7 +86,6 @@ const BLOCK_EDITOR_SETTINGS = [ 'supportsLayout', 'widgetTypesToHideFromLegacyWidgetBlock', '__unstableHasCustomAppender', - '__unstableIsPreviewMode', '__unstableResolvedAssets', '__unstableIsBlockBasedTheme', ]; diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 0f772075f5d4ae..6462c4a3f83682 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -166,7 +166,7 @@ function VisualEditor( { deviceType: getDeviceType(), isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord, postType: postTypeSlug, - isPreview: editorSettings.__unstableIsPreviewMode, + isPreview: editorSettings.isPreviewMode, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore );