Skip to content
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.

Sign up for GitHub

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

Remove all {% codetabs %} instances and any vanilla JS references. #56121

Merged
merged 1 commit into from
Nov 17, 2023
Merged

Remove all {% codetabs %} instances and any vanilla JS references. #56121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 1 addition & 101 deletions docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
View file
Open in desktop
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
92 changes: 0 additions & 92 deletions docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md
View file
Open in desktop
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
Open in desktop
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
Loading