Skip to content
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

Allow previewing InnerBlocks in the block editor #114

Merged
merged 5 commits into from
Mar 9, 2022

Conversation

kienstra
Copy link
Contributor

@kienstra kienstra commented Mar 8, 2022

Fixes #96 and GF-3302

Changes

  • Allow previewing InnerBlocks in the block editor, where there was no preview before. This is an often-mentioned bug.
  • Remove the notice that you can't preview InnerBlocks

Testing Instructions

  1. composer i && npm i && npm run dev
  2. /wp-admin > Custom Blocks > Add New
  3. Create a new block
  4. Add a new field
  5. Give it a 'Field Type' of 'Inner Blocks': Screen Shot 2022-03-09 at 11 18 53 AM
  6. Click 'Template Editor'
  7. Enter {{new-field}}: Screen Shot 2022-03-09 at 11 22 54 AM
  8. Click 'Publish'
  9. Create a new post
  10. Add the block you just created: Screen Shot 2022-03-09 at 11 25 11 AM
  11. Add some blocks to Inner Blocks: Screen Shot 2022-03-09 at 11 26 27 AM
  12. Click away from the block so the preview displays: Screen Shot 2022-03-09 at 11 27 28 AM
  13. Expected: The preview includes the blocks you added to Inner Blocks: Screen Shot 2022-03-09 at 11 28 57 AM

@kienstra kienstra mentioned this pull request Mar 8, 2022
@@ -135,6 +125,10 @@ const Edit = ( { block, blockProps } ) => {
attributes={ blockProps.attributes }
className="genesis-custom-blocks-editor__ssr"
httpMethod="POST"
urlQueryArgs={ { inner_blocks: innerBlocks
Copy link
Contributor Author

@kienstra kienstra Mar 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<ServerSideRender /> has no native way to pass it the InnerBlocks HTML.

So it used to not render the InnerBlocks.

As a workaround, we pass the InnerBlocks to the urlQueryArgs prop.

Then, we look for that query arg in InnerBlocks::validate() with filter_input().

@kienstra kienstra marked this pull request as ready for review March 9, 2022 03:03
@kienstra kienstra changed the title Try previewing InnerBlocks in the block editor Allow previewing InnerBlocks in the block editor Mar 9, 2022
@kienstra
Copy link
Contributor Author

kienstra commented Mar 9, 2022

Hi @mikemcalister,
Just added testing instructions here, like we talked about.


return empty( $content )
? urldecode( filter_input( INPUT_GET, 'inner_blocks', FILTER_SANITIZE_STRING ) )
: $content;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There will still be escaping in block_field() if they call that.

@mikemcalister mikemcalister self-requested a review March 9, 2022 18:06
Copy link

@mikemcalister mikemcalister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great Ryan! Thanks for the detailed testing instructions. 👏

@kienstra
Copy link
Contributor Author

kienstra commented Mar 9, 2022

@mikemcalister, thanks a lot for reviewing and approving this!

@kienstra kienstra merged commit ba80114 into develop Mar 9, 2022
@kienstra kienstra deleted the try/inner-blocks-preview branch March 9, 2022 19:02
@kienstra
Copy link
Contributor Author

Here's a .zip of this branch, in case you'd like to test it: genesis-custom-blocks.1.4.1.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Preview for Inner Blocks
2 participants