Skip to content

Instantly share code, notes, and snippets.

@markhowellsmead
Forked from wpmark/alignment-options.js
Created February 17, 2022 10:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markhowellsmead/3c8f0882db26ce4b6bb18f24cec26f32 to your computer and use it in GitHub Desktop.
Save markhowellsmead/3c8f0882db26ce4b6bb18f24cec26f32 to your computer and use it in GitHub Desktop.
Add alignment options for WordPress core blocks.

WordPress block support for alignment options

If you are looking to add alignment options to some core blocks that don't support alignment, this is the way to achieve it. Add the javascript here to a file in the following location in your active theme:

assets/js/editor.js

and enqueue it in your themes functions.php file like so:

/**
 * Enqueue the correct scripts for the Gutenberg block editor.
 */
function hd_gutenberg_scripts() {

	// enqueue the editor js for the starter theme/
	wp_enqueue_script(
		'hd_editor',
		get_stylesheet_directory_uri() . '/assets/js/editor.js',
		array(
			'wp-blocks',
			'wp-dom'
		),
		filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
		true
	);

}

add_action( 'enqueue_block_editor_assets', 'hd_gutenberg_scripts' );
// set alignment options for cover, video, and paragraph blocks.
wp.hooks.addFilter(
'blocks.registerBlockType',
'hd-theme/hd-theme',
function( settings, name ) {
if ( name === 'core/cover' || name === 'core/video' || name === 'core/paragraph' || name === 'core/list' ) {
return lodash.assign( {}, settings, {
supports: lodash.assign( {}, settings.supports, {
// allow support for full and wide alignment.
align: ['full', 'wide'],
} ),
} );
}
return settings;
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment