blocks.getSaveContent.extraProp not working.

[phpbits]

Hi,

I've tried the example here : https://github.com/WordPress/gutenberg/blob/master/docs/extensibility.md

// Our filter function
function addBackgroundProp( props ) {
	return Object.assign( props, { backgroundColor: 'red' } );
}

// Adding the filter
wp.hooks.addFilter(
	'blocks.getSaveContent.extraProps',
	'myplugin/add-background',
	addBackgroundProp
);

It's not working and returning Block validation: Block validation failed error. Thanks!

[aduth]

Are you running this code in the console, or in a plugin script? If the former, I would expect it would error because validation works by re-running the block's save at the initial load. Since after your refresh the code doesn't exist, it will differ (won't add the prop) and show a validation warning. If it's provided by a plugin, it should work.

Another issue is that backgroundColor is not a valid prop. I assume it should be assigning into the style, in which case the corrected function would look like:

// Our filter function
function addBackgroundProp( props ) {
	return Object.assign( props, { style: { backgroundColor: 'red' } } );
}

I'll plan to submit a pull request with updated documentation, and maybe a note about the "gotcha" with pasting into the console.

[phpbits]

@aduth I'm running this on a plugin script and even if I've already tried using this one :

// Our filter function
function addBackgroundProp( props ) {
	return Object.assign( props, { style: { backgroundColor: 'red' } } );
}

It's still logging the error. Any thoughts? Have you already tried this filter? Thanks!

[aduth]

@phpbits Can you share how you're enqueuing the script?

[phpbits]

@aduth I'm using add_action( 'enqueue_block_editor_assets', 'widgetopts_editor_assets', 9999 ); and :

wp_enqueue_script(
		'gutenberg-widgetopts',
		$js_dir .'gutenberg.js',
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
		filemtime( WIDGETOPTS_PLUGIN_DIR .'assets/js/gutenberg.js' )
	);

Let me know your thoughts. Thanks!

[aduth]

@phpbits I tried the minimal necessary to include a sample version of your plugin within Gutenberg itself, and from what I can tell, it works exactly as expected (adding a new style) with no errors:

diff --git a/gutenberg.js b/gutenberg.js
index e69de29b..ff5efea8 100644
--- a/gutenberg.js
+++ b/gutenberg.js
@@ -0,0 +1,10 @@
+// Our filter function
+function addBackgroundProp( props ) {
+	return Object.assign( props, { style: { backgroundColor: 'red' } } );
+}
+// Adding the filter
+wp.hooks.addFilter(
+	'blocks.getSaveContent.extraProps',
+	'myplugin/add-background',
+	addBackgroundProp
+);
diff --git a/gutenberg.php b/gutenberg.php
index 31eff25b..49128874 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -15,6 +15,15 @@ define( 'GUTENBERG_DEVELOPMENT_MODE', true );
 
 gutenberg_pre_init();
 
+function widgetopts_editor_assets() {
+	wp_enqueue_script(
+		'gutenberg-widgetopts',
+		plugins_url( 'gutenberg.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-i18n', 'wp-element' ) // Dependencies, defined above.
+	);
+}
+add_action( 'enqueue_block_editor_assets', 'widgetopts_editor_assets', 9999 );
+
 /**
  * Project.
  *

[phpbits]

@aduth are you using this plugin version : https://wordpress.org/plugins/gutenberg/ ? I'm using that one and not the development version. Thanks!

[aduth]

I am using the development version. Are you able to try it there?

Would it be possible for you to share the complete source code of your plugin?

[phpbits]

@aduth Not sure why this issue was closed. I've tried on the latest dev version and still not working. Thanks!

[phpbits]

Also, using the latest version I've discovered this issue : #4817 . Did you make any changes with the Inspector Controls? Thanks!

[aduth]

The issue was auto-closed as my original suspicion was that this was an issue of documentation, improved in #4782. I'll reopen since there are still remaining issues.

[phpbits]

@aduth Thanks! Let me know how it goes ;)

[aduth]

Can you check again after version 2.2 ? If you're still having issues, would it be possible for you to share your entire plugin code?

[gziolo]

I'm closing this one, as this is working as expected in core. See https://github.com/WordPress/gutenberg/blob/master/blocks/hooks/anchor.js#L94 as a reference - this one adds id attribute to the outputted HTML code.

@phpbits, if it still doesn't work for you feel free to reopen and as @aduth said share your full code.

[phpbits]

@aduth the filters are working fine with the default Gutenberg blocks but it's not working for custom blocks from other plugins. Tried creating custom block also and the filters are not reflecting. Here's my plugin : http://wordpress.org/plugins/block-options/ . You can check by adding is_user_logged_in() on the display logic option. Thanks!

[gziolo]

@phpbits, can you provide more details? Which filters don't work as expected? Did you try to debug what happens exactly?

[phpbits]

@gziolo Just fixed the issue an hour ago, I'm about to remove my comment ;) Thanks!

[gziolo]

No need to remove, you can leave a note what went wrong to help others when dealing with the same issue. It's a new territory to extend blocks created by plugins :)

[phpbits]

@gziolo will do ;) I'm just testing my fixes from lots of plugins and themes with custom blocks and will see if it will work out for all of them. Thanks!

[leeshadle]

@gziolo I was running into issues with this as well, but I think it's due to the documentation and probably the name of the filter ( extraProps ):
https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getsavecontent-extraprops

"A filter that applies to all blocks returning a WP Element in the save function. This filter is used to add extra props to the root element of the save function. For example: to add a className, an id, or any valid prop for this element."

And by props I'm thinking it's meaning it adds extra html attributes to the root element of the save function? i.e. - className, id, style, etc...

[gziolo]

Technically speaking, if the root of your save method is an HTML element then you can translate it to HTML attributes. The difference is that className translates to class and htmlFor translates to for.

[leeshadle]

@gziolo totally I agree with what you're saying.

I think the reason I was running into issues was because of the mental model I was using based on the documentation and the filter naming. I was thinking in terms of React props, not html attributes. Based on the documentation, I was thinking this filter would pass extra props to the props of my Save function, not add those extraProps to the root html element as attributes.

[gziolo]

Do you think you could propose a different wording there so other folks could avoid going the same path you experienced?

[leeshadle]

For sure. I didn't update much, mostly just changed the terms props to attributes:

blocks.getSaveContent.extraProps
A filter that applies to all blocks returning a WP Element in the save function. This filter is used to add extra attributes to the root html element of the save function. For example: to add a className, an id, a style or any valid html attribute to this element.

The filter receives the current save element’s props, a block type and the block attributes as arguments. It should return a props object.

Example:
Adding a style attribute, with a background-color, by default to all blocks root html element.

[gziolo]

Would you mind opening PR based on this comment and we can take it from there? I agree that it makes sense to discuss the possibility to add/change/remove attributes that will be sourced from props 👍