BlockEditor: Add BlockCanvas component = Iframe + BlockList + WritingFlow #54149
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
Framework
youknowriad
requested review from
noisysocks,
draganescu,
talldan,
tellthemachines,
adamziel,
kevin940726,
ellatrix,
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
25 tasks
|
Size Change: +83 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
jorgefilipecosta
approved these changes
Sep 4, 2023
|
It sounds like a good idea. Even knowing how some of these components work, I have a hard time tracing through what does what. |
youknowriad
force-pushed
the
add/block-canvas-component
branch
from
4205b93 to
1489bb5
Compare
|
What should be the default "height" of the new BlockCanvas component?
After several considerations, I'm going with the last option as it's the nicest in terms of combination between API and behavior. By default it works but it also allows you to support the "fit container" use case by passing 100% to the prop. We may support the first use-case at some point by passing "auto" but because of the complexity, I think it's not worth addressing for now. |
|
I marked most of the props of the |
|
I think we're now ready to merge the initial version of this component (intentionally limited in terms of customization options and props).
@ellatrix you might want to be aware of this, I think we can probably debug that separately though. |
|
Size Change: +83 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
This was referenced Sep 8, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related #53874
What and why?
Gutenberg can be used as a platform/framework to build block editors. Mainly thanks to the @wordpress/block-editor package. That said, the experience today is not as straightforward as it can be. There can be a lot of small gotchas and hacks you need to do in order to achieve the desired result. One of these small things is the need to manually render
WritingFlow,BlockListand potentiallyIframecomponent. this PR proposes the addition of a new component calledBlockCanvaswhose purpose is to bundle all of these into a single component that represents the "canvas" of the editor.Principles:
<BlockCanvas />should be enough to render the block list and have all the keyboard behaviors setup (writing flow, is typing flag...)EditorStylescomponent) using astylesprop.Todo and open questions:
iframePropsandcontentRefprops should private to start with. We need to check whether these behaviors can be bundled or replaced with more meaningful props.Testing Instructions
1- E2E tests should pass.