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
A proof of concept of the Bento Carousel integration #39597
Conversation
Size Change: +13 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
The work we have done on the Bento components integration with the block editor got me thinking about the complexity of representing interactive blocks using the WYSWIG paradigm. We have a similar challenge with the Navigation block in core. When we use the truthful representation while being in the edit mode we run into the set of varying issues like the canvas occupied by the block becomes much smaller than the space necessary to update all possible content / design of the block or the block elements used for rotating inner blocks in the visible area conflict with native UI elements of the block editor. In the case of Bento Carousel, we would completely avoid the original issue if we would have two modes:
|
What?
This is an attempt to use inner blocks as BentoBaseCarousel slides. See the related Carousel Block explorations:
The problem this PR explores is that BentoBaseCarousel expects its immediate children to be the slides:
https://github.com/ampproject/amphtml/blob/5d52f0fcd377dd9049e8be5c58bcb6a5b0b51646/src/bento/components/bento-base-carousel/1.0/component.js#L104-L108
However, we cannot easily pass a list of components representing Gutenberg inner blocks.
We can only render a <div {...innerBlocksProps} /> which then renders a number of intermediate layers between that div and the actual list of specific child block components. There are ContextProviders, optional layouts, and more:
The workaround: support wrapping the list of inner blocks in a custom wrapper.
Potential problems: Bento components may have event handlers or portals that are incompatible with Gutenberg event handlers or portals.
cc @gziolo @schlessera @swissspidy @schmitzoide @priethor @luminuu