diff --git a/backport-changelog/6.8/8261.md b/backport-changelog/6.8/8261.md new file mode 100644 index 00000000000000..d125d122cb3a4d --- /dev/null +++ b/backport-changelog/6.8/8261.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/8261 + +* https://github.com/WordPress/gutenberg/pull/68521 diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md index 359b36b4ad205b..e0b7653321413d 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -1034,7 +1034,7 @@ h3 { {% end %} ##### Element pseudo selectors -Pseudo selectors `:hover`, `:focus`, `:visited`, `:active`, `:link`, `:any-link` are supported by Gutenberg. +Pseudo selectors `:hover`, `:focus`, `:focus-visible`, `:visited`, `:active`, `:link`, `:any-link` are supported by Gutenberg. ```json "elements": { diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index e3186d2d370325..0679dd4283acf3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -563,7 +563,7 @@ class WP_Theme_JSON_Gutenberg { /** * Defines which pseudo selectors are enabled for which elements. * - * The order of the selectors should be: link, any-link, visited, hover, focus, active. + * The order of the selectors should be: link, any-link, visited, hover, focus, focus-visible, active. * This is to ensure the user action (hover, focus and active) styles have a higher * specificity than the visited styles, which in turn have a higher specificity than * the unvisited styles. @@ -573,10 +573,11 @@ class WP_Theme_JSON_Gutenberg { * * @since 6.1.0 * @since 6.2.0 Added support for `:link` and `:any-link`. + * @since 6.8.0 Added support for `:focus-visible`. */ const VALID_ELEMENT_PSEUDO_SELECTORS = array( - 'link' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':active' ), - 'button' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':active' ), + 'link' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':focus-visible', ':active' ), + 'button' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':focus-visible', ':active' ), ); /** @@ -2931,7 +2932,11 @@ static function ( $split_selector ) use ( $clean_style_variation_selector ) { array_filter( $element_pseudo_allowed, static function ( $pseudo_selector ) use ( $selector ) { - return str_contains( $selector, $pseudo_selector ); + /* + * Check if the pseudo selector is in the current selector, + * ensuring it is not followed by a dash (e.g., :focus should not match :focus-visible). + */ + return preg_match( '/' . preg_quote( $pseudo_selector, '/' ) . '(?!-)/', $selector ) === 1; } ) ); diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 4eec377e3a94b9..158b72e648cc2d 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -1713,6 +1713,9 @@ ":focus": { "$ref": "#/definitions/stylesPropertiesComplete" }, + ":focus-visible": { + "$ref": "#/definitions/stylesPropertiesComplete" + }, ":hover": { "$ref": "#/definitions/stylesPropertiesComplete" }, @@ -1729,6 +1732,7 @@ ":active", ":any-link", ":focus", + ":focus-visible", ":hover", ":link", ":visited"