Docs: Fundamentals of Block Development - The block wrapper #56596
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
juanmaguitar
requested review from
ajitbohra,
ryanwelcher,
fabiankaegy and
ndiego
as code owners
juanmaguitar
added
Developer Experience
ryanwelcher
requested changes
Nov 28, 2023
docs/getting-started/fundamentals-block-development/the-block-wrapper.md
Outdated
Show resolved
Hide resolved
docs/getting-started/fundamentals-block-development/the-block-wrapper.md
Outdated
Show resolved
Hide resolved
docs/getting-started/fundamentals-block-development/the-block-wrapper.md
Outdated
Show resolved
Hide resolved
docs/getting-started/fundamentals-block-development/the-block-wrapper.md
Outdated
Show resolved
Hide resolved
docs/getting-started/fundamentals-block-development/the-block-wrapper.md
Outdated
Show resolved
Hide resolved
docs/getting-started/fundamentals-block-development/the-block-wrapper.md
Outdated
Show resolved
Hide resolved
…wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
…wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
…wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
…wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
…wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
fabiankaegy
reviewed
Nov 28, 2023
| @@ -0,0 +1,113 @@ | |||
| # The block wrapper | |||
|
|
|||
| Each block's markup is wrapped by a container HTML tag that needs to have the proper attributes to fully work in the Block Editor and to reflect the proper block's style settings when rendered in the Block Editor and the front end. As developers, when creating a custom block, we need to manually add these attributes to the markup using some of the tools provided by WordPress. | |||
There was a problem hiding this comment.
I find this sentence here a little confusing. It sounds like the markup of the block is wrapped by some markup we cannot control.
Which was the case with the apiVersion: 1 but with apiVersion: 2 & 3 that no longer ist the case and we have the useBlockProps hook to get the attributes that need to exist on the wrapper to manually add to our own markup. So a developer has full control over the markup of the block including the wrapper
There was a problem hiding this comment.
@fabiankaegy I have rephrased that part inspired by the info in your comment.
Let me know what you think
juanmaguitar
deleted the
fundamentals-block-development/the-block-wrapper
branch
|
@juanmaguitar I'd love for this kind of documentation to be part of the platform docs as well (minus the WordPress jargon). Not necessarily something to act upon now, but I envision that the "platform docs" become some kind of "reference docs" and that the block editor handbook would link to it and just "augment it" with WordPress specifics. |
derekblank
pushed a commit
that referenced
this pull request
Dec 7, 2023
* Add The Block Wrapper * Refactor block wrapper and add useBlockProps hook * Update block wrapper in the Block Editor * Update block markup and wrappers * Update block markup and wrapper attributes * Update block wrapper attributes and add documentation * Content added * Fix server-side render definition for block wrapper * Refactor block wrapper markup * Update docs/getting-started/fundamentals-block-development/the-block-wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com> * Update docs/getting-started/fundamentals-block-development/the-block-wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com> * Update docs/getting-started/fundamentals-block-development/the-block-wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com> * Update docs/getting-started/fundamentals-block-development/the-block-wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com> * Update docs/getting-started/fundamentals-block-development/the-block-wrapper.md Co-authored-by: Ryan Welcher <me@ryanwelcher.com> * Fix save function in block wrapper * Refactor block wrapper markup to add attributes * update folder name * Add block-wrapper.md to toc.json * Add link create-block * fixed link Metadata in block.json --------- Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
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.
Introduction to block wrapper
This PR is part of #56282