Site Editor: Styles: preview template to put focus on styles

packages/block-editor/src/components/block-edit/index.js

@@ -88,7 +88,12 @@ export default function BlockEdit( {
 				]
 			) }
 		>
-			<Edit { ...props } />
+			<Edit
+				{ ...{
+					...props,
+					isSelected: isPreviewMode ? false : isSelected,
+				} }
+			/>
 			{ originalBlockClientId && (
 				<MultipleUsageWarning
 					originalBlockClientId={ originalBlockClientId }

packages/block-editor/src/components/block-list/block.js

@@ -611,6 +611,7 @@ function BlockListBlockProvider( props ) {
 			const blockType = getBlockType( blockName );
 			const { supportsLayout, isPreviewMode } = getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const _isSelected = isBlockSelected( clientId );
 			const previewContext = {
 				isPreviewMode,
 				blockWithoutAttributes,
@@ -627,6 +628,7 @@ function BlockListBlockProvider( props ) {
 					? getBlockDefaultClassName( blockName )
 					: undefined,
 				blockTitle: blockType?.title,
+				isSelected: _isSelected,
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -635,7 +637,6 @@ function BlockListBlockProvider( props ) {
 				return previewContext;
 			}
 
-			const _isSelected = isBlockSelected( clientId );
 			const canRemove = canRemoveBlock( clientId );
 			const canMove = canMoveBlock( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
@@ -666,7 +667,6 @@ function BlockListBlockProvider( props ) {
 				isSectionBlock: _isSectionBlock( clientId ),
 				canRemove,
 				canMove,
-				isSelected: _isSelected,
 				isTemporarilyEditingAsBlocks:
 					getTemporarilyEditingAsBlocks() === clientId,
 				blockEditingMode,

packages/block-editor/src/components/block-list/use-in-between-inserter.js

@@ -15,12 +15,14 @@ import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
-	const isInBetweenInserterDisabled = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree ||
-			unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
+	const isInBetweenInserterDisabled = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return (
+			settings.isDistractionFree ||
+			settings.isPreviewMode ||
+			unlock( select( blockEditorStore ) ).isZoomOut()
+		);
+	}, [] );
 	const {
 		getBlockListSettings,
 		getBlockIndex,

packages/block-editor/src/components/block-tools/index.js

@@ -87,6 +87,19 @@ export default function BlockTools( {
 		expandBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
+	const ref = useRef( false );
+	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
+	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
+
+	const isPreviewMode = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().isPreviewMode,
+		[]
+	);
+
+	if ( isPreviewMode ) {
+		return children;
+	}
+
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
@@ -193,13 +206,11 @@ export default function BlockTools( {
 			}
 		}
 	}
-	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
-	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
-			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
+			<InsertionPointOpenRef.Provider value={ ref }>
 				{ ! isTyping && ! isZoomOutMode && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }

packages/block-editor/src/components/rich-text/index.js

@@ -546,6 +546,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 		} = removeNativeProps( props );
 		return (
 			<Tag
+				ref={ ref }
 				{ ...contentProps }
 				dangerouslySetInnerHTML={ {
 					__html: valueToHTMLString( value, multiline ),

packages/edit-site/src/components/editor/index.js

@@ -86,7 +86,7 @@ const siteIconVariants = {
 export default function EditSiteEditor( { isPostsList = false } ) {
 	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view', path } = params;
 	const isLoading = useIsSiteEditorLoading();
 	useAdaptEditorToCanvas( canvas );
 	const entity = useResolveEditedEntity();
@@ -209,6 +209,17 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		duration: disableMotion ? 0 : 0.2,
 	};
 
+	const isGlobalStylesPreview = path === '/wp_global_styles';
+
+	const _settings = useMemo( () => {
+		return {
+			...settings,
+			isPreviewMode: isGlobalStylesPreview
+				? true
+				: settings.isPreviewMode,
+		};
+	}, [ settings, isGlobalStylesPreview ] );
+
 	return (
 		<>
 			<GlobalStylesRenderer
@@ -227,7 +238,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					postType={ postWithTemplate ? context.postType : postType }
 					postId={ postWithTemplate ? context.postId : postId }
 					templateId={ postWithTemplate ? postId : undefined }
-					settings={ settings }
+					settings={ _settings }
 					className={ clsx( 'edit-site-editor__editor-interface', {
 						'show-icon-labels': showIconLabels,
 					} ) }
@@ -237,6 +248,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					}
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+					showEditorFrame={ canvas === 'edit' }
 					title={ title }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }

packages/editor/src/components/document-tools/index.js

@@ -24,7 +24,11 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-function DocumentTools( { className, disableBlockTools = false } ) {
+function DocumentTools( {
+	className,
+	disableBlockTools = false,
+	isPreviewMode,
+} ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
@@ -116,7 +120,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">
-				{ ! isDistractionFree && (
+				{ ! isDistractionFree && ! isPreviewMode && (
 					<ToolbarItem
 						ref={ inserterSidebarToggleRef }
 						as={ Button }
@@ -134,7 +138,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ showTools && isLargeViewport && (
+						{ showTools && isLargeViewport && ! isPreviewMode && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
@@ -157,7 +161,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
 						/>
-						{ ! isDistractionFree && (
+						{ ! isDistractionFree && ! isPreviewMode && (
 							<ToolbarItem
 								as={ Button }
 								className="editor-document-tools__document-overview-toggle"

packages/editor/src/components/editor-interface/index.js

@@ -59,6 +59,7 @@ export default function EditorInterface( {
 	forceDisableBlockTools,
 	title,
 	iframeProps,
+	showEditorFrame,
 } ) {
 	const {
 		mode,
@@ -110,6 +111,8 @@ export default function EditorInterface( {
 		[ entitiesSavedStatesCallback ]
 	);
 
+	const showFrame = ! isPreviewMode || showEditorFrame;
+
 	return (
 		<InterfaceSkeleton
 			isDistractionFree={ isDistractionFree }
@@ -122,34 +125,33 @@ export default function EditorInterface( {
 				secondarySidebar: secondarySidebarLabel,
 			} }
 			header={
-				! isPreviewMode && (
+				showFrame && (
 					<Header
 						forceIsDirty={ forceIsDirty }
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
+						isPreviewMode={ isPreviewMode }
 						title={ title }
 					/>
 				)
 			}
 			editorNotices={ <EditorNotices /> }
 			secondarySidebar={
-				! isPreviewMode &&
+				showFrame &&
 				mode === 'visual' &&
 				( ( isInserterOpened && <InserterSidebar /> ) ||
 					( isListViewOpened && <ListViewSidebar /> ) )
 			}
 			sidebar={
-				! isPreviewMode &&
+				showFrame &&
 				! isDistractionFree && <ComplementaryArea.Slot scope="core" />
 			}
 			content={
 				<>
-					{ ! isDistractionFree && ! isPreviewMode && (
-						<EditorNotices />
-					) }
+					{ ! isDistractionFree && showFrame && <EditorNotices /> }
 
 					<EditorContentSlotFill.Slot>
 						{ ( [ editorCanvasView ] ) =>

packages/editor/src/components/header/index.js

@@ -53,6 +53,7 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
+	isPreviewMode,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -122,6 +123,7 @@ function Header( {
 			>
 				<DocumentTools
 					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+					isPreviewMode={ isPreviewMode }
 				/>
 				{ hasFixedToolbar && isLargeViewport && (
 					<CollapsibleBlockToolbar

packages/editor/src/components/sidebar/header.js

@@ -15,7 +15,7 @@ import { sidebars } from './constants';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SidebarHeader = ( _, ref ) => {
+const SidebarHeader = ( { isPreviewMode }, ref ) => {
 	const { documentLabel } = useSelect( ( select ) => {
 		const { getPostTypeLabel } = select( editorStore );
 
@@ -35,14 +35,16 @@ const SidebarHeader = ( _, ref ) => {
 			>
 				{ documentLabel }
 			</Tabs.Tab>
-			<Tabs.Tab
-				tabId={ sidebars.block }
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ sidebars.block }
-			>
-				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
-				{ __( 'Block' ) }
-			</Tabs.Tab>
+			{ ! isPreviewMode && (
+				<Tabs.Tab
+					tabId={ sidebars.block }
+					// Used for focus management in the SettingsSidebar component.
+					data-tab-id={ sidebars.block }
+				>
+					{ /* translators: Text label for the Block Settings Sidebar tab. */ }
+					{ __( 'Block' ) }
+				</Tabs.Tab>
+			) }
 		</Tabs.TabList>
 	);
 };

packages/editor/src/components/sidebar/index.js

@@ -53,6 +53,7 @@ const SidebarContent = ( {
 	keyboardShortcut,
 	onActionPerformed,
 	extraPanels,
+	isPreviewMode,
 } ) => {
 	const tabListRef = useRef( null );
 	// Because `PluginSidebar` renders a `ComplementaryArea`, we
@@ -92,7 +93,10 @@ const SidebarContent = ( {
 			identifier={ tabName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
-					<SidebarHeader ref={ tabListRef } />
+					<SidebarHeader
+						ref={ tabListRef }
+						isPreviewMode={ isPreviewMode }
+					/>
 				</Tabs.Context.Provider>
 			}
 			closeLabel={ __( 'Close Settings' ) }
@@ -120,17 +124,19 @@ const SidebarContent = ( {
 					<PatternOverridesPanel />
 					{ extraPanels }
 				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
-					<BlockInspector />
-				</Tabs.TabPanel>
+				{ ! isPreviewMode && (
+					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
+						<BlockInspector />
+					</Tabs.TabPanel>
+				) }
 			</Tabs.Context.Provider>
 		</PluginSidebar>
 	);
 };
 
 const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, showSummary } = useSelect(
+	const { tabName, keyboardShortcut, showSummary, isPreviewMode } = useSelect(
 		( select ) => {
 			const shortcut = select(
 				keyboardShortcutsStore
@@ -151,14 +157,17 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 					: sidebars.document;
 			}
 
+			const { getEditorSettings, getCurrentPostType } =
+				select( editorStore );
 			return {
 				tabName: _tabName,
 				keyboardShortcut: shortcut,
 				showSummary: ! [
 					TEMPLATE_POST_TYPE,
 					TEMPLATE_PART_POST_TYPE,
 					NAVIGATION_POST_TYPE,
-				].includes( select( editorStore ).getCurrentPostType() ),
+				].includes( getCurrentPostType() ),
+				isPreviewMode: getEditorSettings().isPreviewMode,
 			};
 		},
 		[]
@@ -187,6 +196,7 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 				showSummary={ showSummary }
 				onActionPerformed={ onActionPerformed }
 				extraPanels={ extraPanels }
+				isPreviewMode={ isPreviewMode }
 			/>
 		</Tabs>
 	);