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': {}
}
};