Skip to content

Improve guidance to editing template when focused on editing a page #51366

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

Merged
noisysocks merged 11 commits into from
Jun 19, 2023
Merged

Improve guidance to editing template when focused on editing a page #51366

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
045df9e
Improve guidance to editing template when focused on editing a page
noisysocks Jun 9, 2023
11fb888
Don't flash content blocks when double clicking
noisysocks Jun 13, 2023
2f9cf3c
Use flashBlock()
noisysocks Jun 13, 2023
b5490df
Remove content block flashing for now
noisysocks Jun 14, 2023
0ad5f11
Show edit template notification if not already showing one
noisysocks Jun 14, 2023
4d1cda0
Oops, this doesn't belong here
noisysocks Jun 14, 2023
9de65d5
Restore packages/block-editor from trunk
noisysocks Jun 14, 2023
1f946eb
Optimise if()
noisysocks Jun 19, 2023
734d914
Add periods to notifications
noisysocks Jun 19, 2023
7f633ca
Merge remote-tracking branch 'origin/trunk' into try/improve-page-con…
noisysocks Jun 19, 2023
f7ff0dc
Dismiss notification when opening dialog
noisysocks Jun 19, 2023
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
Prev Previous commit
Next Next commit
Merge remote-tracking branch 'origin/trunk' into try/improve-page-con… 
…tent-focus-guidance
  • Loading branch information
@noisysocks
noisysocks committed Jun 19, 2023
commit 7f633ca375f00058e00450fce48de3a1743c9709
127 changes: 8 additions & 119 deletions packages/edit-site/src/components/block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,132 +16,21 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
import TemplatePartConverter from '../template-part-converter';
import { SidebarInspectorFill } from '../sidebar-edit-mode';
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';
import EditorCanvasContainer from '../editor-canvas-container';
import PageContentFocusManager from '../page-content-focus-manager';

const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );

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

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

return {
storedSettings: getSettings( setIsInserterOpened ),
templateType: getEditedPostType(),
canvasMode: getCanvasMode(),
};
},
[ setIsInserterOpened ]
);

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 entityType = useSelect(
( select ) => select( editSiteStore ).getEditedPostType(),
[]
);

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 {
entityType: getEditedPostType(),
hasPageContentFocus: _hasPageContentFocus(),
};
}, [] );

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

const contentRef = useRef();
const mergedRefs = useMergeRefs( [
contentRef,
useClipboardHandler(),
useTypingObserver(),
] );
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;
// Choose the provider based on the entity type currently
// being edited.
const BlockEditorProvider = getBlockEditorProvider( entityType );

return (
<ExperimentalBlockEditorProvider
settings={ settings }
value={ blocks }
onInput={ onInput }
onChange={ onChange }
useSubRegistry={ false }
>
<PageContentFocusManager contentRef={ contentRef } />
<BlockEditorProvider>
<TemplatePartConverter />
<SidebarInspectorFill>
<BlockInspector />
Expand Down
101 changes: 52 additions & 49 deletions packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ import BackButton from './back-button';
import ResizableEditor from './resizable-editor';
import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import { usePageContentFocusNotifications } from '../page-content-focus';
import useSiteEditorSettings from './use-site-editor-settings';
import { store as editSiteStore } from '../../store';
import { FOCUSABLE_ENTITIES } from './constants';
import { unlock } from '../../lock-unlock';
import PageContentFocusManager from '../page-content-focus-manager';

const LAYOUT = {
type: 'default',
Expand Down Expand Up @@ -82,7 +82,6 @@ export default function SiteEditorCanvas() {
contentRef,
useClipboardHandler(),
useTypingObserver(),
usePageContentFocusNotifications(),
] );

const isTemplateTypeNavigation = templateType === 'wp_navigation';
Expand All @@ -98,55 +97,59 @@ export default function SiteEditorCanvas() {
: undefined;

return (
<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': isFocusMode || !! 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%' }
<>
<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':
isFocusMode || !! editorCanvasView,
'is-view-mode': isViewMode,
} ) }
__unstableContentRef={ contentRef }
onClick={ ( event ) => {
// Clear selected block when clicking on the gray background.
if ( event.target === event.currentTarget ) {
clearSelectedBlock();
}
} }
>
<EditorCanvas
<BlockEditorKeyboardShortcuts.Register />
<BackButton />
<ResizableEditor
enableResizing={ enableResizing }
settings={ settings }
contentRef={ mergedRefs }
readonly={ isViewMode }
height={ sizes.height ?? '100%' }
>
{ resizeObserver }
<BlockList
className={ classnames(
'edit-site-block-editor__block-list wp-site-blocks',
{
'is-navigation-block':
isTemplateTypeNavigation,
}
) }
layout={ LAYOUT }
renderAppender={ showBlockAppender }
/>
</EditorCanvas>
</ResizableEditor>
</BlockTools>
)
}
</EditorCanvasContainer.Slot>
<EditorCanvas
enableResizing={ enableResizing }
settings={ settings }
contentRef={ mergedRefs }
readonly={ isViewMode }
>
{ resizeObserver }
<BlockList
className={ classnames(
'edit-site-block-editor__block-list wp-site-blocks',
{
'is-navigation-block':
isTemplateTypeNavigation,
}
) }
layout={ LAYOUT }
renderAppender={ showBlockAppender }
/>
</EditorCanvas>
</ResizableEditor>
</BlockTools>
)
}
</EditorCanvasContainer.Slot>
<PageContentFocusManager contentRef={ contentRef } />
</>
);
}
You are viewing a condensed version of this merge commit. You can view the full changes here.