wpseek.com
Eine auf WordPress spezialiserte Suchmaschine für Entwickler und Theme-Autoren



block_core_navigation_add_support_classes_to_container › WordPress Function

Seit7.1.0
Veraltetn/v
block_core_navigation_add_support_classes_to_container ( $block_content, $block )
Parameter: (2)
  • (string) $block_content The block content.
    Erforderlich: Ja
  • (array) $block The full block, including name and attributes.
    Erforderlich: Ja
Gibt zurück:
  • (string) The updated block content.
Definiert in:
Codex:

Adds Navigation block support classes to inner list containers.

State block support adds the generated wp-states-* class to the outer block wrapper. The Navigation block renders its menu items inside an inner wp-block-navigation__container list, so the same state class is also needed there for state styles to apply directly to the menu list. Navigation also uses layout classes on its outer wrapper to define custom properties consumed by its inner containers. Viewport layout styles cannot change those classes, so equivalent custom properties and a scoping class are generated for each configured viewport layout. Currently this is required as a workaround because of how difficult it is for nav child blocks to inherit styles through the complex responsive nav block html. The bug in https://github.com/WordPress/gutenberg/issues/62690 also prevents inheritance.


Quellcode

function block_core_navigation_add_support_classes_to_container( $block_content, $block ) {
	if ( 'core/navigation' !== ( $block['blockName'] ?? null ) || empty( $block_content ) ) {
		return $block_content;
	}

	$attributes = is_array( $block['attrs'] ?? null ) ? $block['attrs'] : array();
	$style      = is_array( $attributes['style'] ?? null ) ? $attributes['style'] : array();
	if (
		defined( 'IS_GUTENBERG_PLUGIN' ) &&
		IS_GUTENBERG_PLUGIN &&
		function_exists( 'gutenberg_resolve_style_state_aliases' )
	) {
		$style = gutenberg_resolve_style_state_aliases( $style, 'core/navigation' );
	}

	$global_settings          = wp_get_global_settings();
	$viewport_settings        = $global_settings['viewport'] ?? null;
	$responsive_media_queries = array();
	if ( method_exists( 'WP_Theme_JSON_Gutenberg', 'get_viewport_media_queries' ) ) {
		$responsive_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries( $viewport_settings );
	} elseif ( method_exists( 'WP_Theme_JSON', 'get_viewport_media_queries' ) ) {
		$responsive_media_queries = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings );
	}

	$styles      = array();
	$base_layout = is_array( $attributes['layout'] ?? null ) ? $attributes['layout'] : array();
	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
		$viewport_style  = is_array( $style[ $breakpoint ] ?? null ) ? $style[ $breakpoint ] : array();
		$viewport_layout = is_array( $viewport_style['layout'] ?? null ) ? $viewport_style['layout'] : array();
		if ( empty( $viewport_layout ) ) {
			continue;
		}

		$styles[] = array(
			'declarations' => block_core_navigation_get_layout_custom_property_declarations(
				array_replace( $base_layout, $viewport_layout )
			),
			'rules_group'  => $media_query,
		);
	}

	$processor = new WP_HTML_Tag_Processor( $block_content );
	if ( ! $processor->next_tag() ) {
		return $block_content;
	}

	$class_attribute = $processor->get_attribute( 'class' );
	$state_class     = null;
	if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute, $matches ) ) {
		$state_class = $matches[0];
	}

	$layout_class = null;
	if ( ! empty( $styles ) ) {
		$layout_class = wp_unique_id( 'wp-block-navigation-' );
		// The inner selector includes both Navigation classes so it overrides the
		// default layout custom properties set by `.wp-block-navigation.items-*`.
		$selector = ".wp-block-navigation.{$layout_class},.wp-block-navigation.wp-block-navigation__container.{$layout_class}";
		foreach ( $styles as &$style_rule ) {
			$style_rule['selector'] = $selector;
		}
		unset( $style_rule );

		$processor->add_class( $layout_class );
		wp_style_engine_get_stylesheet_from_css_rules(
			$styles,
			array( 'context' => 'block-supports' )
		);
	}

	if ( null === $state_class && null === $layout_class ) {
		return $block_content;
	}

	while ( $processor->next_tag() ) {
		// Custom overlay content can include nested Navigation blocks.
		// Avoid applying the outer Navigation classes to an inner nav block.
		if ( $processor->has_class( 'wp-block-navigation' ) && ! $processor->has_class( 'wp-block-navigation__container' ) ) {
			break;
		}

		if ( ! $processor->has_class( 'wp-block-navigation__container' ) ) {
			continue;
		}

		if ( null !== $layout_class ) {
			$processor->add_class( $layout_class );
		}

		if ( null === $state_class ) {
			continue;
		}

		$class_attribute = $processor->get_attribute( 'class' );
		if ( is_string( $class_attribute ) && preg_match( '/\bwp-states-[a-f0-9]{8}\b/', $class_attribute ) ) {
			continue;
		}

		$processor->add_class( $state_class );
	}

	return $processor->get_updated_html();
}