-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Epic #1
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Intro
This epic is to track development a framework for Gatsby's plugins/themes which will represent a mini framework for working with Gutenberg inside Gatsby and vice versa in WordPress.
Philosophy
The suite should work with official Gatsby's WordPress plugin (currently with gatsby-source-wordpress version 3 with upcoming major rewrite of version 4 in mind).
Goals
The major goal of this mini framework is to be able to map WordPress blocks to Gatsby's react components and also be able to render Gatsby's component output as block content inside Gutenberg admin (this should help to be able to work seamlessly with WordPress's plugins like Yoast and so). You can think of this as framework to completely replace WordPress theming in php with Gatsby.
Another feature to consider is to be able to register block with its attributes inside Gatsby and it will automatically import itself inside WordPress with opinionated look and feel (considering carbon blocks as an underlying library).
Framework
gatsby-plugin-wordpress-gutenberg
??? or maybe
gatsby-source-wordpress-gutenberg
orgatsby-transformer-gutenberg
This is the backbone of the framework which takes Gatsby's WordPress post node representation and acts on post's html content change. This will transform post's html content into structured content of Gatsby's nodes which will represent Gutenberg blocks. The GraphQL type representation should be similar to types of
wp-graphql-gutenberg
plugin (which i'm author of), but this suite won't use this plugin internally and rather do a rewrite in JS using puppeteer which will open WordPress Gutenberg admin in headless browser and do the transformation itself. This should fix the scaling problem ofwp-graphql-gutenberg
, where you have to save the post before being able to query it inwp-graphql
.gatsby-theme-wordpress-gutenberg
This plugin should do the mapping of Gatsby's post block node to react component file and then be able to generate
<Blocks>
component which will render all blocks/components for the current post.My current implementation works using
gatsby-source-filesystem
to track directory with react component files which have defined GraphQL fragments on Gutenberg block type. Upon scanning the source file you can then know the mapping ofblock->component_file
(you know which component has a fragment on which block type). This way you only import blocks/components which are on that post so everything is still optimized.Then the plugin takes the the post content blocks and generates the block component file which represents all blocks of the given post (recursively supporting inner blocks, so the blocks's innerBlocks map to components children). A small example below.
This:
Is converted to this:
Note the special
UnknownBlock
component which will represent block which is not yet implemented in Gatsby and will display raw html throughdangerouslySetInnerHtml
. We can maybe also take this so far, that we query also for block's css styles from WordPress and also import and display those.And this is an example of CoreHeading:
Since this is a Gatsby theme, we can implement a set of components for core blocks which can be shadowed further on in userland.
And the last thing that the theme could do is to generate component file with the whole post's Gatsby's page query and create Gatsby's page automatically (with support to turn off this feature).
Note that these examples currently work with querying
wp-graphql-gutenberg
.Live Previews
Since Gutenberg is sort of redux/react application, we can insert our own root reducer to the store and generate events upon every change. Then our Gatsby page can listen to the event through
BroadcastChannel
api and act upon this. My current implementation of this rewrites Gatsby's queries to Apollo queries and then queries Gatsby's develop server with new block content. TODO: Think of an implementation which could work without Gatsby's develop server as mediator.Registering blocks
TODO...
Brief overview in Goals section
My initial though is to scan source files with babel for our opinionated api method and then generate the php's block code accordingly and transfer it to our WordPress plugin dir.
Rendering components in WordPress admin
TODO...
Brief overview in Goals section
My initial though is to create a "hidden" page which would take block name and its attributes in a query param and then render the component accordingly.
Useful links
gatsbyjs/gatsby#19292
gatsbyjs/gatsby#19092
https://github.com/htmlburger/carbon-fields
https://github.com/pristas-peter/wp-graphql-gutenberg
The text was updated successfully, but these errors were encountered: