Gutenberg - Create custom block settings and/or have a CF field for any/all JS added to the block

[brianpurkiss]

Version

• Carbon Fields: 3.0.1
• WordPress: 5.0.3

Related (ish): https://github.com/htmlburger/carbon-fields/issues/649

Feature Request - Gutenberg Block Settings

Creating block settings is going to be one of the ways Gutenberg users can unleash the full potential of Gutenberg. A way to create settings for our new custom blocks would be an amazing addition to Carbon Fields and make it the front runner in working with Gutenberg.

Feature Request - General Gutenberg JS insert

Another cool feature, which would accomplish the above and add versatility to Carbon Fields, is some sort of general "add custom JS" to the block. Since Gutenberg is built using a variety of JS, the ability to add whatever JS we want to the block would be a very nice future proofing for Carbon Fields and allow us to do whatever we want with Gutenberg blocks created through Carbon Fields.

->set_custom_js( __( ' [the js here] ' ) )

It's kinda weird that we'd be adding in the raw JS since the thing I love so much about Carbon Fields' Gutenberg feature is how easy it is to create Gutenberg Blocks through the very simplified methods. But hey, options are always nice.

[rhino-corey]

Create settings for your Carbon Fields Block by using the add_fields() method. This is shown in the CF docs: https://docs.carbonfields.net/#/containers/gutenberg-blocks

I was surprised to see there was no way to reference the blocks custom javascript file. I would expect a CF Block method like set_editor_script() to be consistent with the method naming in the register_block_type() WP Block creation function.

[brianpurkiss]

Create settings for your Carbon Fields Block by using the add_fields() method. This is shown in the CF docs: https://docs.carbonfields.net/#/containers/gutenberg-blocks

That adds stuff to the main area @rhino-corey - how do I get content to show up in the block sidebar and the block sidebar only?

For example, let's say I wanted to add a checkbox that toggled font sizes by adding a class to the box. All I need is a checkbox in the sidebar and I don't need it in the main block area. Am I explaining this well?

[Brayn7]

@brianpurkiss I understand what you want. You want, when you click on a block you made with carbonFields, to be able to set settings it the "block" area in the right sidebar of the gutenberg editor. Please make a way CarbonFields that would be awesome!

[Salehdabab]

Any news on this? Would love to be able to do Block specific settings when clicked on.

[dackr]

Can someone please help in this capacity for CF?

[labmorales]

The custom script option can be implemented just like the custom styles?

functions.php

wp_register_style(
	'crb-my-shiny-gutenberg-block-stylesheet',
	get_stylesheet_directory_uri() . '/css/gutenberg/my-shiny-gutenberg-block.css'
);

Block::make( __( 'My Shiny Gutenberg Block' ) )
	->add_fields( array(
		Field::make( 'text', 'heading', __( 'Block Heading' ) ),
		Field::make( 'image', 'image', __( 'Block Image' ) ),
		Field::make( 'rich_text', 'content', __( 'Block Content' ) ),
	) )
	->set_style( 'crb-my-shiny-gutenberg-block-stylesheet' )
	->set_render_callback( function () {
		// ..
	} );

Blocks_Container.php

...
	/**
	 * Set the style of the block type.
	 *
	 * @param  string $handle
	 * @return Block_Container
	 */
	public function set_style( $handle ) {
		return $this->set_style_handle( 'style', $handle );
	}

	/**
	 * Set the editor style of the block type.
	 *
	 * @param  string $handle
	 * @return Block_Container
	 */
	public function set_editor_style( $handle ) {
		return $this->set_style_handle( 'editor_style', $handle );
	}