Skip to content

Adding support for align to code block breaks the editor #128

@grgar

Description

@grgar

Firstly, thank you for this amazing plugin. I wish more plugins adopted server-side rendering.

The plugin (on master including #117) works great. However I'm having difficulty using it alongside adding support for Gutenberg block alignment to the code block.

In enqueue_block_editor_assets I'm wp_enqueue_script the following:

wp.hooks.addFilter('blocks.registerBlockType', 'grgarside/codealign', function (settings, name) {
	if (name !== 'core/code') {
		return settings;
	}
	return lodash.assign({}, settings, {
		supports: lodash.assign({}, settings.supports, {
			align: true
		}),
	});
});

This seems to correctly add the alignment controls to the code block in the editor

Gutenberg alignment options

and that works perfectly (or at least appears to, I'm still new to Gutenberg and I'm not sure if what I've done is right!), but only with this plugin disabled.

With this plugin enabled, the editor appears to load fine at first, but choosing any alignment option shows an error:

This block has encountered an error and cannot be previewed.

The console shows

TypeError: null is not an object (evaluating 'U.current.ownerDocument')
Q — index.js:5:38797
(anonymous function) — index.js:5:43067
(anonymous function) — react-dom.min.js:105:199
unstable_runWithPriority — react.min.js:26:342
$g — react-dom.min.js:105:122
bh — react-dom.min.js:105:406
ah — react-dom.min.js:109:123
Ti — react-dom.min.js:145:154
Ti
unstable_runWithPriority — react.min.js:26:342
Ia — react-dom.min.js:140:410
Ia
ze — react-dom.min.js:118
ze
(anonymous function) — react-dom.min.js:53
unstable_runWithPriority — react.min.js:26:342
mg — react-dom.min.js:52:499
V — react-dom.min.js:52:434
Be — react-dom.min.js:119
xi — react-dom.min.js:39:176

but that doesn't seem too useful? How can I get a better error message so I can try to debug this, or is there something you'd be able to point out that I'm doing wrong? (I thought define('SCRIPT_DEBUG', true); would make better errors but it doesn't seem to have made a difference.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions