Command Palette: add command to open fonts

[annezazu]

Pulled from the FSE Outreach Program's Final Touches call for testing:

I clicked the “Aa” icon to open up font management just because I followed your instructions, but I couldn’t have found the font management easily without them. I love icons, but this is only visible with a label. I guess this is by design. I can’t wait for a font’s library command.

In checking, there is not a command in place for opening the font management and it seems wise to add in. At the minimum, a "Open font management" command, similar to "Open styles".

[richtabor]

I would expect this command would available in the Site Editor, opening the Styles > Typography panel, with the Fonts modal open.

[jordesign]

@annezazu It strikes me that if the Font Library is going to land in 6.5 - that this would be a good one to squeeze in as well.

[annezazu]

Agreed! @mikachan & @matiasbenedetto for consideration.

[matiasbenedetto]

Thanks for the ping. It would be very nice to add this 👍

[mikachan]

Agreed, this would be a super cool addition!

[carolinan]

I had a try at this, but was unable to find a way to open not only the modal, but also the typography panel.

In comparison, (simplified) the custom CSS, stylebook and preference modal commands work because these are separate screens with their own paths.

[mikachan]

Thanks for taking a look at this, @carolinan. Maybe we need to use a different kind of trigger to open the Font Library modal, something that's more similar to the preference modal. (I say all this without looking into the details yet.)

[t-hamano]

Just to be sure, is this command expected to open the Font Library modal itself, rather than opening the Global Styles typography panel? If so, I think we need to manage the modal's state with a datastore. I'm testing it with #58350.

[mikachan]

is this command expected to open the Font Library modal itself, rather than opening the Global Styles typography panel?

Yes, I think opening the modal makes the most sense. Thanks for testing a solution for this! Managing the modal's state with the datastore sounds like a good step forward.

[carolinan]

I think it should do both.

[t-hamano]

I think it should do both.

After some simple hacking and testing of existing command actions, it seems possible to open the Typograph panel with a command action.

I would like to proceed with #58350.

Diff

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 3abd1c811f..c59c7caee3 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -246,6 +246,9 @@ function GlobalStylesEditorCanvasContainerLink() {
                        case 'global-styles-revisions:style-book':
                                goTo( '/revisions' );
                                break;
+                       case 'global-styles-typograpy':
+                               goTo( '/typography' );
+                               break;
                        case 'global-styles-css':
                                goTo( '/css' );
                                break;
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
index fdea50d8af..e61365572d 100644
--- a/packages/edit-site/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -202,8 +202,8 @@ function useGlobalStylesOpenCssCommands() {
 
                return [
                        {
-                               name: 'core/edit-site/open-styles-css',
-                               label: __( 'Customize CSS' ),
+                               name: 'core/edit-site/open-font-library-modal',
+                               label: __( 'Open font library' ),
                                icon: brush,
                                callback: ( { close } ) => {
                                        close();
@@ -217,7 +217,7 @@ function useGlobalStylesOpenCssCommands() {
                                                setCanvasMode( 'edit' );
                                        }
                                        openGeneralSidebar( 'edit-site/global-styles' );
-                                       setEditorCanvasContainerView( 'global-styles-css' );
+                                       setEditorCanvasContainerView( 'global-styles-typograpy' );
                                },
                        },
                ];

12b2126f2f1476f64f51b1e467ac7a8b.mp4

[richtabor]

I think it should do both.

Agreed.

[t-hamano]

As seen in #58350 (comment), refactoring (removing) the context is necessary to move this issue forward.

I have submitted #58428, but if anyone is interested, please join.

[t-hamano]

In order to add the command using the ideal approach, #58428 would need to be resolved first. This command is not originally on the roadmap and I don't think it's essential to include it in WP6.5, so I'll punt it to 6.6.

[NekoJonez]

Today I was playing around looking for the modal in 6.5 beta 2 ... And I didn't easily find it. Now, does this mean that the font library is only here for FSE themes? Is it ever coming to non FSE themes?

Also, I expected it to be in the block options but don't know if that's the best idea.