From 7b00671356fc7315a5e13af941b6f5b2c790f88f Mon Sep 17 00:00:00 2001 From: Laurel Date: Fri, 26 May 2023 11:06:40 -0700 Subject: [PATCH 1/5] feat: add block style to 'flatten' mobile nav (#37) --- includes/class-core.php | 6 ++ parts/mobile-sidebar.html | 2 +- .../editor/block-styles/navigation-styles.js | 9 +++ src/js/editor/index.js | 3 +- src/scss/_gutenberg-shim.scss | 17 +++++- src/scss/block-styles/_block-styles.scss | 1 + src/scss/block-styles/_navigation-styles.scss | 59 +++++++++++++++++++ src/scss/blocks/_navigation.scss | 25 +++++++- src/scss/style.scss | 1 + 9 files changed, 115 insertions(+), 8 deletions(-) create mode 100644 src/js/editor/block-styles/navigation-styles.js create mode 100644 src/scss/block-styles/_block-styles.scss create mode 100644 src/scss/block-styles/_navigation-styles.scss diff --git a/includes/class-core.php b/includes/class-core.php index 0fb67564..e367f9b6 100644 --- a/includes/class-core.php +++ b/includes/class-core.php @@ -40,6 +40,7 @@ public static function instance() { public function __construct() { \add_action( 'after_setup_theme', [ __CLASS__, 'theme_support' ] ); \add_action( 'wp_enqueue_scripts', [ __CLASS__, 'theme_styles' ] ); + \add_action( 'enqueue_block_editor_assets', [ __CLASS__, 'editor_scripts' ] ); } /** @@ -80,6 +81,11 @@ public static function theme_styles() { // Enqueue front-end JavaScript. wp_enqueue_script( 'newspack-main', get_theme_file_uri( '/dist/main.js' ), array(), wp_get_theme()->get( 'Version' ), true ); } + + public static function editor_scripts() { + // Enqueue editor JavaScript. + wp_enqueue_script( 'editor-script', get_theme_file_uri( '/dist/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true ); + } } Core::instance(); diff --git a/parts/mobile-sidebar.html b/parts/mobile-sidebar.html index b448cad6..df50d5ea 100644 --- a/parts/mobile-sidebar.html +++ b/parts/mobile-sidebar.html @@ -11,7 +11,7 @@
- +
diff --git a/src/js/editor/block-styles/navigation-styles.js b/src/js/editor/block-styles/navigation-styles.js new file mode 100644 index 00000000..34ff6115 --- /dev/null +++ b/src/js/editor/block-styles/navigation-styles.js @@ -0,0 +1,9 @@ +// Add style to 'flatten' the Navigation block for mobile screens. +// TODO: Restrict this to just the vertical block vatiation. +// See: https://github.com/WordPress/gutenberg/issues/40621 +wp.domReady( () => { + wp.blocks.registerBlockStyle( 'core/navigation', { + name: 'flatten', + label: 'Flatten Vertical Navigation', + } ); +} ); diff --git a/src/js/editor/index.js b/src/js/editor/index.js index 9754d06e..820bf44a 100644 --- a/src/js/editor/index.js +++ b/src/js/editor/index.js @@ -1,3 +1,2 @@ import '../shared/_shared-module'; - -console.log( 'editor JS single entrypoint file' ); +import './block-styles/navigation-styles.js'; diff --git a/src/scss/_gutenberg-shim.scss b/src/scss/_gutenberg-shim.scss index c6915373..1a035fc7 100644 --- a/src/scss/_gutenberg-shim.scss +++ b/src/scss/_gutenberg-shim.scss @@ -20,12 +20,23 @@ * Remove extra padding from navigation link when set to click to open. * https://github.com/WordPress/gutenberg/issues/50722 */ - .wp-block-navigation { - .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle { - padding-left: 0; +.wp-block-navigation { + &.is-vertical .wp-block-navigation-item.open-on-click { + .wp-block-navigation-submenu__toggle { + padding-left: 0; + } + + .has-child .wp-block-navigation-submenu__toggle { + padding: 0.5em 1em; + } } } +/* Fix for hidden 'append' icons in editor */ +.has-background .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender { + color: inherit; +} + /* * Link styles * https://github.com/WordPress/gutenberg/issues/42319 diff --git a/src/scss/block-styles/_block-styles.scss b/src/scss/block-styles/_block-styles.scss new file mode 100644 index 00000000..8caf2648 --- /dev/null +++ b/src/scss/block-styles/_block-styles.scss @@ -0,0 +1 @@ +@import url( './_navigation-styles.scss' ); \ No newline at end of file diff --git a/src/scss/block-styles/_navigation-styles.scss b/src/scss/block-styles/_navigation-styles.scss new file mode 100644 index 00000000..4542dbd6 --- /dev/null +++ b/src/scss/block-styles/_navigation-styles.scss @@ -0,0 +1,59 @@ +.wp-block-navigation { + &.is-style-flatten { + // TODO: restrict this just to the vertical block variation. + // In the meantime, we'll use CSS so the styles are only applied there. + // See: https://github.com/WordPress/gutenberg/issues/40621. + &.is-vertical { + .wp-block-navigation-item { + flex-wrap: wrap; + } + + .wp-block-navigation__submenu-icon { + display: none; + } + + .wp-block-navigation__submenu-container { + overflow: visible; + } + + &:not(.has-background) .wp-block-navigation__submenu-container { + background: transparent; + } + + &:not( .has-text-color) .wp-block-navigation__submenu-container { + color: inherit; + } + + .has-child { + gap: var(--wp--preset--spacing--30); + + .wp-block-navigation__submenu-container { + border: 0; + border-radius: 0; + box-shadow: none; + gap: inherit; + height: unset; + padding: 0 0 0 var(--wp--preset--spacing--30); + position: static; + opacity: unset; + visibility: unset; + } + + .wp-block-navigation__submenu-container, + .wp-block-navigation-submenu__toggle[aria-expanded='true']~.wp-block-navigation__submenu-container, + &:not(.open-on-click):hover>.wp-block-navigation__submenu-container { + width: 100%; + } + + &.has-child-selected>.wp-block-navigation__submenu-container, + &.is-selected>.wp-block-navigation__submenu-container { + width: 100% !important; + } + } + + &.has-background .has-child { + gap: var(--wp--preset--spacing--20); + } + } + } +} \ No newline at end of file diff --git a/src/scss/blocks/_navigation.scss b/src/scss/blocks/_navigation.scss index e9a20655..d8f667cb 100644 --- a/src/scss/blocks/_navigation.scss +++ b/src/scss/blocks/_navigation.scss @@ -1,10 +1,19 @@ +@use '../sass-utils'; + .wp-block-navigation { // Give dropdowns a rounded border, a drop-shadow, and increase the top padding. .wp-block-navigation__submenu-container { border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; - padding: 0.5em 0; + padding: var(--wp--preset--spacing--20) 0; + } + + @include sass-utils.media( medium ) { + // Adjust the vertical placement of the dropdowns to account for the extra padding. + .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + top: calc( -0.5em - 1px); + } } // Increase minimum dropdown width. @@ -13,8 +22,20 @@ min-width: 240px; } + // Don't add the box shadow/padding when using the default mobile view of the navigation block. + .wp-block-navigation__responsive-container.has-modal-open { + .wp-block-navigation__submenu-container { + box-shadow: none; + padding-bottom: 0; + } + } + // Change the block spacing when vertical. - &.is-layout-flex.is-vertical { + &.is-vertical { gap: var(--wp--preset--spacing--40); + + &.has-background { + gap: var(--wp--preset--spacing--30); + } } } \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index 367177fa..05a1fca9 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -3,4 +3,5 @@ @import url( './_base.scss' ); @import url( './_gutenberg-shim.scss' ); @import url( './blocks/_blocks.scss' ); +@import url( './block-styles/_block-styles.scss' ); @import url( './_header.scss' ); From 7e6fe6ef493ea90cd2b7e426d5d88c3ca2efa8af Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 29 May 2023 03:07:47 +0000 Subject: [PATCH 2/5] chore(deps-dev): bump @rushstack/eslint-patch from 1.2.0 to 1.3.0 Bumps [@rushstack/eslint-patch](https://github.com/microsoft/rushstack/tree/HEAD/eslint/eslint-patch) from 1.2.0 to 1.3.0. - [Changelog](https://github.com/microsoft/rushstack/blob/main/eslint/eslint-patch/CHANGELOG.md) - [Commits](https://github.com/microsoft/rushstack/commits/@rushstack/eslint-patch_v1.3.0/eslint/eslint-patch) --- updated-dependencies: - dependency-name: "@rushstack/eslint-patch" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 24b3c6dc..e4705ef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "GPL-3.0", "devDependencies": { - "@rushstack/eslint-patch": "^1.2.0", + "@rushstack/eslint-patch": "^1.3.0", "eslint": "^7.32.0", "ignore-emit-webpack-plugin": "^2.0.6", "lint-staged": "^13.2.2", @@ -5158,9 +5158,9 @@ } }, "node_modules/@rushstack/eslint-patch": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz", - "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.0.tgz", + "integrity": "sha512-IthPJsJR85GhOkp3Hvp8zFOPK5ynKn6STyHa/WZpioK7E1aYDiBzpqQPrngc14DszIUkIrdd3k9Iu0XSzlP/1w==", "dev": true }, "node_modules/@semantic-release/changelog": { @@ -37090,9 +37090,9 @@ } }, "@rushstack/eslint-patch": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz", - "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.0.tgz", + "integrity": "sha512-IthPJsJR85GhOkp3Hvp8zFOPK5ynKn6STyHa/WZpioK7E1aYDiBzpqQPrngc14DszIUkIrdd3k9Iu0XSzlP/1w==", "dev": true }, "@semantic-release/changelog": { diff --git a/package.json b/package.json index 42a46bc8..c73a4f8b 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "postinstall": "rm -rf node_modules/newspack-scripts/node_modules/prettier" }, "devDependencies": { - "@rushstack/eslint-patch": "^1.2.0", + "@rushstack/eslint-patch": "^1.3.0", "eslint": "^7.32.0", "ignore-emit-webpack-plugin": "^2.0.6", "lint-staged": "^13.2.2", From 05980d98a22de9d56af4d2d3ac3de7437de03103 Mon Sep 17 00:00:00 2001 From: Laurel Date: Tue, 30 May 2023 09:50:03 -0700 Subject: [PATCH 3/5] fix: correct spacer block values (#42) --- parts/comments.html | 2 +- patterns/hidden-no-results-content.php | 4 ++-- templates/single.html | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/parts/comments.html b/parts/comments.html index 8cef994e..d322b324 100644 --- a/parts/comments.html +++ b/parts/comments.html @@ -34,7 +34,7 @@ - + diff --git a/patterns/hidden-no-results-content.php b/patterns/hidden-no-results-content.php index 91df31b6..42e354d5 100644 --- a/patterns/hidden-no-results-content.php +++ b/patterns/hidden-no-results-content.php @@ -10,7 +10,7 @@ ?>
- + @@ -18,7 +18,7 @@ - + diff --git a/templates/single.html b/templates/single.html index 82b16b20..08603395 100644 --- a/templates/single.html +++ b/templates/single.html @@ -12,13 +12,13 @@ - + - + From 514111e59e81fe135a4492a1f83c4f246d0dfcd4 Mon Sep 17 00:00:00 2001 From: Laurel Date: Tue, 30 May 2023 10:09:24 -0700 Subject: [PATCH 4/5] feat: building out 404 page (#43) --- patterns/404.php | 10 ++++----- src/scss/_gutenberg-shim.scss | 2 +- src/scss/blocks/_navigation.scss | 2 +- src/scss/blocks/_pagination.scss | 2 +- src/scss/blocks/_search.scss | 38 +++++++++++++++++++++++++++++--- templates/404.html | 27 ++++++++++++++++------- theme.json | 5 ++++- 7 files changed, 66 insertions(+), 20 deletions(-) diff --git a/patterns/404.php b/patterns/404.php index a11e0052..bb618888 100644 --- a/patterns/404.php +++ b/patterns/404.php @@ -8,11 +8,11 @@ */ ?> - - -

+ +

Page not found.

- -

+ +

+ diff --git a/src/scss/_gutenberg-shim.scss b/src/scss/_gutenberg-shim.scss index 1a035fc7..474be7d0 100644 --- a/src/scss/_gutenberg-shim.scss +++ b/src/scss/_gutenberg-shim.scss @@ -88,5 +88,5 @@ input[type='datetime-local'], input[type='zip'], input[type='color'], textarea { - border-radius: 6px; + border-radius: var( --wp--custom--border--radius ); } diff --git a/src/scss/blocks/_navigation.scss b/src/scss/blocks/_navigation.scss index d8f667cb..631d0f5d 100644 --- a/src/scss/blocks/_navigation.scss +++ b/src/scss/blocks/_navigation.scss @@ -3,7 +3,7 @@ .wp-block-navigation { // Give dropdowns a rounded border, a drop-shadow, and increase the top padding. .wp-block-navigation__submenu-container { - border-radius: 6px; + border-radius: var( --wp--custom--border--radius ); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; padding: var(--wp--preset--spacing--20) 0; diff --git a/src/scss/blocks/_pagination.scss b/src/scss/blocks/_pagination.scss index c43e1e00..ca130518 100644 --- a/src/scss/blocks/_pagination.scss +++ b/src/scss/blocks/_pagination.scss @@ -2,7 +2,7 @@ .wp-block-comments-pagination-numbers { a, span { - border-radius: 6px; + border-radius: var( --wp--custom--border--radius ); padding: 0.5rem 0.8rem; } diff --git a/src/scss/blocks/_search.scss b/src/scss/blocks/_search.scss index c30cbf15..6d5bbb8f 100644 --- a/src/scss/blocks/_search.scss +++ b/src/scss/blocks/_search.scss @@ -1,3 +1,35 @@ -.wp-block-search__button svg { - vertical-align: middle -} \ No newline at end of file +.wp-block-search { + + .wp-block-search__button.has-icon { + line-height: 1; + padding: 0.75rem; + + svg { + min-height: var(--wp--preset--spacing--40); + min-width: var(--wp--preset--spacing--40); + vertical-align: middle; + } + } + + &__button-inside { + .wp-block-search__inside-wrapper { + border-radius: var( --wp--custom--border--radius ); + box-sizing: border-box; + } + + .wp-block-search__button { + border-radius: calc( var( --wp--custom--border--radius ) / 2 ); + } + + &.wp-block-search__icon-button { + .wp-block-search__inside-wrapper { + padding: calc( var(--wp--preset--spacing--20) - 1px ); // maddening, but the math isn't working -- the search should be 52px tall, but is 54px. + } + + .wp-block-search__button { + padding: 0.375rem; + } + } + } +} + diff --git a/templates/404.html b/templates/404.html index 81e13f48..4d92ac77 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,12 +1,23 @@ - + - -
- - - + +
-
+ + + + + +

No thanks, take me to the homepage

+
+ + + +
+

Latest articles

+ + +
- \ No newline at end of file + \ No newline at end of file diff --git a/theme.json b/theme.json index 7b7e6b4a..08b567f0 100644 --- a/theme.json +++ b/theme.json @@ -147,6 +147,9 @@ }, "useRootPaddingAwareAlignments": true, "custom": { + "border": { + "radius": "6px" + }, "color": { "gray-900": "#1e1e1e", "gray-800": "#2f2f2f", @@ -583,7 +586,7 @@ } }, "border": { - "radius": "6px" + "radius": "var( --wp--custom--border--radius )" }, "color": { "background": "var(--wp--preset--color--primary)", From 51d849fc3e332a074a3d6c6e42bde60fbeb55ad5 Mon Sep 17 00:00:00 2001 From: Laurel Date: Tue, 30 May 2023 19:32:27 -0700 Subject: [PATCH 5/5] fix: remove style.css from the theme repo (#32) --- .gitignore | 1 + style.css | 16 ---------------- 2 files changed, 1 insertion(+), 16 deletions(-) delete mode 100644 style.css diff --git a/.gitignore b/.gitignore index 6c97a099..1bbf124c 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,7 @@ Thumbs.db # Compiled CSS *.css +style.css # Compiled Javascript /dist/ diff --git a/style.css b/style.css deleted file mode 100644 index 22f54084..00000000 --- a/style.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! -Theme Name: Newspack Block Theme -Theme URI: https://github.com/automattic/newspack-block-theme -Author: Automattic -Author URI: https://newspack.com -Description: A forward-looking news theme designed and developed to be highly customizable with the WordPress block editor. Brought to you by Newspack: https://newspack.com -Requires at least: 5.8 -Tested up to: 5.9 -Requires PHP: 5.7 -Version: 1.1.0 -License: GNU General Public License v2 or later -License URI: http://www.gnu.org/licenses/gpl-2.0.html -Template: -Text Domain: newspack-block-theme -Tags: one-column, wide-blocks, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks, auto-loading-homepage -*/.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover{background-color:var(--wp--preset--color--secondary);color:var(--wp--preset--color--base);border-color:var(--wp--preset--color--secondary)}a{text-decoration-thickness:.0625em!important;text-underline-offset:.15em}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}.desktop-header{display:none}@media only screen and (min-width:992px){.desktop-header{display:inherit}.mobile-header{display:none}}.mobile-sidebar{background:var(--wp--custom--background--mobile-menu);inset:0 -100% 0 auto;overflow:auto;padding:2rem;position:fixed;transition:right .2s;width:90%;z-index:999999}@media only screen and (min-width:782px){.mobile-sidebar{width:50%}}.mobile-sidebar>*{visibility:hidden}.overlay-mask{background:var(--wp--custom--background--mobile-menu-overlay);content:"";display:none;inset:0;position:fixed;z-index:2000}.menu-open--mobile-menu .mobile-sidebar{right:0}.menu-open--mobile-menu .mobile-sidebar>*{visibility:visible}.menu-open--mobile-menu .overlay-mask{display:block} \ No newline at end of file