Skip to content

kellenmace/headless-block-parser

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 

Repository files navigation

Headless Block Parser

Plugin for headless WordPress projects that use the WPGraphQL Gutenberg extension. It implements a custom block parser that replaces internal link URL domains with that of the decoupled frontend JS app.

With this plugin in place, links inside of Gutenberg blocks that point to https://my-wp-backend.local/blog/hello-world will be re-written to instead point to http://localhost:3000/blog/hello-world (or whatever you've set as the frontend app URL), for example.

Steps to Use

  1. Clone down this repo into your project's /plugins directory.
  2. Modify the $frontend_app_url = 'http://localhost:3000'; line so that it gets the frontend app URL from an environment variable or the database - wherever you store it. This ensures that the internal link URLs will be re-written properly in all environments (development/staging/production).
  3. Install and activate the plugin.
  4. Test a few internal links in your decoupled frontend JS app to ensure their domains have been re-written properly.

The data-internal-link="true" data attribute that this plugin adds to internal links can also be used to convert regular anchor tags to your JS framework's Link component, as described in this blog post and this video. That way, your JS framework's router will handle the route changes for internal links rather than a full-page reload occurring.

Minimum Software Requirements

  • PHP 7.4+
  • WordPress 5.8+

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages