Inherit settings from parent Nav block

packages/block-library/src/editor.scss

@@ -27,6 +27,7 @@
 @import "./navigation/editor.scss";
 @import "./navigation-link/editor.scss";
 @import "./nextpage/editor.scss";
+@import "./pages/editor.scss";
 @import "./paragraph/editor.scss";
 @import "./post-content/editor.scss";
 @import "./post-excerpt/editor.scss";

packages/block-library/src/pages/block.json

@@ -2,17 +2,17 @@
 	"apiVersion": 2,
 	"name": "core/pages",
 	"category": "widgets",
-	"attributes": {
-		"orientation": {
-			"type": "string"
-		},
-		"showSubmenuIcon": {
-			"type": "boolean",
-			"default": true
-		}
-	},
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon"
+	],
 	"supports": {
-		"align": true,
+		"reusable": false,
 		"html": false
 	},
 	"editorStyle": "wp-block-pages-editor",

packages/block-library/src/pages/edit.js

@@ -1,34 +1,43 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+
+import { useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
+import { useSelect } from '@wordpress/data';
+
+export default function PagesEdit( { clientId } ) {
+	const navigationBlockAttributes = useSelect( ( select ) => {
+		const { getBlockAttributes, getBlockParentsByBlockName } = select(
+			'core/block-editor'
+		);
+		const parentBlock = getBlockParentsByBlockName(
+			clientId,
+			'core/navigation'
+		)[ 0 ];
+		return getBlockAttributes( parentBlock );
+	} );
+	const showSubmenuIcon = !! navigationBlockAttributes?.showSubmenuIcon;
+	const { textColor, backgroundColor } = navigationBlockAttributes || {};
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'has-text-color': !! textColor,
+			[ `has-${ textColor }-color` ]: !! textColor,
+			'has-background': !! backgroundColor,
+			[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
+			'show-submenu-icons': showSubmenuIcon,
+		} ),
+	} );
 
-export default function PagesEdit( {
-	attributes,
-	setAttributes,
-	hasSubmenuIndicatorSetting = true,
-} ) {
 	return (
-		<div { ...useBlockProps() }>
-			<InspectorControls>
-				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display settings' ) }>
-						<ToggleControl
-							checked={ attributes.showSubmenuIcon }
-							onChange={ ( value ) => {
-								setAttributes( {
-									showSubmenuIcon: value,
-								} );
-							} }
-							label={ __( 'Show submenu indicator icons' ) }
-						/>
-					</PanelBody>
-				) }
-			</InspectorControls>
-			<ServerSideRender block="core/pages" attributes={ attributes } />
+		<div { ...blockProps }>
+			<ServerSideRender block="core/pages" />
 		</div>
 	);
 }

packages/block-library/src/pages/editor.scss

@@ -0,0 +1,7 @@
+.wp-block-navigation {
+	// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
+	.wp-blokc-pages > div,
+	.wp-block-page-list {
+		background-color: inherit;
+	}
+}

packages/block-library/src/pages/index.php

@@ -5,14 +5,96 @@
  * @package WordPress
  */
 
+/**
+ * Build an array with CSS classes and inline styles defining the colors
+ * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
+ *
+ * @param  array $context Navigation block context.
+ * @return array Colors CSS classes and inline styles.
+ */
+function block_core_pages_build_css_colors( $context ) {
+	$colors = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Text color.
+	$has_named_text_color  = array_key_exists( 'textColor', $context );
+	$has_custom_text_color = array_key_exists( 'customTextColor', $context );
+
+	// If has text color.
+	if ( $has_custom_text_color || $has_named_text_color ) {
+		// Add has-text-color class.
+		$colors['css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_text_color ) {
+		// Add the color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] );
+	} elseif ( $has_custom_text_color ) {
+		// Add the custom color inline style.
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
+	}
+
+	// Background color.
+	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
+	$has_custom_background_color = array_key_exists( 'customBackgroundColor', $context );
+
+	// If has background color.
+	if ( $has_custom_background_color || $has_named_background_color ) {
+		// Add has-background class.
+		$colors['css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_background_color ) {
+		// Add the background-color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] );
+	} elseif ( $has_custom_background_color ) {
+		// Add the custom background-color inline style.
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
+	}
+
+	return $colors;
+}
+
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
+ *
+ * @param  array $context Navigation block context.
+ * @return array Font size CSS classes and inline styles.
+ */
+function block_core_pages_build_css_font_sizes( $context ) {
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'fontSize', $context );
+	$has_custom_font_size = array_key_exists( 'customFontSize', $context );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
+	} elseif ( $has_custom_font_size ) {
+		// Add the custom font size inline style.
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['customFontSize'] );
+	}
+
+	return $font_sizes;
+}
+
 /**
  * Renders the `core/pages` block on server.
  *
  * @param array $attributes The block attributes.
+ * @param array $content The saved content.
+ * @param array $block The parsed block.
  *
  * @return string Returns the pages list/dropdown markup.
  */
-function render_block_core_pages( $attributes ) {
+function render_block_core_pages( $attributes, $content, $block ) {
 	static $block_id = 0;
 	$block_id++;
 
@@ -27,13 +109,27 @@ function render_block_core_pages( $attributes ) {
 	$wrapper_markup = '<ul %1$s>%2$s</ul>';
 	$items_markup   = wp_list_pages( $args );
 
-	$classes = 'wp-block-page-list';
+	$colors          = block_core_pages_build_css_colors( $block->context );
+	$font_sizes      = block_core_pages_build_css_font_sizes( $block->context );
+	$classes         = array_merge(
+		$colors['css_classes'],
+		$font_sizes['css_classes']
+	);
+	$style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] );
+	$css_classes     = trim( implode( ' ', $classes ) );
+
+	$css_classes .= ' wp-block-page-list';
 
-	if ( isset( $attributes['showSubmenuIcon'] ) && $attributes['showSubmenuIcon'] ) {
-		$classes .= ' show-submenu-icons';
+	if ( $block->context && $block->context['showSubmenuIcon'] ) {
+		$css_classes .= ' show-submenu-icons';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => $css_classes,
+			'style' => $style_attribute,
+		)
+	);
 
 	return sprintf(
 		$wrapper_markup,

packages/block-library/src/pages/style.scss

@@ -1,10 +1,11 @@
-.wp-block-navigation-link__submenu-icon {
+.wp-block-pages__submenu-icon {
 	display: none;
 }
 
 .show-submenu-icons {
-	.wp-block-navigation-link__submenu-icon {
+	.wp-block-pages__submenu-icon {
 		display: block;
+		padding: 0.375em 1em 0.375em 0;
 	}
 }
 
@@ -23,6 +24,7 @@
 	.page_item_has_children {
 		display: flex;
 		position: relative;
+		background-color: inherit;
 
 		> a {
 			padding-right: 0.5em;
@@ -84,4 +86,8 @@
 			}
 		}
 	}
+
+	.children {
+		padding: 0;
+	}
 }