Roots Discourse

[Trick/Workaround] Gutenberg editor styles with docker(-compose) setup

As I developed themes for the Gutenberg editor, I encountered some gotchas with a typical PHP development setup. I am not sure whether this is the best approach handling this issue, but I post it here so it may be helpful to other developers that encounter the same issue (or myself when I forgot about it, hehe).

When using a typical docker (-compose) setup with three containers (nginx, php-fpm and mariadb/mysql), the Gutenberg editor styles of a theme may inexplicitly not load.
The reason for this is that the editor styles for Gutenberg are downloaded via HTTP on the server side using its full URL (as sage correctly passes it with the asset helpers).
However, in the docker setup, the PHP container may not resolve the nginx container by its domain (even a dev/localhost one), and the HTTP request to the static editor style file (which nginx serves, not php-fpm!) will (silently!) fail and the editor styles not injected (serialized) into the editor page (for further parsing, remapping and injecting).
There are two solutions to this (which I know): Either make the nginx container resolvable by the site domain or use some filter (that only enable on development environment) and rewrite those editor style URLs to nginx container name.

When using a forward proxy in development like Traefik, the traefik container must resolve for these domains instead and the php-fpm container has to be connected to a docker network that can reach the traefik container. It is a bit harder when HTTPS with a self-signed certificate is used because the php-fpm client must then trust the custom root/intermediate CA key to be able to download the static editor style files via HTTPS.

Check out this Gutenberg Github issue for code and config examples of both approaches: