navigation-submenu.php in Gutenberg 23.2.0, at build/scripts/block-library/navigation-submenu.php

321 lines 11.0 KB Raw Download Zip

1	<?php
2	/**
3	* Server-side rendering of the `core/navigation-submenu` block.
4	*
5	* @package WordPress
6	*/
7
8	require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
9	require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
10	require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
11
12	/**
13	* Returns the submenu visibility value with backward compatibility
14	* for the deprecated openSubmenusOnClick attribute.
15	*
16	* This function centralizes the migration logic from the boolean
17	* openSubmenusOnClick to the new submenuVisibility enum.
18	*
19	* Backward compatibility handling:
20	* - Legacy blocks (saved before migration, never opened in editor):
21	* Have openSubmenusOnClick in database. Parent Navigation block passes it via context.
22	* We prioritize openSubmenusOnClick to preserve the original behavior.
23	*
24	* - Migrated blocks (opened in editor after migration):
25	* JavaScript deprecation removes openSubmenusOnClick and sets submenuVisibility.
26	* We use submenuVisibility since openSubmenusOnClick is null.
27	*
28	* - New blocks (created after migration):
29	* Only have submenuVisibility, openSubmenusOnClick is null.
30	* We use submenuVisibility.
31	*
32	* @since 6.9.0
33	*
34	* @param array $context Block context from parent Navigation block.
35	* @return string The visibility mode: 'hover', 'click', or 'always'.
36	*/
37	function gutenberg_block_core_navigation_submenu_get_submenu_visibility( $context ) {
38	$deprecated_open_submenus_on_click = $context['openSubmenusOnClick'] ?? null;
39
40	// For backward compatibility, prioritize the legacy attribute if present. If it has been loaded and saved in the editor, then
41	// the deprecated attribute will be replaced by submenuVisibility.
42	if ( null !== $deprecated_open_submenus_on_click ) {
43	// Convert boolean to string: true -> 'click', false -> 'hover'.
44	return ! empty( $deprecated_open_submenus_on_click ) ? 'click' : 'hover';
45	}
46
47	$submenu_visibility = $context['submenuVisibility'] ?? null;
48
49	// Use submenuVisibility for migrated/new blocks.
50	return $submenu_visibility ?? 'hover';
51	}
52
53	/**
54	* Renders the `core/navigation-submenu` block.
55	*
56	* @since 5.9.0
57	*
58	* @param array $attributes The block attributes.
59	* @param string $content The saved content.
60	* @param WP_Block $block The parsed block.
61	*
62	* @return string Returns the post content with the legacy widget added.
63	*/
64	function gutenberg_render_block_core_navigation_submenu( $attributes, $content, $block ) {
65	// Check if this navigation item should render based on post status.
66	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
67	if ( ! gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block ) ) {
68	return '';
69	}
70	}
71
72	// Don't render the block's subtree if it has no label.
73	if ( empty( $attributes['label'] ) ) {
74	return '';
75	}
76
77	// The build system prefixes this function with "gutenberg_" to avoid
78	// collisions with the core version. Until this function is backported to
79	// core, we need to guard its use and only call the prefixed name in
80	// the plugin.
81	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
82	$font_sizes = gutenberg_block_core_shared_navigation_build_css_font_sizes( $block->context );
83	} else {
84	$font_sizes = block_core_shared_navigation_build_css_font_sizes( $block->context );
85	}
86	$style_attribute = $font_sizes['inline_styles'];
87
88	// Render inner blocks first to check if any menu items will actually display.
89	$inner_blocks_html = '';
90	foreach ( $block->inner_blocks as $inner_block ) {
91	$inner_blocks_html .= $inner_block->render();
92	}
93	$has_submenu = ! empty( trim( $inner_blocks_html ) );
94
95	$kind = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
96	$is_active = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
97
98	if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
99	$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
100	if ( $attributes['url'] === $queried_archive_link ) {
101	$is_active = true;
102	}
103	}
104
105	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
106	$computed_visibility = gutenberg_block_core_navigation_submenu_get_submenu_visibility( $block->context );
107	$open_on_click = 'click' === $computed_visibility;
108	$open_on_hover = 'hover' === $computed_visibility;
109	$open_on_hover_and_click = $open_on_hover && $show_submenu_indicators;
110
111	$classes = array(
112	'wp-block-navigation-item',
113	);
114	$classes = array_merge(
115	$classes,
116	$font_sizes['css_classes']
117	);
118	if ( $has_submenu ) {
119	$classes[] = 'has-child';
120	}
121	if ( $open_on_click ) {
122	$classes[] = 'open-on-click';
123	}
124	if ( $open_on_hover_and_click ) {
125	$classes[] = 'open-on-hover-click';
126	}
127	if ( 'always' === $computed_visibility ) {
128	$classes[] = 'open-always';
129	}
130	if ( $is_active ) {
131	$classes[] = 'current-menu-item';
132	}
133
134	$wrapper_attributes = get_block_wrapper_attributes(
135	array(
136	'class' => implode( ' ', $classes ),
137	'style' => $style_attribute,
138	)
139	);
140
141	$label = '';
142
143	if ( isset( $attributes['label'] ) ) {
144	$label .= wp_kses_post( $attributes['label'] );
145	}
146
147	$aria_label = sprintf(
148	/* translators: Accessibility text. %s: Parent page title. */
149	__( '%s submenu' ),
150	wp_strip_all_tags( $label )
151	);
152
153	$html = '<li ' . $wrapper_attributes . '>';
154
155	// If Submenus open on hover or are always open, we render an anchor tag with attributes.
156	// If submenu icons are set to show, we also render a submenu button, so the submenu can be opened on click.
157	if ( ! $open_on_click ) {
158	$item_url = $attributes['url'] ?? '';
159	// Start appending HTML attributes to anchor tag.
160	$html .= '<a class="wp-block-navigation-item__content"';
161
162	// The href attribute on a and area elements is not required;
163	// when those elements do not have href attributes they do not create hyperlinks.
164	// But also The href attribute must have a value that is a valid URL potentially
165	// surrounded by spaces.
166	// see: https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements.
167	if ( ! empty( $item_url ) ) {
168	$html .= ' href="' . esc_url( $item_url ) . '"';
169	}
170
171	if ( $is_active ) {
172	$html .= ' aria-current="page"';
173	}
174
175	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
176	$html .= ' target="_blank" ';
177	}
178
179	if ( isset( $attributes['rel'] ) ) {
180	$html .= ' rel="' . esc_attr( $attributes['rel'] ) . '"';
181	} elseif ( isset( $attributes['nofollow'] ) && $attributes['nofollow'] ) {
182	$html .= ' rel="nofollow"';
183	}
184
185	if ( isset( $attributes['title'] ) ) {
186	$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
187	}
188
189	$html .= '>';
190	// End appending HTML attributes to anchor tag.
191
192	$html .= '<span class="wp-block-navigation-item__label">';
193	$html .= $label;
194	$html .= '</span>';
195
196	// Add description if available.
197	if ( ! empty( $attributes['description'] ) ) {
198	$html .= '<span class="wp-block-navigation-item__description">';
199	$html .= wp_kses_post( $attributes['description'] );
200	$html .= '</span>';
201	}
202
203	$html .= '</a>';
204	// End anchor tag content.
205
206	if ( $show_submenu_indicators && $has_submenu ) {
207	// The submenu icon is rendered in a button here
208	// so that there's a clickable element to open the submenu.
209	$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
210	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
211	$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
212	} else {
213	$html .= block_core_shared_navigation_render_submenu_icon();
214	}
215	$html .= '</button>';
216	}
217	} else {
218	$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
219
220	// Wrap title with span to isolate it from submenu icon.
221	$html .= '<span class="wp-block-navigation-item__label">';
222
223	$html .= $label;
224
225	$html .= '</span>';
226
227	// Add description if available.
228	if ( ! empty( $attributes['description'] ) ) {
229	$html .= '<span class="wp-block-navigation-item__description">';
230	$html .= wp_kses_post( $attributes['description'] );
231	$html .= '</span>';
232	}
233
234	$html .= '</button>';
235
236	if ( $has_submenu ) {
237	$html .= '<span class="wp-block-navigation__submenu-icon">';
238	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
239	$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
240	} else {
241	$html .= block_core_shared_navigation_render_submenu_icon();
242	}
243	$html .= '</span>';
244	}
245	}
246
247	if ( $has_submenu ) {
248	// Copy some attributes from the parent block to this one.
249	// Ideally this would happen in the client when the block is created.
250	if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
251	$attributes['textColor'] = $block->context['overlayTextColor'];
252	}
253	if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
254	$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
255	}
256	if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
257	$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
258	}
259	if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
260	$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
261	}
262
263	// This allows us to be able to get a response from gutenberg_apply_colors_support.
264	$block->block_type->supports['color'] = true;
265	$colors_supports = gutenberg_apply_colors_support( $block->block_type, $attributes );
266	$css_classes = 'wp-block-navigation__submenu-container';
267	if ( array_key_exists( 'class', $colors_supports ) ) {
268	$css_classes .= ' ' . $colors_supports['class'];
269	}
270
271	$style_attribute = '';
272	if ( array_key_exists( 'style', $colors_supports ) ) {
273	$style_attribute = $colors_supports['style'];
274	}
275
276	if ( strpos( $inner_blocks_html, 'current-menu-item' ) ) {
277	$tag_processor = new WP_HTML_Tag_Processor( $html );
278	while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item' ) ) ) {
279	$tag_processor->add_class( 'current-menu-ancestor' );
280	}
281	$html = $tag_processor->get_updated_html();
282	}
283
284	$wrapper_attributes = get_block_wrapper_attributes(
285	array(
286	'class' => $css_classes,
287	'style' => $style_attribute,
288	)
289	);
290
291	$html .= sprintf(
292	'<ul %s>%s</ul>',
293	$wrapper_attributes,
294	$inner_blocks_html
295	);
296
297	}
298
299	$html .= '</li>';
300
301	return $html;
302	}
303
304	/**
305	* Register the navigation submenu block.
306	*
307	* @since 5.9.0
308	*
309	* @uses gutenberg_render_block_core_navigation_submenu()
310	* @throws WP_Error An WP_Error exception parsing the block definition.
311	*/
312	function gutenberg_register_block_core_navigation_submenu() {
313	register_block_type_from_metadata(
314	__DIR__ . '/navigation-submenu',
315	array(
316	'render_callback' => 'gutenberg_render_block_core_navigation_submenu',
317	)
318	);
319	}
320	add_action( 'init', 'gutenberg_register_block_core_navigation_submenu', 20 );
321