Convert to Blocks: HTML Attributes are not copied to the DOM Node within callbacks of custom transforms

[AndiDittrich]

Dear Gutenberg Team,

the "Convert to Blocks" feature (content parser) seems to ignore element attributes on raw DOM Nodes.
By converting "RAW" blocks by custom transform rules, no attributes are available within the isMatch(node) callback even if they are defined in the legacy html sources.

---

Example Code to reproduce the issue

Plugin

wp.blocks.registerBlockType('test/myblock', {

    // block element transformation/converting
    transforms: {
        from: [
        {
            type: 'raw',
            priority: 4,
            isMatch: function isMatch(node) {
                // ALL kind of attributes/classes are MISSING
                console.log("classes: ", node.classList.length);
                console.log("attributes: ", node.attributes.length);
                return false;
            },
            transform: function transform(node) {
                // some custom transform rule
                return wp.blocks.createBlock('core/codeblock', { content: node.textContent });
            }
        }
        ]
    }
})

Editor Content

<pre class="EnlighterJSRAW" data-enlighter-language="php">
define('ENLIGHTER_GUTENBERG_PLUGIN_PATH', dirname(__FILE__));
define('ENLIGHTER_GUTENBERG_PLUGIN_URL', plugins_url('/enlighter-gutenberg/'));
</pre>

<div class="echo">lalala</div>

---

Current Behaviour

Attributes are ignored by the parser and not copied to the node passed to the transform callbacks isMatch(node) / transform(node`)

Console Output

---

Expected Behaviour

ALL attributes should be copied to the node (and become available in isMatch(node) + transform(node) to apply custom transform rules.

This is absolutely required to convert legacy addons to blocks (lot of them are based on custom classes)

best regards, Andi

[mcsf]

Hi, @AndiDittrich. You most likely need to define a schema to go along with your transformation. See the case of the More block, in which we look for a node like:

<wp-block data-block="core/more" data-custom-text="Optional"></wp-block>

More's transformation:

gutenberg/packages/block-library/src/more/index.js

Lines 54 to 71 in 0841246

	type: 'raw',
	schema: {
	'wp-block': { attributes: [ 'data-block' ] },
	},
	isMatch: ( node ) => node.dataset && node.dataset.block === 'core/more',
	transform( node ) {
	const { customText, noTeaser } = node.dataset;
	const attrs = {};
	// Don't copy unless defined and not an empty string
	if ( customText ) {
	attrs.customText = customText;
	}
	// Special handling for boolean
	if ( noTeaser === '' ) {
	attrs.noTeaser = true;
	}
	return createBlock( 'core/more', attrs );
	},

[AndiDittrich]

Hi @mcsf

thanks for your feedback and the node.dataset hint!

after some testing, i've noticed that node.dataset always contains a StringMap with all data-xxx attributes defined on the particular element - but independently of the schema

is assume that the schema is not used in raw transform definitions (i didn't found any hints within the docs..) ?

best regards,
Andi