Add support for genesis-custom-blocks
Muzammil-khan710 opened this issue · comments
Bug summary
When querying data with graphql , fields are coming empty. It should output the data of fields .
Steps to reproduce
- Create a genesis custom block .
- Add custom block to a page/post .
- Open grapgql IDE on wordpress .
Expected behavior
should output the data of fields present in the custom block
Actual behavior
The fields are coming empty also no errors.
Versions
- WordPress version: 6.2.2
- wpgraphql version: 1.14.3
- WPGraphQL Content Blocks version: 0.2.1
- Genesis Custom Blocks version: 1.5.1
Hey @Muzammil-khan710 . I just checked out the free plugin
https://www.studiopress.com/genesis-custom-blocks/
and used the default example block that contains a form:
And I was able to query the attributes of that block:
Would you mind posting the contents of the post as stored in the database? For example here is the one using Adminer:
As you can see the contents of the block is stored as JSON and their attributes map exactly to the GenesisCustomBlocksExampleBlockAttributes
It would also help if you post the Attributes docs for your custom GenesisCustomBlocksTest block that you have as shown in my screenshot.
Also could you check the latest version of the plugin v0.3.0?
Hey @theodesp , I have just updated the plugin to v0.3.0 and now data of fields are coming as expected .
I am using hosted(live) Wordpress instead of locally installed.
Also I have created and added custom block to one page and now when I am querying, the first field is coming as null yet there is only one component and the attributes are coming twice for single component .
Could you post the content of the database post as a minimal reproducible example? I will try to create a similar block and verify. Thank you.
Here's what I found
---- > wp:genesis-custom-blocks/component {"title":"this will be title","description":"this will be description"}
Yes, @theodesp . I will try re-installing every plugin and try again may be there's some sort of bug while querying. Might be there's some version problem of a plugin . That's why it is behaving like this.
Will let you know .
Thanks .
Hey @theodesp , I have re-installed all plugins and now it's working as expected. Thank you !
Bug summary
Hey @theodesp , I am using Nextjs and Wordpress as headless. I am using WPGraphQL Content Blocks and I have created a custom block using genesis-custom-blocks. Now when I am querying the data locally it is coming as expected and I can find every field as it should. Let's say I am getting all the data for every block paragraph, headings etc. same for the custom block and I can even style them based on attributes coming from the field. My problem is my custom-block-component is going under fallbackBlock provided by WordPressBlocksViewer Also my custom-block-component appears as it should on initial render for just few ms than it goes in the fallbackBlock on my hosted website. But it is working fine when I am using my app in locally.
Steps to reproduce
- Create a genesis custom block .
- Add custom block to a page/post .
- Open grapgql IDE on wordpress .
- Create a new Nextjs project and follow this guide.
Expected behavior
It should output the attributes along with renderedHtml of custom block in live/hosted website.
Actual behavior
Currently attributes of custom block are coming when we are running app locally but it should also come when we are using hosted website. All other blocks are coming as they expected ex: headings, paragraphs, images...
Versions
- WordPress version: 6.2.2
- Wpgraphql version: 1.14.4
- WPGraphQL Content Blocks version: 0.3.0
- Genesis Custom Blocks version: 1.5.1
- NextJs version: 13.1.5
- React version: 18.2.0
- apollo/client version: 3.7.14
- faustwp/blocks version: 0.3.1
- faustwp/cli : 0.2.12
- faustwp/core: 0.2.11
Query
Live website
Localhost
Hey @Muzammil-khan710 it might not picking up the matching block.
Take a look at this block implementation that works as expected:
It contains some extra properties that you need to add to the component. Either using displayName or config.name is fine here.
Also make sure you export the name of the component as a string literal.
https://github.com/wpengine/faustjs/blob/canary/packages/blocks/src/blocks/index.ts#L10-L15
If you don't do that, Webpack will mangle the names and it won't match the component when you do a production build.
// wp-blocks/index.js
export default {
'MyCustomBlock': MyCustomBlock
}
Hey @theodesp, I have done changes that you have mentioned but I am still getting the same problem.
ll.mp4
Hey @Muzammil-khan710 I don't see the displayName or the config.name in the exported GenesisCustomBlocksComponent component:
I can see them in the rest of the components:
CoreParagraph, CoreHeading and so on have it but not in GenesisCustomBlocksComponent as you can see in the picture.
This means that it will render the fallback block.
Please make sure you verify all your components contain either the displayName or the config.name properties.
The name property won't work as it will be mangled.
Hey, @theodesp. Just updated the changes you have mentioned and now it is working fine. Could you please explain me why it was working fine in development mode and not in production.
Thank you .
Hey @Muzammil-khan710 the name export is magled in Webpack production build so when you export this:
export {
GenesisCustomBlocksComponent
}
The exported component in dev build will be:
{
name: `GenesisCustomBlocksComponent`
}
But in production build it will be a mangled key:
{
name: 'ab'
}
Here ab does not match with __typename: "GenesisCustomBlocksComponent" so it fallsback.
And also since you can't change the name of a function:
GenesisCustomBlocksComponent.name = 'GenesisCustomBlocksComponent' // error
we use a different way to assign the name of the component. Hence either the displayName or the config.name should be used.
Alright thanks @theodesp you can close this issue now.