From 10e32af94b2cdeb2ccf25addb77e0f3b4f7a4029 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 21 Jan 2021 11:15:09 +1100 Subject: [PATCH] Inherit settings from parent Nav block --- packages/block-library/src/editor.scss | 1 + packages/block-library/src/pages/block.json | 20 ++-- packages/block-library/src/pages/edit.js | 59 ++++++----- packages/block-library/src/pages/editor.scss | 7 ++ packages/block-library/src/pages/index.php | 106 ++++++++++++++++++- packages/block-library/src/pages/style.scss | 10 +- 6 files changed, 161 insertions(+), 42 deletions(-) create mode 100644 packages/block-library/src/pages/editor.scss diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 45449c927bac0..0b9a4def4a4d6 100644 --- a/packages/block-library/src/editor.scss +++ b/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"; diff --git a/packages/block-library/src/pages/block.json b/packages/block-library/src/pages/block.json index 060b3bd7014d4..07557c45c3fb5 100644 --- a/packages/block-library/src/pages/block.json +++ b/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", diff --git a/packages/block-library/src/pages/edit.js b/packages/block-library/src/pages/edit.js index 331b26fba0fd5..49dde6e585b8b 100644 --- a/packages/block-library/src/pages/edit.js +++ b/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 ( -
- - { hasSubmenuIndicatorSetting && ( - - { - setAttributes( { - showSubmenuIcon: value, - } ); - } } - label={ __( 'Show submenu indicator icons' ) } - /> - - ) } - - +
+
); } diff --git a/packages/block-library/src/pages/editor.scss b/packages/block-library/src/pages/editor.scss new file mode 100644 index 0000000000000..28b5277361b51 --- /dev/null +++ b/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; + } +} diff --git a/packages/block-library/src/pages/index.php b/packages/block-library/src/pages/index.php index e6c971896512e..d33079578353a 100644 --- a/packages/block-library/src/pages/index.php +++ b/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 = '
    %2$s
'; $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, diff --git a/packages/block-library/src/pages/style.scss b/packages/block-library/src/pages/style.scss index 91a9a77430104..9edec3c1f9aa1 100644 --- a/packages/block-library/src/pages/style.scss +++ b/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; + } }