Skip to content

Commit

Permalink
Remove all {% codetabs %} instances and any vanilla JS references. (#…
Browse files Browse the repository at this point in the history 
…56121)
  • Loading branch information
@ryanwelcher
ryanwelcher authored Nov 17, 2023
1 parent be526cb commit b827bed
Show file tree
Hide file tree
Showing 19 changed files with 35 additions and 1,472 deletions.
100 changes: 0 additions & 100 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 Down
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 b827bed

Please sign in to comment.