diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index afed35c13ff6a7..e33aa99fe8195f 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
import { useHasColorPanel } from './color-utils';
import { useHasDimensionsPanel } from './dimensions-panel';
import { useHasTypographyPanel } from './typography-panel';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
function ContextMenu( { name, parentMenu = '' } ) {
const hasTypographyPanel = useHasTypographyPanel( name );
@@ -24,28 +24,28 @@ function ContextMenu( { name, parentMenu = '' } ) {
return (
{ hasTypographyPanel && (
-
{ __( 'Typography' ) }
-
+
) }
{ hasColorPanel && (
-
{ __( 'Colors' ) }
-
+
) }
{ hasLayoutPanel && (
-
{ __( 'Layout' ) }
-
+
) }
);
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index abc162acc652d8..5653fe8bd50787 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -14,14 +14,14 @@ import { chevronRight, chevronLeft } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import { NavigationBackButton } from './navigation-button';
+import { NavigationBackButtonAsItem } from './navigation-button';
function ScreenHeader( { title, description } ) {
return (
-
-
+ ;
}
-function NavigationBackButton( props ) {
+function NavigationBackButtonAsItem( props ) {
return ;
}
-export { NavigationButton, NavigationBackButton };
+export { NavigationButtonAsItem, NavigationBackButtonAsItem };
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index c4beef9c6430ea..c0c1d0968832aa 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -16,7 +16,7 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import Subtitle from './subtitle';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
import { useSetting } from './hooks';
import ColorIndicatorWrapper from './color-indicator-wrapper';
@@ -58,7 +58,7 @@ function Palette( { name } ) {
{ __( 'Palette' ) }
-
+
{ paletteButtonText }
-
+
);
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index 194192c8b113bf..9b6f81d986b465 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -22,7 +22,7 @@ import { useHasColorPanel } from './color-utils';
import { useHasDimensionsPanel } from './dimensions-panel';
import { useHasTypographyPanel } from './typography-panel';
import ScreenHeader from './header';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
function useSortedBlockTypes() {
const blockItems = useSelect(
@@ -61,12 +61,12 @@ function BlockMenuItem( { block } ) {
}
return (
-
+
{ block.title }
-
+
);
}
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 66ac604c9db34d..4e961dcf0e75b7 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -15,7 +15,7 @@ import {
*/
import ScreenHeader from './header';
import Palette from './palette';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
import Subtitle from './subtitle';
import ColorIndicatorWrapper from './color-indicator-wrapper';
@@ -33,7 +33,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
}
return (
-
+
{ __( 'Background' ) }
-
+
);
}
@@ -56,14 +56,14 @@ function TextColorItem( { name, parentMenu } ) {
}
return (
-
+
{ __( 'Text' ) }
-
+
);
}
@@ -77,14 +77,14 @@ function LinkColorItem( { name, parentMenu } ) {
}
return (
-
+
{ __( 'Links' ) }
-
+
);
}
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index d29083b692252d..74ebbf193d8b38 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -21,7 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import { IconWithCurrentColor } from './icon-with-current-color';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
import ContextMenu from './context-menu';
import StylesPreview from './preview';
@@ -44,16 +44,20 @@ function ScreenRoot() {
{ !! variations?.length && (
-
-
- { __( 'Browse styles' ) }
-
-
-
+
+
+
+
+ { __( 'Browse styles' ) }
+
+
+
+
+
) }
@@ -77,14 +81,14 @@ function ScreenRoot() {
) }
-
+
{ __( 'Blocks' ) }
-
+
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 3556a89043b1cb..32e93cd6af37e4 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -13,7 +13,7 @@ import {
* Internal dependencies
*/
import ScreenHeader from './header';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
import { useStyle } from './hooks';
import Subtitle from './subtitle';
import TypographyPanel from './typography-panel';
@@ -44,7 +44,7 @@ function Item( { name, parentMenu, element, label } ) {
}
return (
-
+
{ label }
-
+
);
}