From 624ac76935bb9c072e72ecde9b465218852c92e5 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 22 Mar 2024 13:05:46 +0900 Subject: [PATCH] Block Styles: Add "Buttons" block style for navigation block (#127) * Block Styles: Add "Buttons" block style for navigation block * Update hover state to use lighter grey * Scroll navigation horizontally when it is longer than the screen --- .../wporg-parent-2021/inc/block-styles.php | 9 +++++ .../sass/blocks/_button.scss | 40 +++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php index 086ea58f..4906894a 100644 --- a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php +++ b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php @@ -198,6 +198,15 @@ function setup_block_styles() { 'label' => __( 'Borderless', 'wporg' ), ) ); + + register_block_style( + 'core/navigation', + array( + 'name' => 'button-list', + 'label' => __( 'Buttons', 'wporg' ), + 'style_handle' => STYLE_HANDLE, + ) + ); } /** diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss index 23fcf23d..4e48beda 100644 --- a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss +++ b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss @@ -112,4 +112,44 @@ box-shadow: inset 0 0 0 3px var(--wp--custom--button--outline--hover--border--color); } } + + // Block style for navigation, but uses button style mixins. + &.is-style-button-list { + gap: 0; + overflow-x: auto; + white-space: nowrap; + + .wp-block-navigation-item__content { + --wp--custom--button--outline--border--color: transparent !important; + --wp--custom--button--outline--hover--border--color: var(--wp--preset--color--light-grey-2) !important; + --wp--custom--button--outline--hover--color--background: var(--wp--preset--color--light-grey-2) !important; + border-radius: 2px; + + &:hover, + &:focus { + text-decoration: none; + } + + &:focus { + + @include button-color-focus-styles; + } + + @include button-small-styles; + @include button-toggle-styles; + } + + .current-menu-item .wp-block-navigation-item__content { + + @include button-toggle-active-styles; + + --wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white); + --wp--custom--button--outline--focus--color--background: var(--wp--preset--color--charcoal-1); + + &:hover { + --wp--custom--button--outline--hover--color--text: var(--wp--preset--color--charcoal-1); + --wp--custom--button--outline--hover--color--background: var(--wp--preset--color--light-grey-2); + } + } + } }