Skip to content

Commit

Permalink
Docs: Fix typo in "The block wrapper" document
Browse files Browse the repository at this point in the history
  • Loading branch information
t-hamano committed Jan 23, 2024
1 parent d1d1921 commit 8272b1a
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions docs/getting-started/fundamentals/block-wrapper.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

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, we have full control over the block's markup, and WordPress provides the tools to add the attributes that need to exist on the wrapper to our block's markup.

Ensuring proper attributes to the block wrapper is especially important when using custom styling or features like `supports`.
Ensuring proper attributes to the block wrapper is especially important when using custom styling or features like `supports`.

<div class="callout callout-info">
The use of <code>supports</code> generates a set of properties that need to be manually added to the wrapping element of the block so they're properly stored as part of the block data.
</div>

A block can have three sets of markup defined, each one of them with a specific target and purpose:

- The one for the **Block Editor**, defined through a `edit` React component passed to [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#registerblocktype) when registering the block in the client.
- The one used to **save the block in the DB**, defined through a `save` function passed to `registerBlockType` when registering the block in the client.
- The one for the **Block Editor**, defined through a `edit` React component passed to [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#registerblocktype) when registering the block in the client.
- The one used to **save the block in the DB**, defined through a `save` function passed to `registerBlockType` when registering the block in the client.
- This markup will be returned to the front end on request if no dynamic render has been defined for the block.
- The one used to **dynamically render the markup of the block** returned to the front end on request, defined through the `render_callback` on [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) or the [`render`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#render) PHP file in `block.json`
- If defined, this server-side generated markup will be returned to the front end, ignoring the markup stored in DB.
Expand All @@ -21,13 +21,13 @@ For the [`edit` React component and the `save` function](https://developer.wordp

## The Edit component's markup

The [`useBlockProps()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops) hook available on the [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor) allows passing the required attributes for the Block Editor to the `edit` block's outer wrapper.
The [`useBlockProps()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops) hook available on the [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor) allows passing the required attributes for the Block Editor to the `edit` block's outer wrapper.

Among other things, the `useBlockProps()` hook takes care of including in this wrapper:
- An `id` for the block's markup
- Some accesibility and `data-` attributes
- An `id` for the block's markup
- Some accessibility and `data-` attributes
- Classes and inline styles reflecting custom settings, which include by default:
- The `wp-block` class
- The `wp-block` class
- A class that contains the name of the block with its namespace

For example, for the following piece of code of a block's registration in the client...
Expand All @@ -43,18 +43,18 @@ _(see the [code above](https://github.com/WordPress/block-development-examples/b

...the markup of the block in the Block Editor could look like this:
```html
<p
tabindex="0"
id="block-4462939a-b918-44bb-9b7c-35a0db5ab8fe"
role="document"
aria-label="Block: Minimal Gutenberg Block ca6eda"
data-block="4462939a-b918-44bb-9b7c-35a0db5ab8fe"
data-type="block-development-examples/minimal-block-ca6eda"
data-title="Minimal Gutenberg Block ca6eda"
<p
tabindex="0"
id="block-4462939a-b918-44bb-9b7c-35a0db5ab8fe"
role="document"
aria-label="Block: Minimal Gutenberg Block ca6eda"
data-block="4462939a-b918-44bb-9b7c-35a0db5ab8fe"
data-type="block-development-examples/minimal-block-ca6eda"
data-title="Minimal Gutenberg Block ca6eda"
class="
block-editor-block-list__block
wp-block
is-selected
block-editor-block-list__block
wp-block
is-selected
wp-block-block-development-examples-minimal-block-ca6eda
"
>Hello World - Block Editor</p>
Expand Down Expand Up @@ -87,16 +87,16 @@ _(see the [code above](https://github.com/WordPress/block-development-examples/b
<p class="wp-block-block-development-examples-minimal-block-ca6eda">Hello World – Frontend</p>
```

Any additional classes and attributes for the `save` function of the block should be passed as an argument of `useBlockProps.save()` (see [example](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/stylesheets-79a4c3/src/save.js)).
Any additional classes and attributes for the `save` function of the block should be passed as an argument of `useBlockProps.save()` (see [example](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/stylesheets-79a4c3/src/save.js)).

When you add `supports` for any feature, the proper classes get added to the object returned by the `useBlockProps.save()` hook.

```html
<p class="
wp-block-block-development-examples-block-supports-6aa4dd
has-accent-4-color
has-contrast-background-color
has-text-color
wp-block-block-development-examples-block-supports-6aa4dd
has-accent-4-color
has-contrast-background-color
has-text-color
has-background
">Hello World</p>
```
Expand All @@ -105,10 +105,10 @@ _(check the [example](https://github.com/WordPress/block-development-examples/tr

## The server-side render markup

Any markup in the server-side render definition for the block can use the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to generate the string of attributes required to reflect the block settings (see [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11)).
Any markup in the server-side render definition for the block can use the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to generate the string of attributes required to reflect the block settings (see [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11)).

```php
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php esc_html_e( 'Block with Dynamic Rendering – hello!!!', 'block-development-examples' ); ?>
</p>
```
```

0 comments on commit 8272b1a

Please sign in to comment.