From 5421e91ce9da7e7c429b8c988cb27a41b3bcfdf1 Mon Sep 17 00:00:00 2001 From: Ian Dunn Date: Tue, 21 Sep 2021 15:48:48 -0700 Subject: [PATCH] Header/Footer: Refine footer styles --- README.md | 6 +- .../blocks/global-header-footer/footer.php | 137 ++++++++++-------- .../global-header-footer/postcss/common.pcss | 43 +++++- .../global-header-footer/postcss/footer.pcss | 99 ++++++++++++- package-lock.json | 9 +- package.json | 1 + postcss.config.js | 5 +- 7 files changed, 219 insertions(+), 81 deletions(-) diff --git a/README.md b/README.md index a044115b8..8e3b7397a 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,9 @@ Over time, this is intended to become the canonical source repository for all `m 1. Add entries to the `repositories` and `require-dev` sections of `composer.json`. See `wporg-news-2021` as an example. 1. Run `composer update` to install it -1. Add a constant in `env/0-sandbox.php`: - ```php - define( 'WPORG_GIT_MUPLUGINS_DIR', dirname( ABSPATH ) . '/vendor/wporg/wporg-mu-plugins' ); - ``` 1. `require_once` the files that you want. e.g., ```php - require_once WPORG_GIT_MUPLUGINS_DIR . '/mu-plugins/blocks/global-header-footer/blocks.php'; + require_once WPMU_PLUGIN_DIR . '/wporg-mu-plugins/mu-plugins/blocks/global-header-footer/blocks.php'; ``` 1. See individual plugin readmes for specific instructions diff --git a/mu-plugins/blocks/global-header-footer/footer.php b/mu-plugins/blocks/global-header-footer/footer.php index 806c2ddee..0cdb91c34 100644 --- a/mu-plugins/blocks/global-header-footer/footer.php +++ b/mu-plugins/blocks/global-header-footer/footer.php @@ -6,66 +6,77 @@ ?> - - - + + diff --git a/mu-plugins/blocks/global-header-footer/postcss/common.pcss b/mu-plugins/blocks/global-header-footer/postcss/common.pcss index aa918f25d..17e54e7f2 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/common.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/common.pcss @@ -5,12 +5,47 @@ * https://github.com/WordPress/wporg-news-2021/issues/13 isn't done yet. */ +/* + * Variables, mixins, etc + * + * Breakpoints should be synced with `wporg-parent-2021` (or `wporg-news-2021` until parent exists). + */ +@custom-media --tablet (min-width: 876px); +@custom-media --desktop (min-width: 1152px); +@custom-media --desktop-wide (min-width: 1320px); + +:root { + --site-footer-nav-block-margin-bottom: 25px; +} + .wp-block-group.site-header, -.wp-block-group.site-footer, -.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { - background-color: var(--wp--preset--color--dark-strokes-grey); +.wp-block-group.site-footer { + background-color: var(--wp--preset--color--dark-grey); +} + +/* + * Shared styles + */ + +/* + * Override Gutenberg's block gap, because it doesn't make sense for a header/footer. + * + * @link https://github.com/WordPress/gutenberg/issues/34716 + * @link https://github.com/WordPress/wporg-news-2021/pull/30 + */ +[class*="wp-container-"].site-header, +[class*="wp-container-"].site-footer, +[class*="wp-container-"].site-header > * + *, +[class*="wp-container-"].site-footer > * + *, +.site-header [class*="wp-container-"] > * + *, +.site-footer [class*="wp-container-"] > * + * { + margin-top: initial; } -.wp-block-navigation.is-responsive .wp-block-navigation-link__content { +.wp-block-navigation.wp-block-navigation a { color: var(--wp--preset--color--white); } + +.site-header__wporg-logo-full, .site-footer__wporg-logo-full { + display: none; +} diff --git a/mu-plugins/blocks/global-header-footer/postcss/footer.pcss b/mu-plugins/blocks/global-header-footer/postcss/footer.pcss index c60ce9033..955e4ffd4 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/footer.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/footer.pcss @@ -1,7 +1,98 @@ .wp-block-group.site-footer { - padding: 69px 80px 61px 80px; -} + padding-top: 44px; + padding-right: var(--wp--custom--post-content--padding--right); + padding-bottom: 44px; + padding-left: var(--wp--custom--post-content--padding--left); + + @media (--tablet) { + padding-top: 69px; + padding-bottom: 58px; + padding-left: var(--wp--custom--post-content--breakpoint--tablet--padding--left); + + /* Intentionally using "left" value for the right side. */ + padding-right: var(--wp--custom--post-content--breakpoint--tablet--padding--left); + } + + & > .site-footer__navigation-container { + max-width: 100%; + display: grid; + grid-gap: 20px; + + /* Create columns automatically, make them equal widths, wrap when needed. */ + grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) ); + } + + & [class*="wp-container-"].site-footer__logos-container { + display: flex; + flex-wrap: wrap; + margin-top: calc(66px - var(--site-footer-nav-block-margin-bottom)); + + @media (--tablet) { + justify-content: space-between; + flex-wrap: nowrap; + } + } + + & .site-footer__wporg-logo-mark { + flex-basis: 65%; + margin-bottom: 0; + + @media (--tablet) { + display: none; + } + } + + & .site-footer__wporg-logo-full { + @media (--tablet) { + display: inline; + flex-basis: 33%; + } + } + + & .wp-block-social-links { + justify-content: flex-end; + flex-basis: 35%; + min-width: 100px; + } + + & .wp-block-social-links, + & .wp-block-social-links .wp-social-link.wp-social-link.wp-social-link, + & .wp-block-social-links .wp-social-link a { + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + } + + & .wp-block-social-links .wp-social-link:last-child { + margin-right: 0; + } + + & .wp-block-social-links .wp-social-link svg { + fill: var(--wp--preset--color--white); + } + + & .wp-block-social-links { + @media (--tablet) { + justify-content: flex-end; + flex-basis: 33%; + order: 3; + } + } + + & .wp-block-image.site-footer__code_is_poetry { + flex-basis: 100%; + margin-top: 9px; + margin-bottom: 0; + + @media (--tablet) { + flex-basis: 33%; + order: 2; + text-align: right; /* Optical illusion to make this image look more centered. */ + } + } -.wp-block-group.site-footer .wp-block-social-links .wp-social-link svg { - fill: var(--wp--preset--color--white); + & .wp-block-image { + text-align: left; + } } diff --git a/package-lock.json b/package-lock.json index b5c03bf49..68288b36c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,7 +1,8 @@ { "name": "wporg-mu-plugins", - "requires": true, + "version": "0.0.1", "lockfileVersion": 1, + "requires": true, "dependencies": { "@csstools/convert-colors": { "version": "1.4.0", @@ -993,9 +994,9 @@ "dev": true }, "nth-check": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz", - "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz", + "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==", "dev": true, "requires": { "boolbase": "^1.0.0" diff --git a/package.json b/package.json index a3383fb27..0cb37cff3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "wporg-mu-plugins", + "version": "0.0.1", "description": "Over time, this is intended to become the canonical source repository for all `mu-plugins` on the WordPress.org network. At the moment, it only includes a few.", "repository": { "type": "git", diff --git a/postcss.config.js b/postcss.config.js index 67971a1d8..4bcf91abb 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -6,6 +6,9 @@ module.exports = { 'postcss-nesting': {}, 'postcss-custom-media': {}, 'postcss-preset-env': {}, - 'cssnano': {} + 'cssnano': {}, + + // This has to go after any plugins that output messages. + 'postcss-reporter': {} } };