page-list.php in Gutenberg 23.2.0, at build/scripts/block-library/page-list.php

380 lines 14.3 KB Raw Download Zip

1	<?php
2	/**
3	* Server-side rendering of the `core/pages` block.
4	*
5	* @package WordPress
6	*/
7
8	require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
9
10	/**
11	* Returns the submenu visibility value with backward compatibility
12	* for the deprecated openSubmenusOnClick attribute.
13	*
14	* @since 6.9.0
15	*
16	* @param array $context Block context from parent Navigation block.
17	* @return string The visibility mode: 'hover', 'click', or 'always'.
18	*/
19	function gutenberg_block_core_page_list_get_submenu_visibility( $context ) {
20	$deprecated_open_submenus_on_click = $context['openSubmenusOnClick'] ?? null;
21
22	// For backward compatibility, prioritize the legacy attribute if present. If it has been loaded and saved in the editor, then
23	// the deprecated attribute will be replaced by submenuVisibility.
24	if ( null !== $deprecated_open_submenus_on_click ) {
25	// Convert boolean to string: true -> 'click', false -> 'hover'.
26	return ! empty( $deprecated_open_submenus_on_click ) ? 'click' : 'hover';
27	}
28
29	$submenu_visibility = $context['submenuVisibility'] ?? null;
30
31	// Use submenuVisibility for migrated/new blocks.
32	return $submenu_visibility ?? 'hover';
33	}
34
35	/**
36	* Build an array with CSS classes and inline styles defining the colors
37	* which will be applied to the pages markup in the front-end when it is a descendant of navigation.
38	*
39	* @since 5.8.0
40	*
41	* @param array $attributes Block attributes.
42	* @param array $context Navigation block context.
43	* @return array Colors CSS classes and inline styles.
44	*/
45	function gutenberg_block_core_page_list_build_css_colors( $attributes, $context ) {
46	$colors = array(
47	'css_classes' => array(),
48	'inline_styles' => '',
49	'overlay_css_classes' => array(),
50	'overlay_inline_styles' => '',
51	);
52
53	// Text color.
54	$has_named_text_color = array_key_exists( 'textColor', $context );
55	$has_picked_text_color = array_key_exists( 'customTextColor', $context );
56	$has_custom_text_color = isset( $context['style']['color']['text'] );
57
58	// If has text color.
59	if ( $has_custom_text_color \|\| $has_picked_text_color \|\| $has_named_text_color ) {
60	// Add has-text-color class.
61	$colors['css_classes'][] = 'has-text-color';
62	}
63
64	if ( $has_named_text_color ) {
65	// Add the color class.
66	$colors['css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['textColor'] ) );
67	} elseif ( $has_picked_text_color ) {
68	$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
69	} elseif ( $has_custom_text_color ) {
70	// Add the custom color inline style.
71	$colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
72	}
73
74	// Background color.
75	$has_named_background_color = array_key_exists( 'backgroundColor', $context );
76	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $context );
77	$has_custom_background_color = isset( $context['style']['color']['background'] );
78
79	// If has background color.
80	if ( $has_custom_background_color \|\| $has_picked_background_color \|\| $has_named_background_color ) {
81	// Add has-background class.
82	$colors['css_classes'][] = 'has-background';
83	}
84
85	if ( $has_named_background_color ) {
86	// Add the background-color class.
87	$colors['css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['backgroundColor'] ) );
88	} elseif ( $has_picked_background_color ) {
89	$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
90	} elseif ( $has_custom_background_color ) {
91	// Add the custom background-color inline style.
92	$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
93	}
94
95	// Overlay text color.
96	$has_named_overlay_text_color = array_key_exists( 'overlayTextColor', $context );
97	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context );
98
99	// If it has a text color.
100	if ( $has_named_overlay_text_color \|\| $has_picked_overlay_text_color ) {
101	$colors['overlay_css_classes'][] = 'has-text-color';
102	}
103
104	// Give overlay colors priority, fall back to Navigation block colors, then global styles.
105	if ( $has_named_overlay_text_color ) {
106	$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['overlayTextColor'] ) );
107	} elseif ( $has_picked_overlay_text_color ) {
108	$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
109	}
110
111	// Overlay background colors.
112	$has_named_overlay_background_color = array_key_exists( 'overlayBackgroundColor', $context );
113	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context );
114
115	// If has background color.
116	if ( $has_named_overlay_background_color \|\| $has_picked_overlay_background_color ) {
117	$colors['overlay_css_classes'][] = 'has-background';
118	}
119
120	if ( $has_named_overlay_background_color ) {
121	$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['overlayBackgroundColor'] ) );
122	} elseif ( $has_picked_overlay_background_color ) {
123	$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
124	}
125
126	return $colors;
127	}
128	/**
129	* Outputs Page list markup from an array of pages with nested children.
130	*
131	* @since 5.8.0
132	*
133	* @param string $submenu_visibility The submenu visibility mode: 'hover', 'click', or 'always'.
134	* @param boolean $show_submenu_icons Whether to show submenu indicator icons.
135	* @param boolean $is_navigation_child If block is a child of Navigation block.
136	* @param array $nested_pages The array of nested pages.
137	* @param boolean $is_nested Whether the submenu is nested or not.
138	* @param array $active_page_ancestor_ids An array of ancestor ids for active page.
139	* @param array $colors Color information for overlay styles.
140	* @param integer $depth The nesting depth.
141	*
142	* @return string List markup.
143	*/
144	function gutenberg_block_core_page_list_render_nested_page_list( $submenu_visibility, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
145	if ( empty( $nested_pages ) ) {
146	return;
147	}
148	$front_page_id = (int) get_option( 'page_on_front' );
149	$markup = '';
150
151	// Compute visibility mode flags once
152	$open_on_click = 'click' === $submenu_visibility;
153	$open_on_hover = 'hover' === $submenu_visibility;
154	$open_always = 'always' === $submenu_visibility;
155
156	foreach ( (array) $nested_pages as $page ) {
157	$css_class = $page['is_active'] ? ' current-menu-item' : '';
158	$aria_current = $page['is_active'] ? ' aria-current="page"' : '';
159	$style_attribute = '';
160
161	$css_class .= in_array( $page['page_id'], $active_page_ancestor_ids, true ) ? ' current-menu-ancestor' : '';
162	if ( isset( $page['children'] ) ) {
163	$css_class .= ' has-child';
164	}
165
166	if ( $is_navigation_child ) {
167	$css_class .= ' wp-block-navigation-item';
168
169	// Class assignment logic matches JS editor rendering in page-list-item/edit.js
170	// Note: elseif ensures open-on-hover-click is mutually exclusive with open-on-click
171	if ( $open_on_click ) {
172	$css_class .= ' open-on-click';
173	} elseif ( $open_on_hover && $show_submenu_icons ) {
174	$css_class .= ' open-on-hover-click';
175	} elseif ( $open_always ) {
176	$css_class .= ' open-always';
177	}
178	}
179
180	$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
181
182	// If this is the first level of submenus, include the overlay colors.
183	if ( ( ( 0 < $depth && ! $is_nested ) \|\| $is_nested ) && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
184	$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
185	if ( '' !== $colors['overlay_inline_styles'] ) {
186	$style_attribute = sprintf( ' style="%s"', esc_attr( $colors['overlay_inline_styles'] ) );
187	}
188	}
189
190	if ( (int) $page['page_id'] === $front_page_id ) {
191	$css_class .= ' menu-item-home';
192	}
193
194	$title = $page['title'] ? $page['title'] : __( '(no title)' );
195
196	$aria_label = sprintf(
197	/* translators: Accessibility text. %s: Parent page title. */
198	__( '%s submenu' ),
199	wp_strip_all_tags( $title )
200	);
201
202	$markup .= '<li class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
203
204	if ( isset( $page['children'] ) && $is_navigation_child && $open_on_click ) {
205	$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses_post( $title ) .
206	'</button><span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
207	} else {
208	$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses_post( $title ) . '</a>';
209	}
210
211	if ( isset( $page['children'] ) ) {
212	if ( $is_navigation_child && $show_submenu_icons && ! $open_on_click ) {
213	$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
214	$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
215	$markup .= '</button>';
216	}
217	$markup .= '<ul class="wp-block-navigation__submenu-container">';
218	$markup .= gutenberg_block_core_page_list_render_nested_page_list( $submenu_visibility, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 );
219	$markup .= '</ul>';
220	}
221	$markup .= '</li>';
222	}
223	return $markup;
224	}
225
226	/**
227	* Outputs nested array of pages
228	*
229	* @since 5.8.0
230	*
231	* @param array $current_level The level being iterated through.
232	* @param array $children The children grouped by parent post ID.
233	*
234	* @return array The nested array of pages.
235	*/
236	function gutenberg_block_core_page_list_nest_pages( $current_level, $children ) {
237	if ( empty( $current_level ) ) {
238	return;
239	}
240	foreach ( (array) $current_level as $key => $current ) {
241	if ( isset( $children[ $key ] ) ) {
242	$current_level[ $key ]['children'] = gutenberg_block_core_page_list_nest_pages( $children[ $key ], $children );
243	}
244	}
245	return $current_level;
246	}
247
248	/**
249	* Renders the `core/page-list` block on server.
250	*
251	* @since 5.8.0
252	*
253	* @param array $attributes The block attributes.
254	* @param string $content The saved content.
255	* @param WP_Block $block The parsed block.
256	*
257	* @return string Returns the page list markup.
258	*/
259	function gutenberg_render_block_core_page_list( $attributes, $content, $block ) {
260	static $block_id = 0;
261	++$block_id;
262
263	$parent_page_id = $attributes['parentPageID'];
264	$is_nested = $attributes['isNested'];
265
266	$all_pages = get_pages(
267	array(
268	'sort_column' => 'menu_order,post_title',
269	'order' => 'asc',
270	)
271	);
272
273	// If there are no pages, there is nothing to show.
274	if ( empty( $all_pages ) ) {
275	return;
276	}
277
278	$top_level_pages = array();
279
280	$pages_with_children = array();
281
282	$active_page_ancestor_ids = array();
283
284	foreach ( (array) $all_pages as $page ) {
285	$is_active = ! empty( $page->ID ) && ( get_queried_object_id() === $page->ID );
286
287	if ( $is_active ) {
288	$active_page_ancestor_ids = get_post_ancestors( $page->ID );
289	}
290
291	if ( $page->post_parent ) {
292	$pages_with_children[ $page->post_parent ][ $page->ID ] = array(
293	'page_id' => $page->ID,
294	'title' => $page->post_title,
295	'link' => get_permalink( $page ),
296	'is_active' => $is_active,
297	);
298	} else {
299	$top_level_pages[ $page->ID ] = array(
300	'page_id' => $page->ID,
301	'title' => $page->post_title,
302	'link' => get_permalink( $page ),
303	'is_active' => $is_active,
304	);
305
306	}
307	}
308
309	$colors = gutenberg_block_core_page_list_build_css_colors( $attributes, $block->context );
310	// The build system prefixes this function with "gutenberg_" to avoid
311	// collisions with the core version. Until this function is backported to
312	// core, we need to guard its use and only call the prefixed name in
313	// the plugin.
314	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
315	$font_sizes = gutenberg_block_core_shared_navigation_build_css_font_sizes( $block->context );
316	} else {
317	$font_sizes = block_core_shared_navigation_build_css_font_sizes( $block->context );
318	}
319	$classes = array_merge(
320	$colors['css_classes'],
321	$font_sizes['css_classes']
322	);
323
324	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
325	$css_classes = trim( implode( ' ', $classes ) );
326
327	$nested_pages = gutenberg_block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
328
329	if ( 0 !== $parent_page_id ) {
330	// If the parent page has no child pages, there is nothing to show.
331	if ( ! array_key_exists( $parent_page_id, $pages_with_children ) ) {
332	return;
333	}
334
335	$nested_pages = gutenberg_block_core_page_list_nest_pages(
336	$pages_with_children[ $parent_page_id ],
337	$pages_with_children
338	);
339	}
340
341	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
342
343	// Get submenu visibility with backward compatibility for openSubmenusOnClick.
344	$submenu_visibility = $is_navigation_child ? gutenberg_block_core_page_list_get_submenu_visibility( $block->context ) : 'hover';
345
346	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
347
348	$wrapper_markup = $is_nested ? '%2$s' : '<ul %1$s>%2$s</ul>';
349
350	$items_markup = gutenberg_block_core_page_list_render_nested_page_list( $submenu_visibility, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids, $colors );
351
352	$wrapper_attributes = get_block_wrapper_attributes(
353	array(
354	'class' => $css_classes,
355	'style' => $style_attribute,
356	)
357	);
358
359	return sprintf(
360	$wrapper_markup,
361	$wrapper_attributes,
362	$items_markup
363	);
364	}
365
366	/**
367	* Registers the `core/pages` block on server.
368	*
369	* @since 5.8.0
370	*/
371	function gutenberg_register_block_core_page_list() {
372	register_block_type_from_metadata(
373	__DIR__ . '/page-list',
374	array(
375	'render_callback' => 'gutenberg_render_block_core_page_list',
376	)
377	);
378	}
379	add_action( 'init', 'gutenberg_register_block_core_page_list', 20 );
380