From f45f4b4671aadaf93db3e88c8e27f4d246a71b50 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 16 Dec 2025 16:24:33 +0100 Subject: [PATCH 01/12] scaffolding to add a pattern --- lib/block-patterns.php | 28 ++++++++++++++++++++++++++++ lib/load.php | 1 + 2 files changed, 29 insertions(+) create mode 100644 lib/block-patterns.php diff --git a/lib/block-patterns.php b/lib/block-patterns.php new file mode 100644 index 00000000000000..67cb2916e37224 --- /dev/null +++ b/lib/block-patterns.php @@ -0,0 +1,28 @@ + __( 'Hello World', 'gutenberg' ), + 'description' => _x( 'A simple pattern with a paragraph block saying hello world.', 'Block pattern description', 'gutenberg' ), + 'content' => '

Hello World

', + 'categories' => array( 'text' ), + ) + ); +} +add_action( 'init', 'gutenberg_register_core_block_patterns', 20 ); + diff --git a/lib/load.php b/lib/load.php index 5ed2a09a1c1357..aaffc59c12044a 100644 --- a/lib/load.php +++ b/lib/load.php @@ -165,6 +165,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php'; require __DIR__ . '/class-wp-duotone-gutenberg.php'; require __DIR__ . '/blocks.php'; +require __DIR__ . '/block-patterns.php'; require __DIR__ . '/block-editor-settings.php'; require __DIR__ . '/client-assets.php'; require __DIR__ . '/mathml-kses.php'; From 61720d1ade1305edb2df44c98e990efdd5949d41 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 11:11:50 +0100 Subject: [PATCH 02/12] created new category, added better metadata and starting content --- lib/block-patterns.php | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/lib/block-patterns.php b/lib/block-patterns.php index 67cb2916e37224..862010f9058837 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -14,13 +14,29 @@ * @since 6.0.0 */ function gutenberg_register_core_block_patterns() { + + register_block_pattern_category( + 'navigation', + array( + 'label' => _x( 'Navigation', 'Block pattern category' ), + 'description' => __( 'Display your website navigation.' ), + ) + ); + register_block_pattern( - 'gutenberg/hello-world', + 'gutenberg/navigation-overlay', array( - 'title' => __( 'Hello World', 'gutenberg' ), - 'description' => _x( 'A simple pattern with a paragraph block saying hello world.', 'Block pattern description', 'gutenberg' ), - 'content' => '

Hello World

', - 'categories' => array( 'text' ), + 'title' => __( 'Navigation Overlay', 'gutenberg' ), + 'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ), + 'content' => ' +
+ + + +
+', + 'categories' => array( 'navigation' ), + 'blockTypes' => array( 'core/template-part/overlay' ), ) ); } From 2dee63949af42080229c7fe00e97039f547e2ee0 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 11:40:02 +0100 Subject: [PATCH 03/12] don't load the patterns if experiment is disabled --- lib/block-patterns.php | 3 +-- lib/load.php | 5 ++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/block-patterns.php b/lib/block-patterns.php index 862010f9058837..a873f0f39bd692 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -14,7 +14,6 @@ * @since 6.0.0 */ function gutenberg_register_core_block_patterns() { - register_block_pattern_category( 'navigation', array( @@ -40,5 +39,5 @@ function gutenberg_register_core_block_patterns() { ) ); } -add_action( 'init', 'gutenberg_register_core_block_patterns', 20 ); +add_action( 'init', 'gutenberg_register_core_block_patterns', 20 ); diff --git a/lib/load.php b/lib/load.php index aaffc59c12044a..bc8ba5e2c5e590 100644 --- a/lib/load.php +++ b/lib/load.php @@ -164,9 +164,8 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php'; require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php'; require __DIR__ . '/class-wp-duotone-gutenberg.php'; -require __DIR__ . '/blocks.php'; -require __DIR__ . '/block-patterns.php'; -require __DIR__ . '/block-editor-settings.php'; + require __DIR__ . '/blocks.php'; + require __DIR__ . '/block-editor-settings.php'; require __DIR__ . '/client-assets.php'; require __DIR__ . '/mathml-kses.php'; require __DIR__ . '/demo.php'; From ac97d2b9f8342256dacc1613fa4546f087351e59 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 11:48:34 +0100 Subject: [PATCH 04/12] added text domain and descriptions to translations --- lib/block-patterns.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-patterns.php b/lib/block-patterns.php index a873f0f39bd692..b12ca92362aa0c 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -17,8 +17,8 @@ function gutenberg_register_core_block_patterns() { register_block_pattern_category( 'navigation', array( - 'label' => _x( 'Navigation', 'Block pattern category' ), - 'description' => __( 'Display your website navigation.' ), + 'label' => _x( 'Navigation', 'Block pattern category', 'gutenberg' ), + 'description' => _x( 'Display your website navigation.', 'Block pattern category', 'gutenberg' ), ) ); From ff17d55b5e5b8c9950dc384cb29b4da053b3ed00 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 11:49:09 +0100 Subject: [PATCH 05/12] linting --- lib/load.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/load.php b/lib/load.php index bc8ba5e2c5e590..5ed2a09a1c1357 100644 --- a/lib/load.php +++ b/lib/load.php @@ -164,8 +164,8 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php'; require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php'; require __DIR__ . '/class-wp-duotone-gutenberg.php'; - require __DIR__ . '/blocks.php'; - require __DIR__ . '/block-editor-settings.php'; +require __DIR__ . '/blocks.php'; +require __DIR__ . '/block-editor-settings.php'; require __DIR__ . '/client-assets.php'; require __DIR__ . '/mathml-kses.php'; require __DIR__ . '/demo.php'; From 740a828b2b814fa037c4522e1626520dc263aa62 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 17:02:10 +0100 Subject: [PATCH 06/12] aligned nav close button to the right --- lib/block-patterns.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/block-patterns.php b/lib/block-patterns.php index b12ca92362aa0c..dfd0477a7613a5 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -27,10 +27,12 @@ function gutenberg_register_core_block_patterns() { array( 'title' => __( 'Navigation Overlay', 'gutenberg' ), 'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ), - 'content' => ' -
+ 'content' => ' +
+
- +
+
', From e8bbf94401b574552838928111035bfbb5e12c4d Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 18 Dec 2025 10:55:56 +0100 Subject: [PATCH 07/12] moved file to experimental folder --- lib/block-patterns.php | 45 ------------------------------------------ 1 file changed, 45 deletions(-) delete mode 100644 lib/block-patterns.php diff --git a/lib/block-patterns.php b/lib/block-patterns.php deleted file mode 100644 index dfd0477a7613a5..00000000000000 --- a/lib/block-patterns.php +++ /dev/null @@ -1,45 +0,0 @@ - _x( 'Navigation', 'Block pattern category', 'gutenberg' ), - 'description' => _x( 'Display your website navigation.', 'Block pattern category', 'gutenberg' ), - ) - ); - - register_block_pattern( - 'gutenberg/navigation-overlay', - array( - 'title' => __( 'Navigation Overlay', 'gutenberg' ), - 'description' => _x( 'A simple pattern with a navigation block and a navigation overlay close button.', 'Block pattern description', 'gutenberg' ), - 'content' => ' -
-
- -
- - -
-', - 'categories' => array( 'navigation' ), - 'blockTypes' => array( 'core/template-part/overlay' ), - ) - ); -} - -add_action( 'init', 'gutenberg_register_core_block_patterns', 20 ); From a6a286baf3d2fbf16f9db185c6fcde84207caa9a Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 13:47:12 +0100 Subject: [PATCH 08/12] show navigation overlay patterns under design on right sidebar --- packages/block-library/src/template-part/edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 43ab71784b9fcd..2561b304ebb719 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -83,7 +83,7 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { const canReplace = isEntityAvailable && !! blockPatterns.length && - ( area === 'header' || area === 'footer' ); + ( area === 'header' || area === 'footer' || area === 'overlay' ); if ( ! canReplace ) { return null; From 344946697881e8ff1b356f189d5111ede793b912 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 17 Dec 2025 16:03:37 +0100 Subject: [PATCH 09/12] refactor and check for the experiment, fix for replace button too --- .../src/template-part/edit/index.js | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 2561b304ebb719..4da5f9bc1c8428 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -54,10 +54,15 @@ function ReplaceButton( { templatePartId ); const hasReplacements = !! templateParts.length; + const isOverlayExperimentEnabled = + typeof window !== 'undefined' && + window.__experimentalNavigationOverlays === true; + const supportedAreas = [ 'header', 'footer' ]; + if ( isOverlayExperimentEnabled ) { + supportedAreas.push( 'overlay' ); + } const canReplace = - isEntityAvailable && - hasReplacements && - ( area === 'header' || area === 'footer' ); + isEntityAvailable && hasReplacements && supportedAreas.includes( area ); if ( ! canReplace ) { return null; @@ -80,10 +85,17 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { // This hook fetches patterns, so don't run it unconditionally in the main // edit function! const blockPatterns = useAlternativeBlockPatterns( area, clientId ); + const isOverlayExperimentEnabled = + typeof window !== 'undefined' && + window.__experimentalNavigationOverlays === true; + const supportedAreas = [ 'header', 'footer' ]; + if ( isOverlayExperimentEnabled ) { + supportedAreas.push( 'overlay' ); + } const canReplace = isEntityAvailable && !! blockPatterns.length && - ( area === 'header' || area === 'footer' || area === 'overlay' ); + supportedAreas.includes( area ); if ( ! canReplace ) { return null; From d8a46d7b0d575eaf15232aed382b382777c00213 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 18 Dec 2025 10:42:50 +0100 Subject: [PATCH 10/12] create a constant for supported areas --- .../src/template-part/edit/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 4da5f9bc1c8428..2134b1e1aae3fc 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -40,6 +40,8 @@ import { useTemplatePartArea, } from './utils/hooks'; +const SUPPORTED_AREAS = [ 'header', 'footer' ]; + function ReplaceButton( { isEntityAvailable, area, @@ -57,10 +59,9 @@ function ReplaceButton( { const isOverlayExperimentEnabled = typeof window !== 'undefined' && window.__experimentalNavigationOverlays === true; - const supportedAreas = [ 'header', 'footer' ]; - if ( isOverlayExperimentEnabled ) { - supportedAreas.push( 'overlay' ); - } + const supportedAreas = isOverlayExperimentEnabled + ? [ ...SUPPORTED_AREAS, 'overlay' ] + : SUPPORTED_AREAS; const canReplace = isEntityAvailable && hasReplacements && supportedAreas.includes( area ); @@ -88,10 +89,9 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { const isOverlayExperimentEnabled = typeof window !== 'undefined' && window.__experimentalNavigationOverlays === true; - const supportedAreas = [ 'header', 'footer' ]; - if ( isOverlayExperimentEnabled ) { - supportedAreas.push( 'overlay' ); - } + const supportedAreas = isOverlayExperimentEnabled + ? [ ...SUPPORTED_AREAS, 'overlay' ] + : SUPPORTED_AREAS; const canReplace = isEntityAvailable && !! blockPatterns.length && From 1c4c23350856938b7dbd6e3a34fb7db96039c542 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 18 Dec 2025 12:41:50 +0100 Subject: [PATCH 11/12] abstract experiment logic --- .../src/template-part/edit/index.js | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 2134b1e1aae3fc..0db7d8f9b76888 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -42,6 +42,21 @@ import { const SUPPORTED_AREAS = [ 'header', 'footer' ]; +/** + * Returns the list of supported template part areas for pattern replacement. + * Includes 'overlay' only if the navigation overlays experiment is enabled. + * + * @return {string[]} Array of supported area names. + */ +function getSupportedAreas() { + const isOverlayExperimentEnabled = + typeof window !== 'undefined' && + window.__experimentalNavigationOverlays === true; + return isOverlayExperimentEnabled + ? [ ...SUPPORTED_AREAS, 'overlay' ] + : SUPPORTED_AREAS; +} + function ReplaceButton( { isEntityAvailable, area, @@ -56,12 +71,7 @@ function ReplaceButton( { templatePartId ); const hasReplacements = !! templateParts.length; - const isOverlayExperimentEnabled = - typeof window !== 'undefined' && - window.__experimentalNavigationOverlays === true; - const supportedAreas = isOverlayExperimentEnabled - ? [ ...SUPPORTED_AREAS, 'overlay' ] - : SUPPORTED_AREAS; + const supportedAreas = getSupportedAreas(); const canReplace = isEntityAvailable && hasReplacements && supportedAreas.includes( area ); @@ -86,12 +96,7 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { // This hook fetches patterns, so don't run it unconditionally in the main // edit function! const blockPatterns = useAlternativeBlockPatterns( area, clientId ); - const isOverlayExperimentEnabled = - typeof window !== 'undefined' && - window.__experimentalNavigationOverlays === true; - const supportedAreas = isOverlayExperimentEnabled - ? [ ...SUPPORTED_AREAS, 'overlay' ] - : SUPPORTED_AREAS; + const supportedAreas = getSupportedAreas(); const canReplace = isEntityAvailable && !! blockPatterns.length && From 9c4c444bc25de46248ba0e46d102dbf233417135 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 8 Jan 2026 16:11:02 +0100 Subject: [PATCH 12/12] renamed overlay area after rebase --- packages/block-library/src/template-part/edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 0db7d8f9b76888..d6273003ac16a4 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -53,7 +53,7 @@ function getSupportedAreas() { typeof window !== 'undefined' && window.__experimentalNavigationOverlays === true; return isOverlayExperimentEnabled - ? [ ...SUPPORTED_AREAS, 'overlay' ] + ? [ ...SUPPORTED_AREAS, 'navigation-overlay' ] : SUPPORTED_AREAS; }