Skip to content

Commit c22181d

Browse files
youknowriadyouknowriad
committed
Styles Canvas: Refactor state and rendering
1 parent 9a298a1 commit c22181d

21 files changed

Lines changed: 390 additions & 552 deletions

File tree

‎packages/edit-site/src/components/editor-canvas-container/index.js‎

Lines changed: 0 additions & 149 deletions
This file was deleted.

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ import { useSpecificEditorSettings } from '../block-editor/use-site-editor-setti
3737
import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
3838
import GlobalStylesSidebar from '../global-styles-sidebar';
3939
import { isPreviewingTheme } from '../../utils/is-previewing-theme';
40-
import {
40+
import StylesCanvas, {
4141
getEditorCanvasContainerTitle,
4242
useHasEditorCanvasContainer,
43-
} from '../editor-canvas-container';
43+
} from '../styles-canvas';
4444
import SaveButton from '../save-button';
4545
import SavePanel from '../save-panel';
4646
import SiteEditorMoreMenu from '../more-menu';
@@ -134,19 +134,21 @@ export default function EditSiteEditor( {
134134
const { postType, postId, context } = entity;
135135
const {
136136
isBlockBasedTheme,
137-
editorCanvasView,
137+
stylesPath,
138+
showStylebook,
138139
currentPostIsTrashed,
139140
hasSiteIcon,
140141
} = useSelect( ( select ) => {
141-
const { getEditorCanvasContainerView } = unlock(
142+
const { getStylesPath, getShowStylebook } = unlock(
142143
select( editSiteStore )
143144
);
144145
const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
145146
const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
146147

147148
return {
148149
isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
149-
editorCanvasView: getEditorCanvasContainerView(),
150+
stylesPath: getStylesPath(),
151+
showStylebook: getShowStylebook(),
150152
currentPostIsTrashed:
151153
select( editorStore ).getCurrentPostAttribute( 'status' ) ===
152154
'trash',
@@ -242,7 +244,7 @@ export default function EditSiteEditor( {
242244
);
243245

244246
// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
245-
const title = getEditorCanvasContainerTitle( editorCanvasView );
247+
const title = getEditorCanvasContainerTitle( stylesPath, showStylebook );
246248

247249
const isReady = ! isLoading;
248250
const transition = {
@@ -256,6 +258,7 @@ export default function EditSiteEditor( {
256258
<GlobalStylesRenderer
257259
disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
258260
/>
261+
<StylesCanvas />
259262
<EditorKeyboardShortcutsRegister />
260263
{ isEditMode && <BlockKeyboardShortcuts /> }
261264
{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }

‎packages/edit-site/src/components/global-styles-sidebar/index.js‎

Lines changed: 33 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FlexItem, Flex, Button } from '@wordpress/components';
55
import { __ } from '@wordpress/i18n';
66
import { styles, seen, backup } from '@wordpress/icons';
77
import { useSelect, useDispatch } from '@wordpress/data';
8-
import { useEffect, useRef, useState } from '@wordpress/element';
8+
import { useEffect, useRef } from '@wordpress/element';
99
import { store as preferencesStore } from '@wordpress/preferences';
1010
import {
1111
store as editorStore,
@@ -31,20 +31,18 @@ export default function GlobalStylesSidebar() {
3131
const { query } = useLocation();
3232
const { canvas = 'view', name } = query;
3333
const {
34-
shouldClearCanvasContainerView,
35-
isStyleBookOpened,
34+
shouldResetNavigation,
35+
stylesPath,
36+
showStylebook,
3637
showListViewByDefault,
3738
hasRevisions,
38-
isRevisionsOpened,
39-
isRevisionsStyleBookOpened,
4039
activeComplementaryArea,
4140
} = useSelect(
4241
( select ) => {
4342
const { getActiveComplementaryArea } = select( interfaceStore );
44-
const { getEditorCanvasContainerView } = unlock(
43+
const { getStylesPath, getShowStylebook } = unlock(
4544
select( editSiteStore )
4645
);
47-
const canvasContainerView = getEditorCanvasContainerView();
4846
const _isVisualEditorMode =
4947
'visual' === select( editorStore ).getEditorMode();
5048
const _isEditCanvasMode = 'edit' === canvas;
@@ -61,8 +59,9 @@ export default function GlobalStylesSidebar() {
6159
: undefined;
6260

6361
return {
64-
isStyleBookOpened: 'style-book' === canvasContainerView,
65-
shouldClearCanvasContainerView:
62+
stylesPath: getStylesPath(),
63+
showStylebook: getShowStylebook(),
64+
shouldResetNavigation:
6665
'edit-site/global-styles' !==
6766
getActiveComplementaryArea( 'core' ) ||
6867
! _isVisualEditorMode ||
@@ -71,11 +70,6 @@ export default function GlobalStylesSidebar() {
7170
hasRevisions:
7271
!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
7372
?.count,
74-
isRevisionsStyleBookOpened:
75-
'global-styles-revisions:style-book' ===
76-
canvasContainerView,
77-
isRevisionsOpened:
78-
'global-styles-revisions' === canvasContainerView,
7973
activeComplementaryArea:
8074
select( interfaceStore ).getActiveComplementaryArea(
8175
'core'
@@ -84,65 +78,50 @@ export default function GlobalStylesSidebar() {
8478
},
8579
[ canvas ]
8680
);
87-
const { setEditorCanvasContainerView } = unlock(
81+
const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
8882
useDispatch( editSiteStore )
8983
);
9084
const isMobileViewport = useViewportMatch( 'medium', '<' );
91-
const [ globalStylesPath, setGlobalStylesPath ] = useState( '/' );
85+
86+
// Derive state from path and showStylebook
87+
const isRevisionsOpened =
88+
stylesPath.startsWith( '/revisions' ) && ! showStylebook;
89+
const isRevisionsStyleBookOpened =
90+
stylesPath.startsWith( '/revisions' ) && showStylebook;
91+
9292
const previousActiveArea = usePrevious( activeComplementaryArea );
9393

94-
// Reset path when sidebar opens
94+
// Reset navigation when sidebar opens
9595
useEffect( () => {
9696
if (
9797
activeComplementaryArea === 'edit-site/global-styles' &&
9898
previousActiveArea !== 'edit-site/global-styles'
9999
) {
100-
setGlobalStylesPath( '/' );
100+
resetStylesNavigation();
101101
}
102-
}, [ activeComplementaryArea, previousActiveArea, setGlobalStylesPath ] );
102+
}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );
103103

104104
useEffect( () => {
105-
if ( shouldClearCanvasContainerView ) {
106-
setEditorCanvasContainerView( undefined );
105+
if ( shouldResetNavigation ) {
106+
resetStylesNavigation();
107107
}
108-
}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
108+
}, [ shouldResetNavigation, resetStylesNavigation ] );
109109

110110
const { setIsListViewOpened } = useDispatch( editorStore );
111111

112112
const toggleRevisions = () => {
113113
setIsListViewOpened( false );
114-
if ( isRevisionsStyleBookOpened ) {
115-
setEditorCanvasContainerView( 'style-book' );
116-
return;
117-
}
118-
if ( isRevisionsOpened ) {
119-
setEditorCanvasContainerView( undefined );
120-
return;
121-
}
122-
123-
if ( isStyleBookOpened ) {
124-
setEditorCanvasContainerView(
125-
'global-styles-revisions:style-book'
126-
);
114+
if ( isRevisionsOpened || isRevisionsStyleBookOpened ) {
115+
// Close revisions, go back to root
116+
setStylesPath( '/' );
127117
} else {
128-
setEditorCanvasContainerView( 'global-styles-revisions' );
118+
// Open revisions
119+
setStylesPath( '/revisions' );
129120
}
130121
};
131122
const toggleStyleBook = () => {
132-
if ( isRevisionsOpened ) {
133-
setEditorCanvasContainerView(
134-
'global-styles-revisions:style-book'
135-
);
136-
return;
137-
}
138-
if ( isRevisionsStyleBookOpened ) {
139-
setEditorCanvasContainerView( 'global-styles-revisions' );
140-
return;
141-
}
142-
setIsListViewOpened( isStyleBookOpened && showListViewByDefault );
143-
setEditorCanvasContainerView(
144-
isStyleBookOpened ? undefined : 'style-book'
145-
);
123+
setIsListViewOpened( showStylebook && showListViewByDefault );
124+
setShowStylebook( ! showStylebook );
146125
};
147126

148127
const { getActiveComplementaryArea } = useSelect( interfaceStore );
@@ -187,12 +166,9 @@ export default function GlobalStylesSidebar() {
187166
<Button
188167
icon={ seen }
189168
label={ __( 'Style Book' ) }
190-
isPressed={
191-
isStyleBookOpened ||
192-
isRevisionsStyleBookOpened
193-
}
169+
isPressed={ showStylebook }
194170
accessibleWhenDisabled
195-
disabled={ shouldClearCanvasContainerView }
171+
disabled={ shouldResetNavigation }
196172
onClick={ toggleStyleBook }
197173
size="compact"
198174
/>
@@ -218,8 +194,8 @@ export default function GlobalStylesSidebar() {
218194
}
219195
>
220196
<GlobalStylesUI
221-
path={ globalStylesPath }
222-
onPathChange={ setGlobalStylesPath }
197+
path={ stylesPath }
198+
onPathChange={ setStylesPath }
223199
/>
224200
</DefaultSidebar>
225201
);

0 commit comments

Comments
 (0)