Implement Page List fallback for Nav block on front end of site when …

…no menu selected (#36724) * Use get_pages as block fallback * Simplify by using page list block * Output special class when rendering the fallback * Remove requirement for parsing the block * Fix linting * Limit max number of pages to 4 via context API * 2nd attempt to fix PHP linting * Revert debugging * Make attribute/context prop "unstable" * More linting
WordPress · Nov 22, 2021 · 7839432 · 7839432
1 parent d3ad805
commit 7839432
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -55,6 +55,9 @@
 		},
 		"customOverlayTextColor": {
 			"type": "string"
+		},
+		"__unstableMaxPages": {
+			"type": "number"
 		}
 	},
 	"usesContext": [ "navigationArea" ],
@@ -72,7 +75,8 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation"
+		"orientation": "orientation",
+		"__unstableMaxPages": "__unstableMaxPages"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -142,6 +142,8 @@ function block_core_navigation_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation( $attributes, $content, $block ) {
+
+	$is_fallback = false;
 	/**
 	 * Deprecated:
 	 * The rgbTextColor and rgbBackgroundColor attributes
@@ -214,8 +216,17 @@ function( $block ) {
 		$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
 	}
 
+	// If there are no inner blocks then fallback to rendering the Page List block.
 	if ( empty( $inner_blocks ) ) {
-		return '';
+		$is_fallback                      = true; // indicate we are rendering the fallback.
+		$attributes['__unstableMaxPages'] = 4; // set value to be passed as context to Page List block.
+
+		$page_list_block = array(
+			'blockName' => 'core/page-list',
+			'attrs'     => array(),
+		);
+
+		$inner_blocks = new WP_Block_List( array( $page_list_block ), $attributes );
 	}
 
 	// Restore legacy classnames for submenu positioning.
@@ -234,7 +245,8 @@ function( $block ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
 		$is_responsive_menu ? array( 'is-responsive' ) : array(),
-		$layout_class ? array( $layout_class ) : array()
+		$layout_class ? array( $layout_class ) : array(),
+		$is_fallback ? array( 'is-fallback' ) : array()
 	);
 
 	$inner_blocks_html = '';

diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
@@ -21,7 +21,8 @@
 		"customFontSize",
 		"showSubmenuIcon",
 		"style",
-		"openSubmenusOnClick"
+		"openSubmenusOnClick",
+		"__unstableMaxPages"
 	],
 	"supports": {
 		"reusable": false,

diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
@@ -293,6 +293,10 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
+	if ( array_key_exists( '__unstableMaxPages', $block->context ) ) {
+		$nested_pages = array_slice( $nested_pages, 0, $block->context['__unstableMaxPages'] );
+	}
+
 	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
 
 	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;