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

Implement "Add block" UI for Nav block Link UI #57756

Merged
merged 26 commits into from
Feb 8, 2024
Merged

Implement "Add block" UI for Nav block Link UI #57756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
53ee18d
Export QuickInserter from block editor package
getdave Jan 11, 2024
b77f221
Add prop for hiding search input on QuickInserter
getdave Jan 11, 2024
45352f8
Set up new “Add block” UI using QuickInserter
getdave Jan 11, 2024
76b61bc
Remove auto-inserted blocks if no URL is created
getdave Jan 12, 2024
6d356c9
Hack: fix Popover onClose not firing
getdave Jan 12, 2024
95fe6cf
remove useless button
scruffian Jan 24, 2024
f6be25d
Hack: fix Popover onClose not firing
getdave Jan 12, 2024
b199be3
remove useless button
scruffian Jan 24, 2024
307521e
Add some design for the add block button
scruffian Jan 24, 2024
5db918f
update back button
scruffian Jan 24, 2024
c0114e9
Add aria-haspopover
getdave Feb 1, 2024
6accbe7
Add dialog role and aria label and description
getdave Feb 1, 2024
6cb3ffe
Label the Link Control
getdave Feb 1, 2024
a487e1f
Manage focus when transitioning to Add block state
getdave Feb 1, 2024
8a4b390
Return focus to “Add block” button when going back
getdave Feb 1, 2024
2f27c7f
Remove auto-inserted link block when selecting a new block
getdave Feb 2, 2024
dc5c40f
Make QuickInserter a private API
getdave Feb 2, 2024
891e969
Add mousetrap to popover
getdave Feb 2, 2024
38f60ca
Remove aria-label from Back button
jeryj Feb 6, 2024
a608a0d
always direct insert
scruffian Feb 7, 2024
75f40c5
move the back button over a bit
scruffian Feb 7, 2024
eb2b568
use the onReplace function instead of replaceBlock
scruffian Feb 7, 2024
616e5d5
remove comment
scruffian Feb 7, 2024
c029c9a
hide the bottom controls when creating a page
scruffian Feb 7, 2024
63b5307
code quality
scruffian Feb 7, 2024
f85bb49
changed test to use the new feature
MaggieCabrera Feb 7, 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
6 changes: 4 additions & 2 deletions packages/block-editor/src/components/inserter/quick-inserter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default function QuickInserter( {
isAppender,
prioritizePatterns,
selectBlockOnInsert,
hasSearch = true,
} ) {
const [ filterValue, setFilterValue ] = useState( '' );
const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
Expand Down Expand Up @@ -70,8 +71,9 @@ export default function QuickInserter( {
const showPatterns =
patterns.length && ( !! filterValue || prioritizePatterns );
const showSearch =
( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
blockTypes.length > SEARCH_THRESHOLD;
hasSearch &&
( ( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
blockTypes.length > SEARCH_THRESHOLD );

useEffect( () => {
if ( setInserterIsOpened ) {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,7 @@ function LinkControl( {
</HStack>
) }

{ renderControlBottom && renderControlBottom() }
{ ! isCreatingPage && renderControlBottom && renderControlBottom() }
</div>
);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { lock } from './lock-unlock';
import { getRichTextValues } from './components/rich-text/get-rich-text-values';
import ResizableBoxPopover from './components/resizable-box-popover';
import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
import { PrivateListView } from './components/list-view';
import BlockInfo from './components/block-info-slot-fill';
import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
Expand Down Expand Up @@ -37,6 +38,7 @@ lock( privateApis, {
getDuotoneFilter,
getRichTextValues,
PrivateInserter,
PrivateQuickInserter,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As this component has always been private I've continued that here.

PrivateListView,
ResizableBoxPopover,
BlockInfo,
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,14 @@ export default function NavigationLinkEdit( {
<LinkUI
clientId={ clientId }
link={ attributes }
onClose={ () => setIsLinkOpen( false ) }
onClose={ () => {
// If there is no link then remove the auto-inserted block.
// This avoids empty blocks which can provided a poor UX.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// This avoids empty blocks which can provided a poor UX.

if ( ! url ) {
// Need to handle refocusing the Nav block or the inserter?
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@scruffian I'm sorry I missed this Todo 😢

Copy link
Contributor

Choose a reason for hiding this comment

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

Is this solved?

Copy link
Contributor

Choose a reason for hiding this comment

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

I created a followup issue here: #58820

onReplace( [] );
}
} }
anchor={ popoverAnchor }
onRemove={ removeLink }
onChange={ ( updatedValue ) => {
Expand Down
Loading
Loading