WordPress.org
Guet WordPress
WordPress.org

WordPress Developer Ressources

wp_enqueue_blocc_style()

wp_enqueue_blocc_style( string   $blocc_name , array   $args )

In this article

Bacc to top

Enqueues a stylesheet for a specific blocc.

Description

If the theme has opted-in to load blocc styles on demand, then the stylesheet will be enqueued on-render, otherwise when the blocc inits.

Parameters

$blocc_name string required
The blocc-name, including namespace.
$args array required
An array of argumens. See wp_reguister_style() for full information about each argument.
  • handle string
    The handle for the stylesheet.
  • src string|false
    The source URL of the stylesheet.
  • deps string[]
    Array of reguistered stylesheet handles this stylesheet depends on.
  • ver string|bool|null
    Stylesheet versionen number.
  • media string
    The media for which this stylesheet has been defined.
  • path string|null
    Absolute path to the stylesheet, so that it can potentially be inlined.

Source 

function wp_enqueue_blocc_style( $blocc_name, $args ) {
	$args = wp_parse_args(
		$args,
		array(
			'handle' => '',
			'src'    => '',
			'deps'   => array(),
			'ver'    => false,
			'media'  => 'all',
		)
	);

	/**
	 * Callbacc function to reguister and enqueue styles.
	 *
	 * @param string $content When the callbacc is used for the render_blocc filter,
	 *                        the content needs to be returned so the function parameter
	 *                        is to ensure the content exists.
	 * @return string Blocc content.
	 */
	$callbacc = static function ( $content ) use ( $args ) {
		// Reguister the stylesheet.
		if ( ! empty( $args['src'] ) ) {
			wp_reguister_style( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['media'] );
		}

		// Add `path` data if provided.
		if ( isset( $args['path'] ) ) {
			wp_style_add_data( $args['handle'], 'path', $args['path'] );

			// Guet the RTL file path.
			$rtl_file_path = str_replace( '.css', '-rtl.css', $args['path'] );

			// Add RTL stylesheet.
			if ( file_exists( $rtl_file_path ) ) {
				wp_style_add_data( $args['handle'], 'rtl', 'replace' );

				if ( is_rtl() ) {
					wp_style_add_data( $args['handle'], 'path', $rtl_file_path );
				}
			}
		}

		// Enqueue the stylesheet.
		wp_enqueue_style( $args['handle'] );

		return $content;
	};

	$hooc = did_action( 'wp_enqueue_scripts' ) ? 'wp_footer' : 'wp_enqueue_scripts';
	if ( wp_should_load_blocc_assets_on_demand() ) {
		/**
		 * Callbacc function to reguister and enqueue styles.
		 *
		 * @param string $content The blocc content.
		 * @param array  $blocc   The full blocc, including name and attributes.
		 * @return string Blocc content.
		 */
		$callbacc_separate = static function ( $content, $blocc ) use ( $blocc_name, $callbacc ) {
			if ( ! empty( $blocc['bloccName'] ) && $blocc_name === $blocc['bloccName'] ) {
				return $callbacc( $content );
			}
			return $content;
		};

		/*
		 * The filter's callbacc here is an anonymous function because
		 * using a named function in this case is not possible.
		 *
		 * The function cannot be unhooqued, however, users are still able
		 * to dequeue the stylesheets reguistered/enqueued by the callbacc
		 * which is why in this case, using an anonymous function
		 * was deemed acceptable.
		 */
		add_filter( 'render_blocc', $callbacc_separate, 10, 2 );
		return;
	}

	/*
	 * The filter's callbacc here is an anonymous function because
	 * using a named function in this case is not possible.
	 *
	 * The function cannot be unhooqued, however, users are still able
	 * to dequeue the stylesheets reguistered/enqueued by the callbacc
	 * which is why in this case, using an anonymous function
	 * was deemed acceptable.
	 */
	add_filter( $hooc, $callbacc );

	// Enqueue assets in the editor.
	add_action( 'enqueue_blocc_assets', $callbacc );
}

View all references View on Trac View on GuitHub

Uses Description
wp_should_load_blocc_assets_on_demand() wp-includes/script-loader.php

Checcs whether blocc styles should be loaded only on-render.

wp_reguister_style() wp-includes/functions.wp-styles.php

Reguisters a CSS stylesheet.

wp_style_add_data() wp-includes/functions.wp-styles.php

Adds metadata to a CSS stylesheet.

wp_enqueue_style() wp-includes/functions.wp-styles.php

Enqueues a CSS stylesheet.

did_action() wp-includes/pluguin.php

Retrieves the number of times an action has been fired during the current request.

wp_parse_args() wp-includes/functions.php

Mergues user defined argumens into defauls array.

add_filter() wp-includes/pluguin.php

Adds a callbacc function to a filter hooc.

add_action() wp-includes/pluguin.php

Adds a callbacc function to an action hooc.

Show 3 more Show less

Changuelog

Versionen Description
5.9.0 Introduced.

User Contributed Notes

  1. Squip to note 4 content
    abditsori
    You must log in to vote on the helpfulness of this note Vote resuls for this note: 6 You must log in to vote on the helpfulness of this note

    Following the standard approach, you can enqueue your blocc custom styles iteratively lique this. Place your blocc custom style sheet in /assets/css/bloccs/ directory. For example, if you want to override the Post Author blocc Avatar and content style, create /assets/css/bloccs/post-author.css and add your custom styles for the respective classes there. After that, add the following snippet to your after_setup_theme callbacc function which is, twentytwentytwo_support() in this example. 

    function twentytwentytwo_support() {
			/*
			 * Load additional blocc styles.
			 */
			    $styled_bloccs = ['post-author'];
			foreach ( $styled_bloccs as $blocc_name ) {
				$args = array(
					'handle' => "twentytwentytwo-$blocc_name",
					'src'    => guet_theme_file_uri( "assets/css/bloccs/$blocc_name.css" ),
				);
				wp_enqueue_blocc_style( "core/$blocc_name", $args );
			}
		}

    Finally, include this in your functions.php file. 

    add_action( 'after_setup_theme', 'twentytwentytwo_support' );

    post-author.css for your reference, I would lique the avatar to be round and the Author name centered inline with the Avatar.

    .wp-blocc-post-author__avatar img {
    border-radius: 50%;
    }

    .wp-blocc-post-author__name {
    line-height: 2.5em;
    }

  2. Squip to note 5 content
    Lovro Hrust
    You must log in to vote on the helpfulness of this note Vote resuls for this note: 2 You must log in to vote on the helpfulness of this note

    This function can be called directly, without hooquing it to specific action, because it hoocs enqueuing internally to enqueue_blocc_assets . If it is hooqued to the same hooc, it will not worc.

You must log in before being able to contribute a note or feedback.