WP_Navigation_Block_Renderer::get_responsive_container_markup │ private static │ WP 6.5.0
Get the responsive container markup
Метод класса: WP_Navigation_Block_Renderer{}
Хуков нет.
Возвращает
Строку. Returns the container markup.
Использование
$result = WP_Navigation_Block_Renderer::get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html );
- $attributes(массив) (обязательный)
- The block attributes.
- $inner_blocks(WP_Block_List) (обязательный)
- The list of inner blocks.
- $inner_blocks_html(строка) (обязательный)
- The markup for the inner blocks.
Список изменений
| С версии 6.5.0 | Введена. |
Код WP_Navigation_Block_Renderer::get_responsive_container_markup() WP Navigation Block Renderer::get responsive container markup WP 7.0
private static function get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html ) {
$is_interactive = static::is_interactive( $attributes, $inner_blocks );
$colors = block_core_navigation_build_css_colors( $attributes );
$modal_unique_id = wp_unique_id( 'modal-' );
$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
// Set-up variables for custom overlays.
$has_custom_overlay = false;
$close_button_markup = '';
$has_custom_overlay_close_block = false;
$overlay_blocks_html = '';
$custom_overlay_markup = '';
// Check if an overlay template part is selected and render it.
// This needs to happen before building classes so we know if overlay blocks actually exist.
if ( ! empty( $attributes['overlay'] ) ) {
// Get blocks from the overlay template part.
$overlay_blocks = static::get_overlay_blocks_from_template_part( $attributes['overlay'], $attributes );
// Render template part blocks directly without navigation container wrapper.
$overlay_blocks_html = static::get_template_part_blocks_html( $overlay_blocks );
// Check if overlay contains a navigation-overlay-close block (detect in rendered HTML so it works with patterns).
$has_custom_overlay_close_block = block_core_navigation_overlay_html_has_close_block( $overlay_blocks_html );
// Add Interactivity API directives to the overlay close block if present.
if ( $has_custom_overlay_close_block && $is_interactive ) {
$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
$overlay_blocks_html = block_core_navigation_add_directives_to_overlay_close( $tags );
}
// Images in the overlay are hidden until the menu is opened. Pre-set
// fetchpriority="low" so that when wp_filter_content_tags() processes the
// parent template part, it sees the attribute already present and calls
// wp_get_loading_optimization_attributes() with fetchpriority="low", which both prevents
// fetchpriority="high" from being added and stops the LCP counter from being incremented.
$overlay_blocks_html = block_core_navigation_set_overlay_image_fetch_priority( $overlay_blocks_html );
}
$has_custom_overlay = ! empty( $overlay_blocks_html );
$responsive_container_classes = static::get_responsive_container_classes( $is_hidden_by_default, $has_custom_overlay, $colors );
$open_button_classes = array(
'wp-block-navigation__responsive-container-open',
$is_hidden_by_default ? 'always-shown' : '',
);
$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7.5h16v1.5H4z"></path><path d="M4 15h16v1.5H4z"></path></svg>';
if ( isset( $attributes['icon'] ) ) {
if ( 'menu' === $attributes['icon'] ) {
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5z"></path><path d="M5 12.8h14v-1.5H5v1.5z"></path><path d="M5 19h14v-1.5H5V19z"></path></svg>';
}
}
$toggle_button_content = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
$toggle_close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>';
$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
$toggle_aria_label_open = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
$toggle_aria_label_close = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
// Add Interactivity API directives to the markup if needed.
$open_button_directives = '';
$responsive_container_directives = '';
$responsive_dialog_directives = '';
$close_button_directives = '';
if ( $is_interactive ) {
$open_button_directives = '
data-wp-on--click="actions.openMenuOnClick"
data-wp-on--keydown="actions.handleMenuKeydown"
';
$responsive_container_directives = '
data-wp-class--has-modal-open="state.isMenuOpen"
data-wp-class--is-menu-open="state.isMenuOpen"
data-wp-watch="callbacks.initMenu"
data-wp-on--keydown="actions.handleMenuKeydown"
data-wp-on--focusout="actions.handleMenuFocusout"
tabindex="-1"
';
$responsive_dialog_directives = '
data-wp-bind--aria-modal="state.ariaModal"
data-wp-bind--aria-label="state.ariaLabel"
data-wp-bind--role="state.roleAttribute"
';
$close_button_directives = '
data-wp-on--click="actions.closeMenuOnClick"
';
$responsive_container_content_directives = '
data-wp-watch="callbacks.focusFirstElement"
';
}
// Don't apply overlay inline styles if using a custom overlay template part.
// The custom overlay is responsible for its own styling.
$overlay_inline_styles = static::get_overlay_inline_styles( $has_custom_overlay, $colors );
if ( $has_custom_overlay ) {
$custom_overlay_markup = sprintf(
'<div class="wp-block-navigation__overlay-container">%s</div>',
$overlay_blocks_html
);
}
// Show default close button for all responsive navigation,
// unless custom overlay has its own close block.
if ( ! $has_custom_overlay_close_block ) {
$close_button_markup = sprintf(
'<button %1$s class="wp-block-navigation__responsive-container-close" %2$s>%3$s</button>',
$toggle_aria_label_close,
$close_button_directives,
$toggle_close_button_content
);
}
return sprintf(
'<button aria-haspopup="dialog" %3$s class="%6$s" %10$s>%8$s</button>
<div class="%5$s" %7$s id="%1$s" %11$s>
<div class="wp-block-navigation__responsive-close" tabindex="-1">
<div class="wp-block-navigation__responsive-dialog" %12$s>
%13$s
<div class="wp-block-navigation__responsive-container-content" %14$s id="%1$s-content">
%2$s
%15$s
</div>
</div>
</div>
</div>',
esc_attr( $modal_unique_id ),
$inner_blocks_html,
$toggle_aria_label_open,
$toggle_aria_label_close,
esc_attr( trim( implode( ' ', $responsive_container_classes ) ) ),
esc_attr( trim( implode( ' ', $open_button_classes ) ) ),
$overlay_inline_styles,
$toggle_button_content,
$toggle_close_button_content,
$open_button_directives,
$responsive_container_directives,
$responsive_dialog_directives,
$close_button_markup,
$responsive_container_content_directives,
$has_custom_overlay ? $custom_overlay_markup : ''
);
}