PluginProbe
Gutenberg / 22.3.0
Gutenberg v22.3.0
23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 7.4.0 All 402 releases
gutenberg / build / scripts / block-library / navigation-link.php

navigation-link.php in Gutenberg 22.3.0, at build/scripts/block-library/navigation-link.php

510 lines 16.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Server-side registering and rendering of the `core/navigation-link` block.
4 *
5 * @package WordPress
6 */
7
8 /**
9 * Build an array with CSS classes and inline styles defining the colors
10 * which will be applied to the navigation markup in the front-end.
11 *
12 * @since 5.9.0
13 *
14 * @param array $context Navigation block context.
15 * @param array $attributes Block attributes.
16 * @param bool $is_sub_menu Whether the link is part of a sub-menu. Default false.
17 * @return array Colors CSS classes and inline styles.
18 */
19 function gutenberg_block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
20 $colors = array(
21 'css_classes' => array(),
22 'inline_styles' => '',
23 );
24
25 // Text color.
26 $named_text_color = null;
27 $custom_text_color = null;
28
29 if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
30 $custom_text_color = $context['customOverlayTextColor'];
31 } elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
32 $named_text_color = $context['overlayTextColor'];
33 } elseif ( array_key_exists( 'customTextColor', $context ) ) {
34 $custom_text_color = $context['customTextColor'];
35 } elseif ( array_key_exists( 'textColor', $context ) ) {
36 $named_text_color = $context['textColor'];
37 } elseif ( isset( $context['style']['color']['text'] ) ) {
38 $custom_text_color = $context['style']['color']['text'];
39 }
40
41 // If has text color.
42 if ( ! is_null( $named_text_color ) ) {
43 // Add the color class.
44 array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
45 } elseif ( ! is_null( $custom_text_color ) ) {
46 // Add the custom color inline style.
47 $colors['css_classes'][] = 'has-text-color';
48 $colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
49 }
50
51 // Background color.
52 $named_background_color = null;
53 $custom_background_color = null;
54
55 if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
56 $custom_background_color = $context['customOverlayBackgroundColor'];
57 } elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
58 $named_background_color = $context['overlayBackgroundColor'];
59 } elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
60 $custom_background_color = $context['customBackgroundColor'];
61 } elseif ( array_key_exists( 'backgroundColor', $context ) ) {
62 $named_background_color = $context['backgroundColor'];
63 } elseif ( isset( $context['style']['color']['background'] ) ) {
64 $custom_background_color = $context['style']['color']['background'];
65 }
66
67 // If has background color.
68 if ( ! is_null( $named_background_color ) ) {
69 // Add the background-color class.
70 array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
71 } elseif ( ! is_null( $custom_background_color ) ) {
72 // Add the custom background-color inline style.
73 $colors['css_classes'][] = 'has-background';
74 $colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
75 }
76
77 return $colors;
78 }
79
80 /**
81 * Build an array with CSS classes and inline styles defining the font sizes
82 * which will be applied to the navigation markup in the front-end.
83 *
84 * @since 5.9.0
85 *
86 * @param array $context Navigation block context.
87 * @return array Font size CSS classes and inline styles.
88 */
89 function gutenberg_block_core_navigation_link_build_css_font_sizes( $context ) {
90 // CSS classes.
91 $font_sizes = array(
92 'css_classes' => array(),
93 'inline_styles' => '',
94 );
95
96 $has_named_font_size = array_key_exists( 'fontSize', $context );
97 $has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
98
99 if ( $has_named_font_size ) {
100 // Add the font size class.
101 $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
102 } elseif ( $has_custom_font_size ) {
103 // Add the custom font size inline style.
104 $font_sizes['inline_styles'] = sprintf(
105 'font-size: %s;',
106 gutenberg_get_typography_font_size_value(
107 array(
108 'size' => $context['style']['typography']['fontSize'],
109 )
110 )
111 );
112 }
113
114 return $font_sizes;
115 }
116
117 /**
118 * Returns the top-level submenu SVG chevron icon.
119 *
120 * @since 5.9.0
121 *
122 * @return string
123 */
124 function gutenberg_block_core_navigation_link_render_submenu_icon() {
125 return '<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>';
126 }
127
128 /**
129 * Decodes a url if it's encoded, returning the same url if not.
130 *
131 * @since 6.2.0
132 *
133 * @param string $url The url to decode.
134 *
135 * @return string $url Returns the decoded url.
136 */
137 function gutenberg_block_core_navigation_link_maybe_urldecode( $url ) {
138 $is_url_encoded = false;
139 $query = parse_url( $url, PHP_URL_QUERY );
140 $query_params = wp_parse_args( $query );
141
142 foreach ( $query_params as $query_param ) {
143 $can_query_param_be_encoded = is_string( $query_param ) && ! empty( $query_param );
144 if ( ! $can_query_param_be_encoded ) {
145 continue;
146 }
147 if ( rawurldecode( $query_param ) !== $query_param ) {
148 $is_url_encoded = true;
149 break;
150 }
151 }
152
153 if ( $is_url_encoded ) {
154 return rawurldecode( $url );
155 }
156
157 return $url;
158 }
159
160
161 /**
162 * Renders the `core/navigation-link` block.
163 *
164 * @since 5.9.0
165 *
166 * @param array $attributes The block attributes.
167 * @param string $content The saved content.
168 * @param WP_Block $block The parsed block.
169 *
170 * @return string Returns the post content with the legacy widget added.
171 */
172 function gutenberg_render_block_core_navigation_link( $attributes, $content, $block ) {
173 $navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
174 $is_post_type = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
175 $is_post_type = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
176
177 // Don't render the block's subtree if it is a draft or if the ID does not exist.
178 if ( $is_post_type && $navigation_link_has_id ) {
179 $post = get_post( $attributes['id'] );
180 /**
181 * Filter allowed post_status for navigation link block to render.
182 *
183 * @since 6.8.0
184 *
185 * @param array $post_status
186 * @param array $attributes
187 * @param WP_Block $block
188 */
189 $allowed_post_status = (array) apply_filters(
190 'render_block_core_navigation_link_allowed_post_status',
191 array( 'publish' ),
192 $attributes,
193 $block
194 );
195 if ( ! $post || ! in_array( $post->post_status, $allowed_post_status, true ) ) {
196 return '';
197 }
198 }
199
200 // Don't render the block's subtree if it has no label.
201 if ( empty( $attributes['label'] ) ) {
202 return '';
203 }
204
205 $font_sizes = gutenberg_block_core_navigation_link_build_css_font_sizes( $block->context );
206 $classes = array_merge(
207 $font_sizes['css_classes']
208 );
209 $style_attribute = $font_sizes['inline_styles'];
210
211 $css_classes = trim( implode( ' ', $classes ) );
212 $has_submenu = count( $block->inner_blocks ) > 0;
213 $kind = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
214 $is_active = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
215
216 if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
217 $queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
218 if ( $attributes['url'] === $queried_archive_link ) {
219 $is_active = true;
220 }
221 }
222
223 $wrapper_attributes = get_block_wrapper_attributes(
224 array(
225 'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
226 ( $is_active ? ' current-menu-item' : '' ),
227 'style' => $style_attribute,
228 )
229 );
230 $html = '<li ' . $wrapper_attributes . '>' .
231 '<a class="wp-block-navigation-item__content" ';
232
233 // Start appending HTML attributes to anchor tag.
234 if ( isset( $attributes['url'] ) ) {
235 $html .= ' href="' . esc_url( gutenberg_block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
236 }
237
238 if ( $is_active ) {
239 $html .= ' aria-current="page"';
240 }
241
242 if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
243 $html .= ' target="_blank" ';
244 }
245
246 if ( isset( $attributes['rel'] ) ) {
247 $html .= ' rel="' . esc_attr( $attributes['rel'] ) . '"';
248 } elseif ( isset( $attributes['nofollow'] ) && $attributes['nofollow'] ) {
249 $html .= ' rel="nofollow"';
250 }
251
252 if ( isset( $attributes['title'] ) ) {
253 $html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
254 }
255
256 // End appending HTML attributes to anchor tag.
257
258 // Start anchor tag content.
259 $html .= '>' .
260 // Wrap title with span to isolate it from submenu icon.
261 '<span class="wp-block-navigation-item__label">';
262
263 if ( isset( $attributes['label'] ) ) {
264 $html .= wp_kses_post( $attributes['label'] );
265 }
266
267 $html .= '</span>';
268
269 // Add description if available.
270 if ( ! empty( $attributes['description'] ) ) {
271 $html .= '<span class="wp-block-navigation-item__description">';
272 $html .= wp_kses_post( $attributes['description'] );
273 $html .= '</span>';
274 }
275
276 $html .= '</a>';
277 // End anchor tag content.
278
279 if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
280 // The submenu icon can be hidden by a CSS rule on the Navigation Block.
281 $html .= '<span class="wp-block-navigation__submenu-icon">' . gutenberg_block_core_navigation_link_render_submenu_icon() . '</span>';
282 }
283
284 if ( $has_submenu ) {
285 $inner_blocks_html = '';
286 foreach ( $block->inner_blocks as $inner_block ) {
287 $inner_blocks_html .= $inner_block->render();
288 }
289
290 $html .= sprintf(
291 '<ul class="wp-block-navigation__submenu-container">%s</ul>',
292 $inner_blocks_html
293 );
294 }
295
296 $html .= '</li>';
297
298 return $html;
299 }
300
301 /**
302 * Returns a navigation link variation
303 *
304 * @since 5.9.0
305 *
306 * @param WP_Taxonomy|WP_Post_Type $entity post type or taxonomy entity.
307 * @param string $kind string of value 'taxonomy' or 'post-type'.
308 *
309 * @return array
310 */
311 function gutenberg_build_variation_for_navigation_link( $entity, $kind ) {
312 $title = '';
313 $description = '';
314
315 // Get default labels based on entity type
316 $default_labels = null;
317 if ( $entity instanceof WP_Post_Type ) {
318 $default_labels = WP_Post_Type::get_default_labels();
319 } elseif ( $entity instanceof WP_Taxonomy ) {
320 $default_labels = WP_Taxonomy::get_default_labels();
321 }
322
323 // Get title and check if it's default
324 $is_default_title = false;
325 if ( property_exists( $entity->labels, 'item_link' ) ) {
326 $title = $entity->labels->item_link;
327 if ( isset( $default_labels['item_link'] ) ) {
328 $is_default_title = in_array( $title, $default_labels['item_link'], true );
329 }
330 }
331
332 // Get description and check if it's default
333 $is_default_description = false;
334 if ( property_exists( $entity->labels, 'item_link_description' ) ) {
335 $description = $entity->labels->item_link_description;
336 if ( isset( $default_labels['item_link_description'] ) ) {
337 $is_default_description = in_array( $description, $default_labels['item_link_description'], true );
338 }
339 }
340
341 // Calculate singular name once (used for both title and description)
342 $singular = isset( $entity->labels->singular_name ) ? $entity->labels->singular_name : ucfirst( $entity->name );
343
344 // Set default title if needed
345 if ( $is_default_title || '' === $title ) {
346 /* translators: %s: Singular label of the entity. */
347 $title = sprintf( __( '%s link' ), $singular );
348 }
349
350 // Default description if needed.
351 // Use a single space character instead of an empty string to prevent fallback to the
352 // block.json default description ("Add a page, link, or another item to your navigation.").
353 // An empty string would be treated as missing and trigger the fallback, while a single
354 // space appears blank in the UI but prevents the fallback behavior.
355 // We avoid generating descriptions like "A link to a %s" to prevent grammatical errors
356 // (e.g., "A link to a event" should be "A link to an event").
357 if ( $is_default_description || '' === $description ) {
358 $description = ' ';
359 }
360
361 $variation = array(
362 'name' => $entity->name,
363 'title' => $title,
364 'description' => $description,
365 'attributes' => array(
366 'type' => $entity->name,
367 'kind' => $kind,
368 ),
369 );
370
371 // Tweak some value for the variations.
372 $variation_overrides = array(
373 'post_tag' => array(
374 'name' => 'tag',
375 'attributes' => array(
376 'type' => 'tag',
377 'kind' => $kind,
378 ),
379 ),
380 'post_format' => array(
381 // The item_link and item_link_description for post formats is the
382 // same as for tags, so need to be overridden.
383 'title' => __( 'Post Format Link' ),
384 'description' => __( 'A link to a post format' ),
385 'attributes' => array(
386 'type' => 'post_format',
387 'kind' => $kind,
388 ),
389 ),
390 );
391
392 if ( array_key_exists( $entity->name, $variation_overrides ) ) {
393 $variation = array_merge(
394 $variation,
395 $variation_overrides[ $entity->name ]
396 );
397 }
398
399 return $variation;
400 }
401
402 /**
403 * Filters the registered variations for a block type.
404 * Returns the dynamically built variations for all post-types and taxonomies.
405 *
406 * @since 6.5.0
407 *
408 * @param array $variations Array of registered variations for a block type.
409 * @param WP_Block_Type $block_type The full block type object.
410 * @return array Numerically indexed array of block variations.
411 */
412 function gutenberg_block_core_navigation_link_filter_variations( $variations, $block_type ) {
413 if ( 'core/navigation-link' !== $block_type->name ) {
414 return $variations;
415 }
416
417 $generated_variations = gutenberg_block_core_navigation_link_build_variations();
418
419 /*
420 * IMPORTANT: Order matters for deduplication.
421 *
422 * The variations returned from this filter are bootstrapped to JavaScript and
423 * processed by the block variations reducer. The reducer uses `getUniqueItemsByName()`
424 * (packages/blocks/src/store/reducer.js:51-57) which keeps the FIRST variation with
425 * a given 'name' and discards later duplicates when processing the array in order.
426 *
427 * By placing generated variations first in `array_merge()`, the improved
428 * labels (e.g., "Product link" instead of generic "Post Link") are processed first
429 * and preserved. The generic incoming variations are then discarded as duplicates.
430 *
431 * Why `array_merge()` instead of manual deduplication?
432 * - Both arrays use numeric indices (0, 1, 2...), so `array_merge()` concatenates
433 * and re-indexes them sequentially, preserving order
434 * - The reducer handles deduplication, so it is not needed here
435 * - This keeps the PHP code simple and relies on the established JavaScript behavior
436 *
437 * See: https://github.com/WordPress/gutenberg/pull/72517
438 */
439 return array_merge( $generated_variations, $variations );
440 }
441
442 /**
443 * Returns an array of variations for the navigation link block.
444 *
445 * @since 6.5.0
446 *
447 * @return array
448 */
449 function gutenberg_block_core_navigation_link_build_variations() {
450 $post_types = get_post_types( array( 'show_in_nav_menus' => true ), 'objects' );
451 $taxonomies = get_taxonomies( array( 'show_in_nav_menus' => true ), 'objects' );
452
453 /*
454 * Use two separate arrays as a way to order the variations in the UI.
455 * Known variations (like Post Link and Page Link) are added to the
456 * `built_ins` array. Variations for custom post types and taxonomies are
457 * added to the `variations` array and will always appear after `built-ins.
458 */
459 $built_ins = array();
460 $variations = array();
461
462 if ( $post_types ) {
463 foreach ( $post_types as $post_type ) {
464 $variation = gutenberg_build_variation_for_navigation_link( $post_type, 'post-type' );
465 if ( $post_type->_builtin ) {
466 $built_ins[] = $variation;
467 } else {
468 $variations[] = $variation;
469 }
470 }
471 }
472 if ( $taxonomies ) {
473 foreach ( $taxonomies as $taxonomy ) {
474 $variation = gutenberg_build_variation_for_navigation_link( $taxonomy, 'taxonomy' );
475 if ( $taxonomy->_builtin ) {
476 $built_ins[] = $variation;
477 } else {
478 $variations[] = $variation;
479 }
480 }
481 }
482
483 $all_variations = array_merge( $built_ins, $variations );
484
485 return $all_variations;
486 }
487
488 /**
489 * Registers the navigation link block.
490 *
491 * @since 5.9.0
492 *
493 * @uses gutenberg_render_block_core_navigation_link()
494 * @throws WP_Error An WP_Error exception parsing the block definition.
495 */
496 function gutenberg_register_block_core_navigation_link() {
497 register_block_type_from_metadata(
498 __DIR__ . '/navigation-link',
499 array(
500 'render_callback' => 'gutenberg_render_block_core_navigation_link',
501 )
502 );
503 }
504 add_action( 'init', 'gutenberg_register_block_core_navigation_link', 20 );
505 /**
506 * Creates all variations for post types / taxonomies dynamically (= each time when variations are requested).
507 * Do not use variation_callback, to also account for unregistering post types/taxonomies later on.
508 */
509 add_action( 'get_block_type_variations', 'gutenberg_block_core_navigation_link_filter_variations', 10, 2 );
510