Skip to content

Block Style

Loïc Antignac edited this page Aug 15, 2022 · 3 revisions

Once the the plugin is created, the declaration(s) can be added:

<?php
/**
 * Plugin Name:       Example Custom Block Style
 * Author:            My Name
 * Text Domain:       wax-custom-content
 * Domain Path:       /languages
 */
defined( 'ABSPATH' ) || exit;

// If you already have an autoload (for example if you are on Bedrock) you can remove these 3 lines, otherwise leave them.
if ( is_readable( __DIR__ . '/vendor/autoload.php' ) ) {
	require __DIR__ . '/vendor/autoload.php';
}

use Webaxones\Core\Entities\Entities;

Webaxones\Core\Library::init( 'webaxones-content' );

/**
 * Add custom block style: Heading underline
 */
$declarations[] = [
	'entity'   => 'Webaxones\Core\Editor\Styles\BlockStyle',
	'labels'   => [
		'label' => __( 'underline', 'wax-custom-content' ),
	],
	'settings' => [
		'slug'         => 'core/heading',
		'action'       => 'add',
		'name'         => 'underline',
		'label'        => 'label',
		'inline_style' => '.wp-block-heading.is-style-underline { text-decoration: underline wavy red; }',
	],
];

/**
 * OR :
 * Remove custom block style (previously registered with `register_block_style`): Heading underline
 */
$declarations[] = [
	'entity'   => 'Webaxones\Core\Editor\Styles\BlockStyle',
	'labels'   => [],
	'settings' => [
		'slug'         => 'core/heading',
		'action'       => 'remove',
		'name'         => 'underline',
		'label'        => '',
	],
];

Settings

settings starts with the slug key which identifies the block.
name identifies the style name.

All arguments accepted by the register_block_style function OR by the unregister_block_style function can be added in settings.

It is possible to specify the handle of an external css file instead of inline style.
In this case, it will also be necessary to enter a custom key named style_uri containing the URI of this file.

Example:

declarations[] = [
	'entity'   => 'Webaxones\Core\Editor\Styles\BlockStyle',
	'labels'   => [
		'label' => __( 'underline', 'wax-custom-content' ),
	],
	'settings' => [
		'slug'         => 'core/heading',
		'action'       => 'add',
		'name'         => 'underline',
		'label'        => 'label',
		'style_handle' => 'custom-block-styles',
		'style_uri'    => get_template_directory_uri() . '/custom-style.css',
	],
];  
Clone this wiki locally