Hello,<\/p>\n\n\n\n
Thank you for maintaining Widget Options. I would like to report a compatibility bug with the\u00a0Gutenberg Page & Post Block Options\u00a0module, and request a fix.<\/p>\n\n\n\n
Environment<\/strong><\/p>\n\n\n\n What happens<\/strong><\/p>\n\n\n\n When\u00a0Gutenberg Page & Post Block Options<\/strong>\u00a0is enabled:<\/p>\n\n\n\n Core blocks such as Paragraph work normally. Disabling\u00a0Gutenberg Page & Post Block Options<\/strong>\u00a0resolves the error immediately.<\/p>\n\n\n\n Root cause<\/strong><\/p>\n\n\n\n In\u00a0 This is not how React components should be rendered.<\/p>\n\n\n\n That is why core blocks (plain function This is independent of any specific Lazy Edit \/ code-splitting feature in other plugins:\u00a0any block that registers a memoized\u00a0 Requested fix<\/strong><\/p>\n\n\n\n Please change the wrapper so it always renders the original\u00a0 There is no need for the\u00a0 Expected result<\/strong><\/p>\n\n\n\n With Gutenberg Page & Post Block Options enabled, third-party blocks that use I would appreciate it if you could confirm and ship a fix in an upcoming release. Happy to provide more details or test a patch if helpful.<\/p>\n\n\n\n Thank you.<\/p>\n","protected":false},"template":"","class_list":["post-18995041","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18995041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18995041\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=18995041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
edit<\/code>\u00a0component is wrapped with\u00a0React.memo<\/code>\u00a0(or another non-callable React element type such as\u00a0forwardRef<\/code>\u00a0\/\u00a0lazy<\/code>).<\/li>\n\n\n\n
\u201cThis block has encountered an error and cannot be previewed.\u201d<\/li>\n\n\n\nTypeError: d is not a constructor<\/code>
at the filter registered on\u00a0blocks.registerBlockType<\/code>\u00a0inincludes\/widgets\/gutenberg\/build\/index.js<\/code>
(namespace:\u00a0extended-widget-options\/sidebar-component<\/code>), inside the\u00a0try<\/code>\u00a0\/\u00a0catch<\/code>\u00a0that ends with\u00a0return new d(e)<\/code>.<\/li>\n<\/ol>\n\n\n\n
The issue only appears for blocks whose registered edit<\/code> is not a plain function\/class (for example, memo<\/code>-wrapped components).<\/p>\n\n\n\nincludes\/widgets\/gutenberg\/build\/index.js<\/code>, the plugin adds a\u00a0blocks.registerBlockType<\/code>\u00a0filter that wraps every block\u2019s\u00a0edit<\/code>\u00a0roughly like this:<\/p>\n\n\n\nconst d = settings.edit;
settings.edit = function ( props ) {
\/\/ ... initialize extended_widget_opts_* attributes ...<\/em>
try {
return d( props ); \/\/ call as a function<\/em>
} catch ( err ) {
return new d( props ); \/\/ fallback: treat as a class constructor<\/em>
}
};<\/code><\/code><\/pre>\n\n\n\n\n
edit<\/code>\u00a0via\u00a0wp.element.createElement( OriginalEdit, props )<\/code>.<\/li>\n\n\n\nOriginalEdit(props)<\/code>\u00a0only works for\u00a0plain function components.<\/li>\n\n\n\nnew OriginalEdit(props)<\/code>\u00a0only works for\u00a0class components.<\/li>\n\n\n\nReact.memo()<\/code>,\u00a0forwardRef()<\/code>,\u00a0lazy()<\/code>, etc. are\u00a0objects, not callable functions and not constructors. For those:\n\n
d(props)<\/code>\u00a0throws (e.g. \u201cis not a function\u201d)<\/li>\n\n\n\nnew d(props)<\/code>\u00a0throws\u00a0TypeError: d is not a constructor<\/code>\u00a0\u2190 the error we see<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\nedit<\/code>) still work, while many modern third-party blocks break.<\/p>\n\n\n\nedit<\/code>\u00a0is affected.<\/p>\n\n\n\nedit<\/code>\u00a0with\u00a0createElement<\/code>\u00a0(or equivalent), for example:<\/p>\n\n\n\nconst OriginalEdit = settings.edit;
settings.edit = function ( props ) {
\/\/ \u2026 your attribute initialization \u2026
return wp.element.createElement( OriginalEdit, props );
};<\/code><\/pre>\n\n\n\ntry { OriginalEdit(props) } catch { new OriginalEdit(props) }<\/code>\u00a0pattern.<\/p>\n\n\n\nReact.memo<\/code> (and similar) for edit<\/code> should mount normally, the same as core blocks.<\/p>\n\n\n\n