diff --git a/packages/global-styles-ui/CHANGELOG.md b/packages/global-styles-ui/CHANGELOG.md index 0b6711f7b16713..f868f16e3405e7 100644 --- a/packages/global-styles-ui/CHANGELOG.md +++ b/packages/global-styles-ui/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Blocks screen: add the hover, focus, focus-visible and active state controls for the Navigation Link block, which already supports those states in `theme.json` and in the block inspector ([#83451](https://github.com/WordPress/gutenberg/pull/83451)). + ### Internal - Font Library: Use the public `Menu` from `@wordpress/ui` for font collection actions ([#82965](https://github.com/WordPress/gutenberg/pull/82965)). diff --git a/packages/global-styles-ui/src/test/utils.js b/packages/global-styles-ui/src/test/utils.js index be9b7383921edc..616196648c619c 100644 --- a/packages/global-styles-ui/src/test/utils.js +++ b/packages/global-styles-ui/src/test/utils.js @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { getNewIndexFromPresets } from '../utils'; +import { getNewIndexFromPresets, getValidPseudoStates } from '../utils'; const validPresets = { single: [ { slug: 'preset-1' } ], @@ -55,3 +55,13 @@ describe( 'getNewIndexFromPresets', () => { } ); } ); } ); + +describe( 'getValidPseudoStates', () => { + it( 'offers hover, focus, focus-visible and active for the Navigation Link block', () => { + expect( + getValidPseudoStates( 'core/navigation-link' ).map( + ( state ) => state.value + ) + ).toEqual( [ ':hover', ':focus', ':focus-visible', ':active' ] ); + } ); +} ); diff --git a/packages/global-styles-ui/src/utils.ts b/packages/global-styles-ui/src/utils.ts index a1f3e1c04241e7..75605e800f691a 100644 --- a/packages/global-styles-ui/src/utils.ts +++ b/packages/global-styles-ui/src/utils.ts @@ -55,6 +55,12 @@ export const VALID_BLOCK_STATES: Record< string, StateDefinition[] > = { { value: ':focus-visible', label: __( 'Focus-visible' ) }, { value: ':active', label: __( 'Active' ) }, ], + 'core/navigation-link': [ + { value: ':hover', label: __( 'Hover' ) }, + { value: ':focus', label: __( 'Focus' ) }, + { value: ':focus-visible', label: __( 'Focus-visible' ) }, + { value: ':active', label: __( 'Active' ) }, + ], }; /**