Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04e00e4
Global Styles: preview template to put focus on styles
ellatrix Nov 14, 2024
8ddf280
rewrite
ellatrix Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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,
defaultRenderingMode: isGlobalStylesPreview
? 'template-locked'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Template locked is a mode where you can edit the post things but not the template, so it's not the right thing here. For instance if you have a static page as front page, you'll still be able to edit its content.

I think instead of changing the rendering mode which is not meant to "lock" editing, we should just make sure that when isPreviewMode is on, you can't edit anything in the canvas. Maybe wrap the whole thing in inert=true or something (we can check how we do it in "view" mode)

: settings.defaultRenderingMode,
};
}, [ settings, isGlobalStylesPreview ] );

return (
<>
<GlobalStylesRenderer
Expand All @@ -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,
} ) }
Expand All @@ -237,6 +248,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
}
customSavePanel={ _isPreviewingTheme && <SavePanel /> }
forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
forceRemoveBlockTools={ isGlobalStylesPreview }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not entirely sure this is needed either, I think we can probably remove all of these header tools when isPreviewMode is true.

title={ title }
iframeProps={ iframeProps }
onActionPerformed={ onActionPerformed }
Expand Down
34 changes: 20 additions & 14 deletions packages/editor/src/components/document-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
removeBlockTools = false,
} ) {
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editorStore );
const {
Expand Down Expand Up @@ -116,7 +120,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
variant="unstyled"
>
<div className="editor-document-tools__left">
{ ! isDistractionFree && (
{ ! isDistractionFree && ! removeBlockTools && (
<ToolbarItem
ref={ inserterSidebarToggleRef }
as={ Button }
Expand All @@ -134,17 +138,19 @@ function DocumentTools( { className, disableBlockTools = false } ) {
) }
{ ( isWideViewport || ! showIconLabels ) && (
<>
{ showTools && isLargeViewport && (
<ToolbarItem
as={ ToolSelector }
showTooltip={ ! showIconLabels }
variant={
showIconLabels ? 'tertiary' : undefined
}
disabled={ disableBlockTools }
size="compact"
/>
) }
{ showTools &&
isLargeViewport &&
! removeBlockTools && (
<ToolbarItem
as={ ToolSelector }
showTooltip={ ! showIconLabels }
variant={
showIconLabels ? 'tertiary' : undefined
}
disabled={ disableBlockTools }
size="compact"
/>
) }
<ToolbarItem
as={ EditorHistoryUndo }
showTooltip={ ! showIconLabels }
Expand All @@ -157,7 +163,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
{ ! isDistractionFree && (
{ ! isDistractionFree && ! removeBlockTools && (
<ToolbarItem
as={ Button }
className="editor-document-tools__document-overview-toggle"
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/components/editor-interface/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export default function EditorInterface( {
customSaveButton,
customSavePanel,
forceDisableBlockTools,
forceRemoveBlockTools,
title,
iframeProps,
} ) {
Expand Down Expand Up @@ -130,6 +131,7 @@ export default function EditorInterface( {
}
customSaveButton={ customSaveButton }
forceDisableBlockTools={ forceDisableBlockTools }
forceRemoveBlockTools={ forceRemoveBlockTools }
title={ title }
/>
)
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ function Editor( {
<Sidebar
onActionPerformed={ onActionPerformed }
extraPanels={ extraSidebarPanels }
forceRemoveBlockTools={ props.forceRemoveBlockTools }
/>
</ExperimentalEditorProvider>
) }
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ function Header( {
customSaveButton,
forceIsDirty,
forceDisableBlockTools,
forceRemoveBlockTools,
setEntitiesSavedStatesCallback,
title,
} ) {
Expand Down Expand Up @@ -122,6 +123,7 @@ function Header( {
>
<DocumentTools
disableBlockTools={ forceDisableBlockTools || isTextEditor }
removeBlockTools={ forceRemoveBlockTools }
/>
{ hasFixedToolbar && isLargeViewport && (
<CollapsibleBlockToolbar
Expand Down
20 changes: 11 additions & 9 deletions packages/editor/src/components/sidebar/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { sidebars } from './constants';

const { Tabs } = unlock( componentsPrivateApis );

const SidebarHeader = ( _, ref ) => {
const SidebarHeader = ( { forceRemoveBlockTools }, ref ) => {
const { documentLabel } = useSelect( ( select ) => {
const { getPostTypeLabel } = select( editorStore );

Expand All @@ -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>
{ ! forceRemoveBlockTools && (
<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>
);
};
Expand Down
21 changes: 16 additions & 5 deletions packages/editor/src/components/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const SidebarContent = ( {
keyboardShortcut,
onActionPerformed,
extraPanels,
forceRemoveBlockTools,
} ) => {
const tabListRef = useRef( null );
// Because `PluginSidebar` renders a `ComplementaryArea`, we
Expand Down Expand Up @@ -92,7 +93,10 @@ const SidebarContent = ( {
identifier={ tabName }
header={
<Tabs.Context.Provider value={ tabsContextValue }>
<SidebarHeader ref={ tabListRef } />
<SidebarHeader
ref={ tabListRef }
forceRemoveBlockTools={ forceRemoveBlockTools }
/>
</Tabs.Context.Provider>
}
closeLabel={ __( 'Close Settings' ) }
Expand Down Expand Up @@ -120,15 +124,21 @@ const SidebarContent = ( {
<PatternOverridesPanel />
{ extraPanels }
</Tabs.TabPanel>
<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
<BlockInspector />
</Tabs.TabPanel>
{ ! forceRemoveBlockTools && (
<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
<BlockInspector />
</Tabs.TabPanel>
) }
</Tabs.Context.Provider>
</PluginSidebar>
);
};

const Sidebar = ( { extraPanels, onActionPerformed } ) => {
const Sidebar = ( {
extraPanels,
onActionPerformed,
forceRemoveBlockTools,
} ) => {
useAutoSwitchEditorSidebars();
const { tabName, keyboardShortcut, showSummary } = useSelect(
( select ) => {
Expand Down Expand Up @@ -187,6 +197,7 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
showSummary={ showSummary }
onActionPerformed={ onActionPerformed }
extraPanels={ extraPanels }
forceRemoveBlockTools={ forceRemoveBlockTools }
/>
</Tabs>
);
Expand Down
Loading