Gutenberg: Custom HTML blocks don't load when WordPress is served out of a subdirectory

[bobbingwide]

Issue Overview

With 2.3.0 the Custom HTML block is not working at all.
Attempting to insert the block produces "This block has encountered an error and cannot be previewed."

Steps to Reproduce (for bugs)

1. Install 2.3.0 in Windows server
2. Attempt to insert a Custom HTML block
   

Expected Behavior

Custom HTML block appears

Current Behavior

• Error dialog and messages in the Chrome console.

Uncaught TypeError: Cannot read property 'initialize' of undefined
The above error occurred in the <t> component:
Uncaught TypeError: Cannot read property 'on' of undefined

• Different messages in the Firefox console

TypeError: wp.codeEditor is undefined
The above error occurred in the <t> component:
TypeError: this.editor is undefined

• Fails with the built version of the plugin and latest git extracts and builds.
• Works fine on a hosted site - AIX server.

Possible Solution

Screenshots / Video

Related Issues and/or PRs

Todos

• [ ] Tests
• [ ] Documentation

[youknowriad]

Are you missing the code mirror script like #5381 Do you have any particular plugin or code disabling this script?

[youknowriad]

What if you go to /wp-admin/plugin-editor.php does the code mirror editor work there?

[zakoops]

What if you go to /wp-admin/plugin-editor.php...?

I fall directly in the classic WordPress Code Editor, with gutenberg.php in the edit window.

Is that what you want to know?

[youknowriad]

no, or try to go to "Appearance -> Editor" for instance, do you see the theme editor?

[zakoops]

Yeah sure, I can go there, and with syntax highligting working OK.

[youknowriad]

Thanks for confirming, might have something to do with the way we load code mirror in Gutenberg or something but it's hard to fix if we can't reproduce :)

[zakoops]

Thanks for verifying!

[bobbingwide]

I downloaded my site from the AIX server lock stock and barrel, imported the database and started running it locally. Everything is just the same except when I try to load the custom HTML block.
I'm comparing the generated HTML for the page. There are unexpected differences.

[bobbingwide]

OK, I have an explanation.
My local installs are sub-directory installs. e.g. qw/src, qw/hm, qw/wordpress etc
When I downloaded the working version from cwiccer.com I installed it in qw/cwiccer
So I was able to reproduce the problem.
I eventually realised that the requests to load the codemirror scripts and styles
were going to the parent directory ( qw )

/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint,csslint,jshint
/wp-admin/load-styles.php?load=wp-codemirror,code-editor

which was running WordPress 4.8.5, so did not have wp-codemirror.

Workaround

Updating the installation at qw and reloading the cached requests resolved the problem.

Proposed solution

Change https://github.com/WordPress/gutenberg/blob/master/components/code-editor/index.js
possibly using

var ajaxurl = '/cwiccer/wp-admin/admin-ajax.php',

to determine the URL

[zakoops]

Found the same discrepancy yesterday.

on localhost

On localhost, we have a virtual host "localweb" with one WP installation in project-3:

In the WP Settings/General panel, we have:

    WordPress Address (URL) set to http://localweb/project-3
    Site Address (URL)      set to http://localweb/project-3

The erroneous call to load the code mirror script (and other modules) is:

http://localweb/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint,csslint,jshint

...erroneous as there is no WP installation under "localweb".

It should be:

http://localweb/project-3/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint, csslint,jshint

on hosted server

The problem is similar when hosted on a distant server, with WP installed in a subdomain called "dbl":

    WordPress Address (URL) set to https://www.domain-name.com/dbl
    Site Address (URL)      set to https://www.domain-name.com

The erroneous call:
https://www.domain-name.com/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint,csslint,jshint

Should be:
https://www.domain-name.com/dbl/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint,csslint,jshint

final note

The code found in gutenberg/components/code-editor/index.js appears indeed related to this problem as it also correlates the first screenshot provided in issue #5381.

[doug-gv]

Is this not in a project or milestone yet? The HTML block is pretty primal in our usage, would greatly appreciate if it was fixed soon :)

[noisysocks]

To clarify/summarise this issue:

Right now we naïvely load the Code Mirror assets by requesting /wp-admin/load-scripts.php. This absolute path, however, will not work when WordPress is served from a subdirectory, e.g. example.com/blog/.

[doug-gv]

We have a proxy setup where

• the wordpress address is newsroom.guidevine.com
• the site address is guidevine.com/newsroom
• assets are served from newsroom.guidevine.com

Just an FYI as a consideration

--

This does cause all sorts of other problems but it seems to be in a core merge proposal already