Skip to content

Element: enable concurrent mode by implementing mount/unmount with createRoot #46467

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
jsnajdr merged 12 commits into from
Feb 1, 2023
Merged

Element: enable concurrent mode by implementing mount/unmount with createRoot #46467

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f656947
Post Editor: Disable React strict mode
tyxla Dec 15, 2022
d86c7d8
Don't show BlockSelectionButton when there is multiselection
jsnajdr Jan 6, 2023
9ba1cbc
RichText: fix timing of synthetic input event
jsnajdr Jan 9, 2023
c33cf98
RichText: run composition end in separate microtask tick
jsnajdr Jan 9, 2023
91e4b1c
useAsyncList: fix race condition when reading nextIndex
jsnajdr Jan 25, 2023
2dd8665
Slot: mark as mounted in cDM, fixes strict mode double effects
jsnajdr Jan 25, 2023
a0a7226
font-size-picker.spec: Close sidebar after each test
jsnajdr Jan 26, 2023
5a7d2b8
font-size-picker.spec: Close typography menu so that sidebar close bu…
jsnajdr Jan 26, 2023
e1c2fef
useSlot: subscribe using useSyncExternalStore
jsnajdr Jan 27, 2023
539d35f
Enable concurrent mode by using createRoot to mount editor apps
jsnajdr Jan 30, 2023
aa9cd41
Error boundaries: show Attempt Recovery option only if onError supplied
jsnajdr Jan 30, 2023
1638d6a
Remove ErrorBoundary onError callbacks and recovery buttons
jsnajdr Jan 30, 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
Don't show BlockSelectionButton when there is multiselection
  • Loading branch information
@jsnajdr
jsnajdr committed Jan 30, 2023
commit d86c7d8e94612ea8946ea78b39660b52194ac321
152 changes: 74 additions & 78 deletions packages/block-editor/src/components/block-tools/selected-block-popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function selector( select ) {

return {
editorMode: __unstableGetEditorMode(),
hasMultiSelection: hasMultiSelection(),
isMultiSelecting: isMultiSelecting(),
isTyping: isTyping(),
isBlockInterfaceHidden: isBlockInterfaceHidden(),
Expand All @@ -57,6 +58,7 @@ function SelectedBlockPopover( {
} ) {
const {
editorMode,
hasMultiSelection,
isMultiSelecting,
isTyping,
isBlockInterfaceHidden,
Expand Down Expand Up @@ -89,7 +91,8 @@ function SelectedBlockPopover( {
const showEmptyBlockSideInserter =
! isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
const shouldShowBreadcrumb =
editorMode === 'navigation' || editorMode === 'zoom-out';
! hasMultiSelection &&
( editorMode === 'navigation' || editorMode === 'zoom-out' );
const shouldShowContextualToolbar =
editorMode === 'edit' &&
! hasFixedToolbar &&
Expand Down Expand Up @@ -129,86 +132,79 @@ function SelectedBlockPopover( {
clientId,
} );

if (
! shouldShowBreadcrumb &&
! shouldShowContextualToolbar &&
! showEmptyBlockSideInserter
) {
return null;
if ( showEmptyBlockSideInserter ) {
return (
<BlockPopover
clientId={ capturingClientId || clientId }
__unstableCoverTarget
bottomClientId={ lastClientId }
className={ classnames(
'block-editor-block-list__block-side-inserter-popover',
{
'is-insertion-point-visible': isInsertionPointVisible,
}
) }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
resize={ false }
shift={ false }
{ ...popoverProps }
>
<div className="block-editor-block-list__empty-block-inserter">
<Inserter
position="bottom right"
rootClientId={ rootClientId }
clientId={ clientId }
__experimentalIsQuick
/>
</div>
</BlockPopover>
);
}

return (
<>
{ showEmptyBlockSideInserter && (
<BlockPopover
clientId={ capturingClientId || clientId }
__unstableCoverTarget
bottomClientId={ lastClientId }
className={ classnames(
'block-editor-block-list__block-side-inserter-popover',
{
'is-insertion-point-visible':
isInsertionPointVisible,
if ( shouldShowBreadcrumb || shouldShowContextualToolbar ) {
return (
<BlockPopover
clientId={ capturingClientId || clientId }
bottomClientId={ lastClientId }
className={ classnames(
'block-editor-block-list__block-popover',
{
'is-insertion-point-visible': isInsertionPointVisible,
}
) }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
resize={ false }
{ ...popoverProps }
>
{ shouldShowContextualToolbar && showContents && (
<BlockContextualToolbar
// If the toolbar is being shown because of being forced
// it should focus the toolbar right after the mount.
focusOnMount={ isToolbarForced.current }
__experimentalInitialIndex={
initialToolbarItemIndexRef.current
}
) }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
resize={ false }
shift={ false }
{ ...popoverProps }
>
<div className="block-editor-block-list__empty-block-inserter">
<Inserter
position="bottom right"
rootClientId={ rootClientId }
clientId={ clientId }
__experimentalIsQuick
/>
</div>
</BlockPopover>
) }
{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
<BlockPopover
clientId={ capturingClientId || clientId }
bottomClientId={ lastClientId }
className={ classnames(
'block-editor-block-list__block-popover',
{
'is-insertion-point-visible':
isInsertionPointVisible,
}
) }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
resize={ false }
{ ...popoverProps }
>
{ shouldShowContextualToolbar && showContents && (
<BlockContextualToolbar
// If the toolbar is being shown because of being forced
// it should focus the toolbar right after the mount.
focusOnMount={ isToolbarForced.current }
__experimentalInitialIndex={
initialToolbarItemIndexRef.current
}
__experimentalOnIndexChange={ ( index ) => {
initialToolbarItemIndexRef.current = index;
} }
// Resets the index whenever the active block changes so
// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
key={ clientId }
/>
) }
{ shouldShowBreadcrumb && (
<BlockSelectionButton
clientId={ clientId }
rootClientId={ rootClientId }
/>
) }
</BlockPopover>
) }
</>
);
__experimentalOnIndexChange={ ( index ) => {
initialToolbarItemIndexRef.current = index;
} }
// Resets the index whenever the active block changes so
// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
key={ clientId }
/>
) }
{ shouldShowBreadcrumb && (
<BlockSelectionButton
clientId={ clientId }
rootClientId={ rootClientId }
/>
) }
</BlockPopover>
);
}

return null;
}

function wrapperSelector( select ) {
Expand Down