Skip to content

Commit

Permalink
Refactor Site Editor block editor code (WordPress#51524)
Browse files Browse the repository at this point in the history
* Refactor Site Editor code

* Naming consistency
  • Loading branch information
getdave authored and sethrubenstein committed Jul 13, 2023
1 parent d15a37a commit 90af07b
Show file tree
Hide file tree
Showing 6 changed files with 284 additions and 197 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ function BackButton() {
const isTemplatePart = location.params.postType === 'wp_template_part';
const previousTemplateId = location.state?.fromTemplateId;

if ( ! isTemplatePart || ! previousTemplateId ) {
const isFocusMode = isTemplatePart;

if ( ! isFocusMode || ! previousTemplateId ) {
return null;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const FOCUSABLE_ENTITIES = [ 'wp_template_part' ];
213 changes: 17 additions & 196 deletions packages/edit-site/src/components/block-editor/index.js
Original file line number Diff line number Diff line change
@@ -1,228 +1,49 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useMemo, useRef } from '@wordpress/element';
import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
import {
BlockList,
BlockInspector,
BlockTools,
__unstableUseClipboardHandler as useClipboardHandler,
__unstableUseTypingObserver as useTypingObserver,
BlockEditorKeyboardShortcuts,
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import {
useMergeRefs,
useViewportMatch,
useResizeObserver,
} from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { BlockInspector } from '@wordpress/block-editor';

import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';

/**
* Internal dependencies
*/
import inserterMediaCategories from './inserter-media-categories';

import TemplatePartConverter from '../template-part-converter';
import { SidebarInspectorFill } from '../sidebar-edit-mode';
import { store as editSiteStore } from '../../store';
import BackButton from './back-button';
import ResizableEditor from './resizable-editor';
import EditorCanvas from './editor-canvas';
import { unlock } from '../../lock-unlock';
import EditorCanvasContainer from '../editor-canvas-container';
import {
DisableNonPageContentBlocks,
usePageContentFocusNotifications,
} from '../page-content-focus';

const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );

const LAYOUT = {
type: 'default',
// At the root level of the site editor, no alignments should be allowed.
alignments: [],
};
import { DisableNonPageContentBlocks } from '../page-content-focus';
import SiteEditorCanvas from './site-editor-canvas';
import DefaultBlockEditorProvider from './providers/default-block-editor-provider';

export default function BlockEditor() {
const { setIsInserterOpened } = useDispatch( editSiteStore );
const { storedSettings, templateType, canvasMode, hasPageContentFocus } =
useSelect(
( select ) => {
const {
getSettings,
getEditedPostType,
getCanvasMode,
hasPageContentFocus: _hasPageContentFocus,
} = unlock( select( editSiteStore ) );

return {
storedSettings: getSettings( setIsInserterOpened ),
templateType: getEditedPostType(),
canvasMode: getCanvasMode(),
hasPageContentFocus: _hasPageContentFocus(),
};
},
[ setIsInserterOpened ]
const { hasPageContentFocus } = useSelect( ( select ) => {
const { hasPageContentFocus: _hasPageContentFocus } = unlock(
select( editSiteStore )
);

const settingsBlockPatterns =
storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
storedSettings.__experimentalBlockPatterns; // WP 5.9
const settingsBlockPatternCategories =
storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
storedSettings.__experimentalBlockPatternCategories; // WP 5.9

const { restBlockPatterns, restBlockPatternCategories } = useSelect(
( select ) => ( {
restBlockPatterns: select( coreStore ).getBlockPatterns(),
restBlockPatternCategories:
select( coreStore ).getBlockPatternCategories(),
} ),
[]
);

const blockPatterns = useMemo(
() =>
[
...( settingsBlockPatterns || [] ),
...( restBlockPatterns || [] ),
]
.filter(
( x, index, arr ) =>
index === arr.findIndex( ( y ) => x.name === y.name )
)
.filter( ( { postTypes } ) => {
return (
! postTypes ||
( Array.isArray( postTypes ) &&
postTypes.includes( templateType ) )
);
} ),
[ settingsBlockPatterns, restBlockPatterns, templateType ]
);

const blockPatternCategories = useMemo(
() =>
[
...( settingsBlockPatternCategories || [] ),
...( restBlockPatternCategories || [] ),
].filter(
( x, index, arr ) =>
index === arr.findIndex( ( y ) => x.name === y.name )
),
[ settingsBlockPatternCategories, restBlockPatternCategories ]
);

const settings = useMemo( () => {
const {
__experimentalAdditionalBlockPatterns,
__experimentalAdditionalBlockPatternCategories,
...restStoredSettings
} = storedSettings;

return {
...restStoredSettings,
inserterMediaCategories,
__experimentalBlockPatterns: blockPatterns,
__experimentalBlockPatternCategories: blockPatternCategories,
hasPageContentFocus: _hasPageContentFocus(),
};
}, [ storedSettings, blockPatterns, blockPatternCategories ] );

const [ blocks, onInput, onChange ] = useEntityBlockEditor(
'postType',
templateType
);

const contentRef = useRef();
const mergedRefs = useMergeRefs( [
contentRef,
useClipboardHandler(),
useTypingObserver(),
usePageContentFocusNotifications(),
] );
const isMobileViewport = useViewportMatch( 'small', '<' );
const { clearSelectedBlock } = useDispatch( blockEditorStore );
const [ resizeObserver, sizes ] = useResizeObserver();

const isTemplatePart = templateType === 'wp_template_part';

const hasBlocks = blocks.length !== 0;
const enableResizing =
isTemplatePart &&
canvasMode !== 'view' &&
// Disable resizing in mobile viewport.
! isMobileViewport;
const isViewMode = canvasMode === 'view';
const showBlockAppender =
( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
}, [] );

return (
<ExperimentalBlockEditorProvider
settings={ settings }
value={ blocks }
onInput={ onInput }
onChange={ onChange }
useSubRegistry={ false }
>
<DefaultBlockEditorProvider>
{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
<TemplatePartConverter />
<SidebarInspectorFill>
<BlockInspector />
</SidebarInspectorFill>
<EditorCanvasContainer.Slot>
{ ( [ editorCanvasView ] ) =>
editorCanvasView ? (
<div className="edit-site-visual-editor is-focus-mode">
{ editorCanvasView }
</div>
) : (
<BlockTools
className={ classnames( 'edit-site-visual-editor', {
'is-focus-mode':
isTemplatePart || !! editorCanvasView,
'is-view-mode': isViewMode,
} ) }
__unstableContentRef={ contentRef }
onClick={ ( event ) => {
// Clear selected block when clicking on the gray background.
if ( event.target === event.currentTarget ) {
clearSelectedBlock();
}
} }
>
<BlockEditorKeyboardShortcuts.Register />
<BackButton />
<ResizableEditor
enableResizing={ enableResizing }
height={ sizes.height ?? '100%' }
>
<EditorCanvas
enableResizing={ enableResizing }
settings={ settings }
contentRef={ mergedRefs }
readonly={ canvasMode === 'view' }
>
{ resizeObserver }
<BlockList
className="edit-site-block-editor__block-list wp-site-blocks"
layout={ LAYOUT }
renderAppender={ showBlockAppender }
/>
</EditorCanvas>
</ResizableEditor>
</BlockTools>
)
}
</EditorCanvasContainer.Slot>

<SiteEditorCanvas />

<ReusableBlocksMenuItems />
</ExperimentalBlockEditorProvider>
</DefaultBlockEditorProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/**
* WordPress dependencies
*/
import { useEntityBlockEditor } from '@wordpress/core-data';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../../store';
import { unlock } from '../../../lock-unlock';
import useSiteEditorSettings from '../use-site-editor-settings';

const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );

export default function DefaultBlockEditorProvider( { children } ) {
const settings = useSiteEditorSettings();

const { templateType } = useSelect( ( select ) => {
const { getEditedPostType } = unlock( select( editSiteStore ) );

return {
templateType: getEditedPostType(),
};
}, [] );

const [ blocks, onInput, onChange ] = useEntityBlockEditor(
'postType',
templateType
);

return (
<ExperimentalBlockEditorProvider
settings={ settings }
value={ blocks }
onInput={ onInput }
onChange={ onChange }
useSubRegistry={ false }
>
{ children }
</ExperimentalBlockEditorProvider>
);
}
Loading

0 comments on commit 90af07b

Please sign in to comment.