Gutenberg script: React support

sage
1

The sage theme should inject a script for configuring Gutenberg to wrap a block with an extra DIV (which the theme needs for styling and resolving z-index related issues) (code derived from tutorial from https://florianbrinkmann.com/6307/gutenberg-core-block-element-umschliessen/):

wp.hooks.addFilter(
	'blocks.getSaveElement',
	'slug/modify-get-save-content-extra-props',
	modifyGetSaveContentExtraProps
);

/**
 * Wrap table block in div.
 *
 * @param {object} element
 * @param {object} blockType
 * @param {object} attributes
 *
 * @return The element.
 */
function modifyGetSaveContentExtraProps( element, blockType, attributes  ) {
	// Check if that is not a atomic-blocks/ab-container block.
	if (blockType.name !== 'atomic-blocks/ab-container') {
		return element;
	}

	// Return the block with div wrapper.
	return (
		<div className='wrapper'>
			{element}
		</div>
	);
}

For this, a new script file is added to resources/assets/scripts/ and further referenced in resources/assets/config.json. However, building results in an error:`

24:3  error  Parsing error: Unexpected token <

The HTML markup for React is misinterprted.
How can I add support for this to Eslint/JavaScript build options of the sage theme?

2

Hey @strarsis - you just need to tell eslint to support JSX and React. See: https://eslint.org/docs/user-guide/configuring#specifying-parser-options

2 Likes