Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header & Footer: Use core supports for text, background, and border controls #350

Merged
merged 11 commits into from
Mar 17, 2023
Merged

Header & Footer: Use core supports for text, background, and border controls #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ebaf261
Add block supports for colors, spacing, and borders
ryelle Feb 15, 2023
0351c86
Prevent duplicate block supports in edit view
ryelle Feb 15, 2023
fb40a5d
Move footer wrapper into `render` function to provide block supports
ryelle Feb 15, 2023
02e9e4d
Parse out the existing block style into the correct colors
ryelle Feb 15, 2023
b4e7c1e
Remove variations & style attribute
ryelle Feb 16, 2023
3a353b7
Remove unused variable
ryelle Feb 16, 2023
1f39bcf
Ensure the footer SVGs are dark when the text is charcoal
ryelle Feb 16, 2023
51c3947
Header block should also support core colors, remove custom variations
ryelle Feb 21, 2023
54a68b1
Remove the unnecessary variations code
ryelle Mar 13, 2023
e8405c7
Remove duplicate attributes on header block
ryelle Mar 13, 2023
64c6dfb
Ensure the classic markup is not wrapped in the header/footer tags
ryelle Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 56 additions & 33 deletions mu-plugins/blocks/global-header-footer/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
add_filter( 'style_loader_src', __NAMESPACE__ . '\update_google_fonts_url', 10, 2 );
add_filter( 'render_block_core/navigation-link', __NAMESPACE__ . '\swap_submenu_arrow_svg' );
add_filter( 'render_block_core/search', __NAMESPACE__ . '\swap_header_search_action', 10, 2 );
add_filter( 'render_block_data', __NAMESPACE__ . '\update_block_style_colors' );

/**
* Register block types
Expand Down Expand Up @@ -370,13 +371,23 @@ function render_global_header( $attributes = array() ) {
*
* API requests also need `<head>` etc so they can get the styles.
*/
$head_markup = '';
if ( ! wp_is_block_theme() || $is_rest_request ) {
ob_start();
require_once __DIR__ . '/classic-header.php';
$markup = ob_get_clean() . $markup;
$head_markup = ob_get_clean();
}

return $markup;
$wrapper_attributes = get_block_wrapper_attributes(
array( 'class' => 'global-header wp-block-group' )
);
return sprintf(
'%1$s<header %2$s>%3$s</header>%4$s',
$head_markup,
$wrapper_attributes,
$markup,
wp_kses_post( render_header_alert_banner() )
);
}

/**
Expand Down Expand Up @@ -784,11 +795,13 @@ function rest_render_global_footer( $request ) {
/**
* Render the global footer in a block context.
*
* @param array $attributes The block attributes.
* @param array $attributes Block attributes.
* @param string $content Block default content.
* @param WP_Block $block Block instance.
*
* @return string
* @return string Returns the block markup.
*/
function render_global_footer( $attributes = array() ) {
function render_global_footer( $attributes, $content, $block ) {
remove_inner_group_container();

if ( is_rosetta_site() ) {
Expand All @@ -808,17 +821,52 @@ function render_global_footer( $attributes = array() ) {
$is_rest_request = defined( 'REST_REQUEST' ) && REST_REQUEST;

// Render the classic markup second, so the `wp_footer()` call will execute callbacks that blocks added.
$footer_markup = '';
if ( ! wp_is_block_theme() || $is_rest_request ) {
ob_start();
require_once __DIR__ . '/classic-footer.php';
$markup .= ob_get_clean();
$footer_markup = ob_get_clean();
}

remove_filter( 'render_block_data', __NAMESPACE__ . '\localize_nav_links' );

return $markup;
$wrapper_attributes = get_block_wrapper_attributes(
array( 'class' => 'global-footer wp-block-group' )
);
return sprintf(
'<footer %1$s>%2$s</footer>%3$s',
$wrapper_attributes,
$markup,
$footer_markup,
);
}

/**
* Convert the `style` attribute on the footer block to use color settings.
*
* @param array $block The parsed block data.
*
* @return array
*/
function update_block_style_colors( $block ) {
if (
! empty( $block['blockName'] ) &&
in_array( $block['blockName'], [ 'wporg/global-footer', 'wporg/global-header' ], true ) &&
! empty( $block['attrs']['style'] )
) {
if ( 'black-on-white' === $block['attrs']['style'] ) {
$block['attrs']['textColor'] = 'charcoal-2';
$block['attrs']['backgroundColor'] = 'white';
} elseif ( 'white-on-blue' === $block['attrs']['style'] ) {
$block['attrs']['textColor'] = 'white';
$block['attrs']['backgroundColor'] = 'blueberry-1';
}
}

return $block;
}


/**
* Localise a `core/navigation-link` block link to point to the Rosetta site resource.
*
Expand Down Expand Up @@ -1025,7 +1073,7 @@ function swap_header_search_action( $block_content, $block ) {
return $block_content;
}

/*
/**
* Translate the tagline with the necessary text domain.
*/
function get_cip_text() {
Expand All @@ -1038,28 +1086,3 @@ function get_cip_text() {

return $translated;
}

/**
* Generate the classes based on the selected color scheme.
*
* This applies the expected color class using the format of Gutenberg's text
* and background styles, though the actual colors are applied via CSS custom
* properties in `_common.scss`.
*/
function get_container_classes( $color_scheme ) {
$classes = ' has-text-color has-background';
switch ( $color_scheme ) {
case 'white-on-blue':
$classes .= ' has-white-color has-blueberry-1-background-color';
break;
case 'black-on-white':
$classes .= ' has-charcoal-2-color has-white-background-color';
break;
case 'white-on-black':
default:
$classes .= ' has-white-color has-charcoal-2-background-color';
break;
}

return $classes;
}
200 changes: 97 additions & 103 deletions mu-plugins/blocks/global-header-footer/footer.php
View file
Open in desktop

Large diffs are not rendered by default.

110 changes: 48 additions & 62 deletions mu-plugins/blocks/global-header-footer/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

namespace WordPressdotorg\MU_Plugins\Global_Header_Footer\Header;

use function WordPressdotorg\MU_Plugins\Global_Header_Footer\{ get_home_url, get_download_url, get_container_classes, render_header_alert_banner };
use function WordPressdotorg\MU_Plugins\Global_Header_Footer\{ get_home_url, get_download_url };

defined( 'WPINC' ) || die();

Expand All @@ -15,15 +15,6 @@
* @var string $show_search
*/

$container_class = 'global-header';
if ( ! empty( $locale_title ) ) {
$container_class .= ' global-header__has-locale-title';
}

$color_scheme = apply_filters( 'wporg_header_color_scheme', $attributes['style'] );

$container_class .= get_container_classes( $color_scheme );

$search_args = array(
'label' => _x( 'Search', 'button label', 'wporg' ),
'placeholder' => _x( 'Search WP.org...', 'input field placeholder', 'wporg' ),
Expand Down Expand Up @@ -73,55 +64,50 @@ function recursive_menu( $menu_item, $top_level = true ) {

?>

<!-- wp:group {"tagName":"header","align":"full","className":"<?php echo esc_attr( $container_class ); ?>"} -->
<header class="wp-block-group alignfull <?php echo esc_attr( $container_class ); ?>">
<!-- wp:html -->
<figure class="wp-block-image global-header__wporg-logo-mark">
<a href="<?php echo esc_url( get_home_url() ); ?>">
<?php require __DIR__ . '/images/w-mark.svg'; ?>
</a>
</figure>
<!-- /wp:html -->

<?php if ( ! empty( $locale_title ) ) : ?>
<!-- wp:paragraph {"className":"global-header__wporg-locale-title"} -->
<p class="global-header__wporg-locale-title">
<span><?php echo esc_html( $locale_title ); ?></span>
</p>
<!-- /wp:paragraph -->
<?php endif; ?>

<!-- wp:navigation {"className":"global-header__navigation","layout":{"type":"flex","orientation":"horizontal"}} -->
<?php
/*
* Loop though menu items and create navigation item blocks. Recurses through any submenu items to output dropdowns.
*/
foreach ( $menu_items as $item ) {
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo recursive_menu( $item );
}
?>
<!-- /wp:navigation -->

<?php if ( $show_search ) : ?>
<!--
The search block is inside a navigation menu because that provides the exact functionality the design
calls for. It also provides a consistent experience with the primary navigation menu, with respect to
keyboard navigation, ARIA states, etc. It also saves having to write custom code for all the interactions.
-->
<!-- wp:navigation {"className":"global-header__search","layout":{"type":"flex","orientation":"vertical"},"overlayMenu":"always"} -->
<!-- wp:search <?php echo wp_json_encode( $search_args ); ?> /-->
<!-- /wp:navigation -->
<?php endif; ?>

<!-- This is the first of two Get WordPress buttons; the other is in the navigation menu.
Two are needed because they have different DOM hierarchies at different breakpoints. -->
<!-- wp:group {"className":"global-header__desktop-get-wordpress-container"} -->
<div class="global-header__desktop-get-wordpress-container">
<a href="<?php echo esc_url( get_download_url() ); ?>" class="global-header__desktop-get-wordpress global-header__get-wordpress">
<?php echo esc_html_x( 'Get WordPress', 'link anchor text', 'wporg' ); ?>
</a>
</div> <!-- /wp:group -->
</header> <!-- /wp:group -->

<?php echo wp_kses_post( render_header_alert_banner() ); ?>
<!-- wp:html -->
<figure class="wp-block-image global-header__wporg-logo-mark">
<a href="<?php echo esc_url( get_home_url() ); ?>">
<?php require __DIR__ . '/images/w-mark.svg'; ?>
</a>
</figure>
<!-- /wp:html -->

<?php if ( ! empty( $locale_title ) ) : ?>
<!-- wp:paragraph {"className":"global-header__wporg-locale-title"} -->
<p class="global-header__wporg-locale-title">
<span><?php echo esc_html( $locale_title ); ?></span>
</p>
<!-- /wp:paragraph -->
<?php endif; ?>

<!-- wp:navigation {"className":"global-header__navigation","layout":{"type":"flex","orientation":"horizontal"}} -->
<?php
/*
* Loop though menu items and create navigation item blocks. Recurses through any submenu items to output dropdowns.
*/
foreach ( $menu_items as $item ) {
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo recursive_menu( $item );
}
?>
<!-- /wp:navigation -->

<?php if ( $show_search ) : ?>
<!--
The search block is inside a navigation menu because that provides the exact functionality the design
calls for. It also provides a consistent experience with the primary navigation menu, with respect to
keyboard navigation, ARIA states, etc. It also saves having to write custom code for all the interactions.
-->
<!-- wp:navigation {"className":"global-header__search","layout":{"type":"flex","orientation":"vertical"},"overlayMenu":"always"} -->
<!-- wp:search <?php echo wp_json_encode( $search_args ); ?> /-->
<!-- /wp:navigation -->
<?php endif; ?>

<!-- This is the first of two Get WordPress buttons; the other is in the navigation menu.
Two are needed because they have different DOM hierarchies at different breakpoints. -->
<!-- wp:group {"className":"global-header__desktop-get-wordpress-container"} -->
<div class="global-header__desktop-get-wordpress-container">
<a href="<?php echo esc_url( get_download_url() ); ?>" class="global-header__desktop-get-wordpress global-header__get-wordpress">
<?php echo esc_html_x( 'Get WordPress', 'link anchor text', 'wporg' ); ?>
</a>
</div> <!-- /wp:group -->
6 changes: 6 additions & 0 deletions mu-plugins/blocks/global-header-footer/postcss/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,16 @@ html {
--wp-global-header--text-color: var(--wp--preset--color--white);
}

.has-charcoal-0-color,
.has-charcoal-1-color,
.has-charcoal-2-color {
--wp-global-header--link-color: var(--wp--preset--color--charcoal-2);
--wp-global-header--link-color--active: var(--wp--preset--color--deep-blueberry);
--wp-global-header--text-color: var(--wp--preset--color--charcoal-2);

&.has-background[style*="background-color:"] {
--wp-global-header--background-color--hover: var(--wp--preset--color--light-grey-2);
}
}

.has-blueberry-1-background-color {
Expand Down
1 change: 1 addition & 0 deletions mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ html {
font-size: 21px;
height: var(--wp-global-header-height);
padding: 0;
box-sizing: content-box; /* Don't include border in header height. */

/*
* Some themes set a `z-index` on content elements that follow the header, like `#masthead` in
Expand Down
7 changes: 0 additions & 7 deletions mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,13 +304,6 @@
background: var(--wp-global-header--background-color--hover);
}
}

& .wp-block-navigation__container {

@media (--tablet) {
background: var(--wp-global-header--background-color);
}
}
}

/* Gutenberg bug: Close button is not visible in Safari; override it locally */
Expand Down
14 changes: 9 additions & 5 deletions mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,14 @@
}
}

.wp-block-group.global-header.has-white-background-color .global-header__search .wp-block-search__inside-wrapper {
border: 2px solid var(--wp-global-header--text-color);
}
.wp-block-group.global-header.has-charcoal-0-color,
.wp-block-group.global-header.has-charcoal-1-color,
.wp-block-group.global-header.has-charcoal-2-color {
& .global-header__search .wp-block-search__inside-wrapper {
border: 2px solid var(--wp-global-header--text-color);
}

.wp-block-group.global-header.has-white-background-color .global-header__search .wp-block-navigation__responsive-container-open {
background-image: url(../images/search-for-light-bg.svg);
& .global-header__search .wp-block-navigation__responsive-container-open {
background-image: url(../images/search-for-light-bg.svg);
}
}
25 changes: 20 additions & 5 deletions mu-plugins/blocks/global-header-footer/src/footer/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,28 @@
"title": "Global Footer",
"category": "design",
"description": "Global footer for all of WordPress.org",
"attributes": {
"style": {
"type": "string",
"default": "white-on-black",
"enum": [ "white-on-black", "black-on-white", "white-on-blue" ]
"supports": {
"color": {
"background": true,
"link": false,
"text": true
},
"html": false,
"multiple": false,
"reusable": false,
"spacing": {
"margin": [ "top" ],
"padding": false,
"blockGap": false
},
"__experimentalBorder": {
"color": true,
"radius": false,
"style": true,
"width": true
}
},
"attributes": {},
"textdomain": "wporg",
"style": "wporg-global-header-footer",
"editorStyle": "wporg-global-header-footer",
Expand Down
Loading