Skip to content

Commit

Permalink
prep build 11/17
Browse files Browse the repository at this point in the history
  • Loading branch information
@bph
bph committed Nov 17, 2023
2 parents 6ef4c0f + bb8adcd commit 39bbb7f
Show file tree
Hide file tree
Showing 285 changed files with 1,733 additions and 2,441 deletions.
328 changes: 328 additions & 0 deletions changelog.txt
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ This handbook should be considered the canonical resource for all things related
- [**WordPress Developer Blog**](https://developer.wordpress.org/news/) - An ever-growing resource of technical articles covering specific topics related to block development and a wide variety of use cases. The blog is also an excellent way to [keep up with the latest developments in WordPress](https://developer.wordpress.org/news/tag/roundup/).
- [**Learn WordPress**](https://learn.wordpress.org/) - The WordPress hub for learning resources where you can find courses like [Introduction to Block Development: Build your first custom block](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/), [Converting a Shortcode to a Block](https://learn.wordpress.org/course/converting-a-shortcode-to-a-block/) or [Using the WordPress Data Layer](https://learn.wordpress.org/course/using-the-wordpress-data-layer/)
- [**WordPress.tv**](https://wordpress.tv/) - A hub of WordPress-related videos (from talks at WordCamps to recordings of online workshops) curated and moderated by the WordPress.org community. You’re sure to find something to aid your learning about [block development](https://wordpress.tv/?s=block%20development&sort=newest) or the [block-editor](https://wordpress.tv/?s=block%20editor&sort=relevance) here.
- [**Gutenberg repository**](https://github.com/WordPress/gutenberg/) - Development of the block editor project is carried out in this GitHub repository. It contains the code of interesting packages such as [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (core blocks) or [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (common UI elements). _The [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository is another useful reference._
- [**Gutenberg repository**](https://github.com/WordPress/gutenberg/) - Development of the block editor project is carried out in this GitHub repository. It contains the code of interesting packages such as [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (core blocks) or [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (common UI elements). _The [block-development-examples](https://github.com/WordPress/block-development-examples) repository is another useful reference._


## Are you in the right place?
Expand All @@ -70,4 +70,4 @@ This handbook should be considered the canonical resource for all things related
- [/apis](https://developer.wordpress.org/apis) - Common APIs Handbook
- [/advanced-administration](https://developer.wordpress.org/advanced-administration) - WP Advanced Administration Handbook
- [/rest-api](https://developer.wordpress.org/rest-api/) - REST API Handbook
- [/coding-standards](https://developer.wordpress.org/coding-standards) - Best practices for WordPress developers
- [/coding-standards](https://developer.wordpress.org/coding-standards) - Best practices for WordPress developers
1 change: 1 addition & 0 deletions docs/contributors/versions-in-wordpress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre

| Gutenberg Versions | WordPress Version |
| ------------------ | ----------------- |
| 16.2-16.7 | 6.4.1 |
| 16.2-16.7 | 6.4 |
| 15.2-16.1 | 6.3.1 |
| 15.2-16.1 | 6.3 |
Expand Down
4 changes: 2 additions & 2 deletions docs/how-to-guides/block-tutorial/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

The purpose of this tutorial is to step through the fundamentals of creating a new block type. Beginning with the simplest possible example, each new section will incrementally build upon the last to include more of the common functionality you could expect to need when implementing your own block types.

To follow along with this tutorial, you can download the [accompanying WordPress plugin](https://github.com/WordPress/gutenberg-examples) which includes all of the examples for you to try on your own site. At each step along the way, experiment by modifying the examples with your own ideas, and observe the effects they have on the block's behavior.
To follow along with this tutorial, you can download the [accompanying WordPress plugin](https://github.com/WordPress/block-development-examples) which includes all of the examples for you to try on your own site. At each step along the way, experiment by modifying the examples with your own ideas, and observe the effects they have on the block's behavior.

> To find the latest version of the .zip file go to the repo's [releases page](https://github.com/WordPress/gutenberg-examples/releases) and look in the latest release under 'Assets'.
> To find the latest version of the .zip file go to the repo's [releases page](https://github.com/WordPress/block-development-examples/releases) and look in the latest release under 'Assets'.
Code snippets are provided in two formats "JSX" and "Plain". JSX refers to JavaScript code that uses JSX syntax which requires a build step. Plain refers to "classic" JavaScript that does not require building. You can change between them using tabs found above each code example. Using JSX, does require you to run [the JavaScript build step](/docs/how-to-guides/javascript/js-build-setup/) to compile your code to a browser compatible format.

Expand Down
104 changes: 2 additions & 102 deletions docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ The first method shows adding the style inline. This transforms the defined styl

The `useBlockProps` React hook is used to set and apply properties on the block's wrapper element. The following example shows how:

{% codetabs %}
{% JSX %}

```jsx
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
Expand Down Expand Up @@ -55,49 +52,6 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
} );
```

{% Plain %}

```js
( function ( blocks, React, blockEditor ) {
var el = React.createElement;

blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
edit: function ( props ) {
const greenBackground = {
backgroundColor: '#090',
color: '#fff',
padding: '20px',
};
const blockProps = blockEditor.useBlockProps( {
style: greenBackground,
} );
return el(
'p',
blockProps,
'Hello World (from the editor, in green).'
);
},
save: function () {
const redBackground = {
backgroundColor: '#090',
color: '#fff',
padding: '20px',
};
const blockProps = blockEditor.useBlockProps.save( {
style: redBackground,
} );
return el(
'p',
blockProps,
'Hello World (from the frontend, in red).'
);
},
} );
} )( window.wp.blocks, window.React, window.wp.blockEditor );
```

{% end %}

## Method 2: Block classname

The inline style works well for a small amount of CSS to apply. If you have much more than the above you will likely find that it is easier to manage with them in a separate stylesheet file.
Expand All @@ -106,9 +60,6 @@ The `useBlockProps` hooks includes the classname for the block automatically, it

For example the block name: `gutenberg-examples/example-02-stylesheets` would get the classname: `wp-block-gutenberg-examples-example-02-stylesheets`. It might be a bit long but best to avoid conflicts with other blocks.

{% codetabs %}
{% JSX %}

```jsx
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
Expand All @@ -131,66 +82,15 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
} );
```

{% Plain %}

```js
( function ( blocks, React, blockEditor ) {
var el = React.createElement;

blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
edit: function ( props ) {
var blockProps = blockEditor.useBlockProps();
return el(
'p',
blockProps,
'Hello World (from the editor, in green).'
);
},
save: function () {
var blockProps = blockEditor.useBlockProps.save();
return el(
'p',
blockProps,
'Hello World (from the frontend, in red).'
);
},
} );
} )( window.wp.blocks, window.React, window.wp.blockEditor );
```

{% end %}

### Build or add dependency

In order to include the blockEditor as a dependency, make sure to run the build step, or update the asset php file.

{% codetabs %}
{% JSX %}

Build the scripts and update the asset file which is used to keep track of dependencies and the build version.
```bash
npm run build
```

{% Plain %}

Edit the asset file to include the block-editor dependency for the scripts.

```php
<?php return
array( 'dependencies' =>
array(
'react',
'wp-blocks',
'wp-block-editor',
'wp-polyfill'
),
'version' => '0.1'
);
```

{% end %}

### Enqueue stylesheets

Like scripts, you can enqueue your block's styles using the `block.json` file.
Expand All @@ -199,7 +99,7 @@ Use the `editorStyle` property to a CSS file you want to load in the editor view

It is worth noting that, if the editor content is iframed, both of these will
load in the iframe. `editorStyle` will also load outside the iframe, so it can
be used for editor content as well as UI.
be used for editor content as well as UI.

For example:

Expand Down Expand Up @@ -249,4 +149,4 @@ The files will automatically be enqueued when specified in the block.json.

This guide showed a couple of different ways to apply styles to your block, by either inline or in its own style sheet. Both of these methods use the `useBlockProps` hook, see the [block wrapper reference documentation](/docs/reference-guides/block-api/block-edit-save.md#block-wrapper-props) for additional details.

See the complete [example-02-stylesheets](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-non-jsx/02-stylesheets) code in the [gutenberg-examples repository](https://github.com/WordPress/gutenberg-examples).
See the complete [stylesheets-79a4c3](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/stylesheets-79a4c3) code in the [block-development-examples repository](https://github.com/WordPress/block-development-examples).
92 changes: 0 additions & 92 deletions docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ When the user selects a block, a number of control buttons may be shown in a too

You can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar.

{% codetabs %}
{% JSX %}

```jsx
import { registerBlockType } from '@wordpress/blocks';

Expand Down Expand Up @@ -92,95 +89,6 @@ registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
} );
```

{% Plain %}

```js
( function ( blocks, blockEditor, React ) {
var el = React.createElement;
var RichText = blockEditor.RichText;
var AlignmentToolbar = blockEditor.AlignmentToolbar;
var BlockControls = blockEditor.BlockControls;
var useBlockProps = blockEditor.useBlockProps;

blocks.registerBlockType( 'gutenberg-examples/example-04-controls', {
title: 'Example: Controls',
icon: 'universal-access-alt',
category: 'design',

attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p',
},
alignment: {
type: 'string',
default: 'none',
},
},
example: {
attributes: {
content: 'Hello World',
alignment: 'right',
},
},
edit: function ( props ) {
var content = props.attributes.content;
var alignment = props.attributes.alignment;

function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}

function onChangeAlignment( newAlignment ) {
props.setAttributes( {
alignment:
newAlignment === undefined ? 'none' : newAlignment,
} );
}

return el(
'div',
useBlockProps(),
el(
BlockControls,
{ key: 'controls' },
el( AlignmentToolbar, {
value: alignment,
onChange: onChangeAlignment,
} )
),
el( RichText, {
key: 'richtext',
tagName: 'p',
style: { textAlign: alignment },
onChange: onChangeContent,
value: content,
} )
);
},

save: function ( props ) {
var blockProps = useBlockProps.save();

return el(
'div',
blockProps,
el( RichText.Content, {
tagName: 'p',
className:
'gutenberg-examples-align-' +
props.attributes.alignment,
value: props.attributes.content,
} )
);
},
} );
} )( window.wp.blocks, window.wp.blockEditor, window.React );
```

{% end %}

Note that `BlockControls` is only visible when the block is currently selected and in visual editing mode. `BlockControls` are not shown when editing a block in HTML editing mode.

## Settings Sidebar
Expand Down
61 changes: 0 additions & 61 deletions docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ Let's take the block we wrote in the previous chapter (example 3) and with just

Here's the exact same code we used to register the block previously.

{% codetabs %}
{% JSX %}

```jsx
import { registerBlockType } from '@wordpress/blocks';
Expand Down Expand Up @@ -64,65 +62,6 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
} );
```

{% Plain %}

```js
( function ( blocks, blockEditor, React ) {
var el = React.createElement;
var RichText = blockEditor.RichText;
var useBlockProps = blockEditor.useBlockProps;

blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
apiVersion: 3,
title: 'Example: Basic with block supports',
icon: 'universal-access-alt',
category: 'design',

attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p',
},
},
example: {
attributes: {
content: 'Hello World',
},
},
edit: function ( props ) {
var blockProps = useBlockProps();
var content = props.attributes.content;
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}

return el(
RichText,
Object.assign( blockProps, {
tagName: 'p',
onChange: onChangeContent,
value: content,
} )
);
},

save: function ( props ) {
var blockProps = useBlockProps.save();
return el(
RichText.Content,
Object.assign( blockProps, {
tagName: 'p',
value: props.attributes.content,
} )
);
},
} );
} )( window.wp.blocks, window.wp.blockEditor, window.React );
```

{% end %}

Now, let's alter the block.json file for that block, and add the supports key. (If you're not using a block.json file, you can also add the key to the `registerBlockType` function call)

```json
Expand Down
Loading

0 comments on commit 39bbb7f

Please sign in to comment.