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.

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

Blocks: Deprecate registerBlockTypeFromMetadata in favor of registerBlockType #32030

Merged
merged 1 commit into from May 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/how-to-guides/backward-compatibility/deprecations.md
Expand Up @@ -2,6 +2,10 @@

For features included in the Gutenberg plugin, the deprecation policy is intended to support backward compatibility for two minor plugin releases, when possible. Features and code included in a stable release of WordPress are not included in this deprecation timeline, and are instead subject to the [versioning policies of the WordPress project](https://make.wordpress.org/core/handbook/about/release-cycle/version-numbering/). The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.

## 11.0.0

- `wp.blocks.registerBlockTypeFromMetadata` method has been removed. Use `wp.blocks.registerBlockType` method instead.

## 10.3.0

- Passing a tuple of components with `as` prop to `ActionItem.Slot` component is no longer supported. Please pass a component with `as` prop instead. Example:
Expand Down
6 changes: 3 additions & 3 deletions docs/reference-guides/block-api/block-metadata.md
Expand Up @@ -470,16 +470,16 @@ Implementation follows the existing [get_plugin_data](https://codex.wordpress.or

### JavaScript

In JavaScript, you need to use `registerBlockTypeFromMetadata` method from `@wordpress/blocks` package to process loaded block metadata. All localized properties get automatically wrapped in `_x` (from `@wordpress/i18n` package) function calls similar to how it works in PHP.
In JavaScript, you can use `registerBlockType` method from `@wordpress/blocks` package and pass the metadata object loaded from `block.json` as the first param. All localized properties get automatically wrapped in `_x` (from `@wordpress/i18n` package) function calls similar to how it works in PHP.

**Example:**

```js
import { registerBlockTypeFromMetadata } from '@wordpress/blocks';
import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import metadata from './block.json';

registerBlockTypeFromMetadata( metadata, {
registerBlockType( metadata, {
edit: Edit,
// ...other client-side settings
} );
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/index.js
Expand Up @@ -4,7 +4,7 @@
import '@wordpress/core-data';
import '@wordpress/block-editor';
import {
registerBlockTypeFromMetadata,
registerBlockType,
setDefaultBlockName,
setFreeformContentHandlerName,
setUnregisteredTypeHandlerName,
Expand Down Expand Up @@ -105,7 +105,7 @@ const registerBlock = ( block ) => {
return;
}
const { metadata, settings, name } = block;
registerBlockTypeFromMetadata( { name, ...metadata }, settings );
registerBlockType( { name, ...metadata }, settings );
};

/**
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/index.native.js
Expand Up @@ -10,7 +10,6 @@ import { sortBy } from 'lodash';
import {
hasBlockSupport,
registerBlockType,
registerBlockTypeFromMetadata,
setDefaultBlockName,
setFreeformContentHandlerName,
setUnregisteredTypeHandlerName,
Expand Down Expand Up @@ -128,7 +127,7 @@ const registerBlock = ( block ) => {
return;
}
const { metadata, settings, name } = block;
registerBlockTypeFromMetadata(
registerBlockType(
{
name,
...metadata,
Expand Down
8 changes: 8 additions & 0 deletions packages/blocks/CHANGELOG.md
Expand Up @@ -2,6 +2,14 @@

## Unreleased

### New API

- `registerBlockType` method can be used to register a block type using the metadata loaded from `block.json` file ([#32030](https://github.com/WordPress/gutenberg/pull/32030)).

### Deprecations

- `registerBlockTypeFromMetadata` was deprecated in favor of `registerBlockType` that support now the same functionality ([#32030](https://github.com/WordPress/gutenberg/pull/32030)).

## 9.0.0 (2021-05-14)

### Breaking Changes
Expand Down
11 changes: 3 additions & 8 deletions packages/blocks/README.md
Expand Up @@ -706,7 +706,7 @@ editor interface where blocks are implemented.

_Parameters_

- _name_ `string`: Block name.
- _blockNameOrMetadata_ `string|Object`: Block type name or its metadata.
- _settings_ `Object`: Block settings.

_Returns_
Expand All @@ -715,18 +715,13 @@ _Returns_

<a name="registerBlockTypeFromMetadata" href="#registerBlockTypeFromMetadata">#</a> **registerBlockTypeFromMetadata**

Registers a new block provided from metadata stored in `block.json` file.
It uses `registerBlockType` internally.
> **Deprecated** Use `registerBlockType` instead.

_Related_

- registerBlockType
Registers a new block provided from metadata stored in `block.json` file.

_Parameters_

- _metadata_ `Object`: Block metadata loaded from `block.json`.
- _metadata.name_ `string`: Block name.
- _metadata.textdomain_ `string`: Textdomain to use with translations.
- _additionalSettings_ `Object`: Additional block settings.

_Returns_
Expand Down
122 changes: 71 additions & 51 deletions packages/blocks/src/api/registration.js
Expand Up @@ -22,6 +22,7 @@ import {
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
import { applyFilters } from '@wordpress/hooks';
import { select, dispatch } from '@wordpress/data';
import { _x } from '@wordpress/i18n';
Expand Down Expand Up @@ -192,18 +193,77 @@ export function unstable__bootstrapServerSideBlockDefinitions( definitions ) {
}
}

/**
* Gets block settings from metadata loaded from `block.json` file.
*
* @param {Object} metadata Block metadata loaded from `block.json`.
* @param {string} metadata.textdomain Textdomain to use with translations.
*
* @return {Object} Block settings.
*/
function getBlockSettingsFromMetadata( { textdomain, ...metadata } ) {
const allowedFields = [
'apiVersion',
'title',
'category',
'parent',
'icon',
'description',
'keywords',
'attributes',
'providesContext',
'usesContext',
'supports',
'styles',
'example',
'variations',
];

const settings = pick( metadata, allowedFields );

if ( textdomain ) {
Object.keys( i18nBlockSchema ).forEach( ( key ) => {
if ( ! settings[ key ] ) {
return;
}
settings[ key ] = translateBlockSettingUsingI18nSchema(
i18nBlockSchema[ key ],
settings[ key ],
textdomain
);
} );
}

return settings;
}

/**
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made available as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @param {string|Object} blockNameOrMetadata Block type name or its metadata.
* @param {Object} settings Block settings.
*
* @return {?WPBlock} The block, if it has been successfully registered;
* otherwise `undefined`.
*/
export function registerBlockType( name, settings ) {
export function registerBlockType( blockNameOrMetadata, settings ) {
const name = isObject( blockNameOrMetadata )
? blockNameOrMetadata.name
: blockNameOrMetadata;

if ( typeof name !== 'string' ) {
console.error( 'Block names must be strings.' );
return;
}

if ( isObject( blockNameOrMetadata ) ) {
unstable__bootstrapServerSideBlockDefinitions( {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This just fills serverSideBlockDefinitions that is used a few lines under right? In theory we could avoid it here right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the future, we could. At the moment it contains some backward compatibility logic for apiVersion.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

// We still need to polyfill `apiVersion` for WordPress version
// lower than 5.7. If it isn't present in the definition shared
// from the server, we try to fallback to the definition passed.
// @see https://github.com/WordPress/gutenberg/pull/29279
if (
serverSideBlockDefinitions[ blockName ].apiVersion ===
undefined &&
definitions[ blockName ].apiVersion
) {
serverSideBlockDefinitions[ blockName ].apiVersion =
definitions[ blockName ].apiVersion;
}

[ name ]: getBlockSettingsFromMetadata( blockNameOrMetadata ),
} );
}

settings = {
name,
icon: blockDefault,
Expand All @@ -218,10 +278,6 @@ export function registerBlockType( name, settings ) {
...settings,
};

if ( typeof name !== 'string' ) {
console.error( 'Block names must be strings.' );
return;
}
if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) {
console.error(
'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
Expand Down Expand Up @@ -370,59 +426,23 @@ function translateBlockSettingUsingI18nSchema(

/**
* Registers a new block provided from metadata stored in `block.json` file.
* It uses `registerBlockType` internally.
*
* @see registerBlockType
* @deprecated Use `registerBlockType` instead.
*
* @param {Object} metadata Block metadata loaded from `block.json`.
* @param {string} metadata.name Block name.
* @param {string} metadata.textdomain Textdomain to use with translations.
* @param {Object} additionalSettings Additional block settings.
*
* @return {?WPBlock} The block, if it has been successfully registered;
* otherwise `undefined`.
*/
export function registerBlockTypeFromMetadata(
{ name, textdomain, ...metadata },
additionalSettings
) {
const allowedFields = [
'apiVersion',
'title',
'category',
'parent',
'icon',
'description',
'keywords',
'attributes',
'providesContext',
'usesContext',
'supports',
'styles',
'example',
'variations',
];

const settings = pick( metadata, allowedFields );

if ( textdomain ) {
Object.keys( i18nBlockSchema ).forEach( ( key ) => {
if ( ! settings[ key ] ) {
return;
}
settings[ key ] = translateBlockSettingUsingI18nSchema(
i18nBlockSchema[ key ],
settings[ key ],
textdomain
);
} );
}

unstable__bootstrapServerSideBlockDefinitions( {
[ name ]: settings,
export function registerBlockTypeFromMetadata( metadata, additionalSettings ) {
deprecated( 'wp.blocks.registerBlockTypeFromMetadata', {
since: '10.7',
plugin: 'Gutenberg',
alternative: 'wp.blocks.registerBlockType',
version: '11.0',
} );

return registerBlockType( name, additionalSettings );
return registerBlockType( metadata, additionalSettings );
}

/**
Expand Down
7 changes: 2 additions & 5 deletions packages/blocks/src/api/test/registration.js
Expand Up @@ -17,7 +17,6 @@ import { blockDefault as blockIcon } from '@wordpress/icons';
*/
import {
registerBlockType,
registerBlockTypeFromMetadata,
registerBlockCollection,
unregisterBlockCollection,
unregisterBlockType,
Expand Down Expand Up @@ -801,12 +800,10 @@ describe( 'blocks', () => {
expect( block1.attributes ).not.toEqual( block2.attributes );
} );
} );
} );

describe( 'registerBlockTypeFromMetadata', () => {
test( 'registers block from metadata', () => {
const Edit = () => 'test';
const block = registerBlockTypeFromMetadata(
const block = registerBlockType(
{
name: 'test/block-from-metadata',
title: 'Block from metadata',
Expand Down Expand Up @@ -859,7 +856,7 @@ describe( 'blocks', () => {
);

const Edit = () => 'test';
const block = registerBlockTypeFromMetadata(
const block = registerBlockType(
{
name: 'test/block-from-metadata-i18n',
title: 'I18n title from metadata',
Expand Down