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

Editor: Rename all the hooks moved from blocks to editor #7410

Merged
merged 4 commits into from
Jun 21, 2018
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions blocks/deprecated-hooks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* External dependencies
*/
import { includes } from 'lodash';

/**
* WordPress dependencies
*/
import { addAction, addFilter } from '@wordpress/hooks';
import deprecated from '@wordpress/deprecated';

const forwardDeprecatedHooks = ( oldHookName, ...args ) => {
const deprecatedHooks = [
'blocks.Autocomplete.completers',
'blocks.BlockEdit',
'blocks.BlockListBlock',
'blocks.MediaUpload',
];
if ( includes( deprecatedHooks, oldHookName ) ) {
const newHookName = oldHookName.replace( 'blocks.', 'editor.' );
deprecated( `${ oldHookName } filter`, {
version: '3.3',
alternative: newHookName,
} );
addFilter( newHookName, ...args );
}
};

addAction( 'hookAdded', 'core/editor/deprecated', forwardDeprecatedHooks );
1 change: 1 addition & 0 deletions blocks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
//
// Blocks are inferred from the HTML source of a post through a parsing mechanism
// and then stored as objects in state, from which it is then rendered for editing.
import './deprecated-hooks';
import './store';
export * from './api';
8 changes: 4 additions & 4 deletions docs/extensibility/autocomplete.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Autocomplete
============

Gutenberg provides a `blocks.Autocomplete.completers` filter for extending and overriding the list of autocompleters used by blocks.
Gutenberg provides a `editor.Autocomplete.completers` filter for extending and overriding the list of autocompleters used by blocks.

The `Autocomplete` component found in `@wordpress/editor` applies this filter. The `@wordpress/components` package provides the foundational `Autocomplete` component that does not apply such a filter, but blocks should generally use the component provided by `@wordpress/editor`.

### Example

Here is an example of using the `blocks.Autocomplete.completers` filter to add an acronym completer. You can find full documentation for the autocompleter interface with the `Autocomplete` component in the `@wordpress/components` package.
Here is an example of using the `editor.Autocomplete.completers` filter to add an acronym completer. You can find full documentation for the autocompleter interface with the `Autocomplete` component in the `@wordpress/components` package.

{% codetabs %}
{% ES5 %}
Expand Down Expand Up @@ -46,7 +46,7 @@ function appendAcronymCompleter( completers, blockName ) {

// Adding the filter
wp.hooks.addFilter(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
'my-plugin/autocompleters/acronyms',
appendAcronymCompleter
);
Expand Down Expand Up @@ -81,7 +81,7 @@ function appendAcronymCompleter( completers, blockName ) {

// Adding the filter
wp.hooks.addFilter(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
'my-plugin/autocompleters/acronym',
appendAcronymCompleter
);
Expand Down
73 changes: 69 additions & 4 deletions docs/extensibility/extending-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,6 @@ To modify the behavior of existing blocks, Gutenberg exposes the following Filte

Used to filter the block settings. It receives the block settings and the name of the block the registered block as arguments.

#### `blocks.BlockEdit`

Used to modify the block's `edit` component. It receives the original block `edit` component and returns a new wrapped component.

#### `blocks.getSaveElement`

A filter that applies to the result of a block's `save` function. This filter is used to replace or extend the element, for example using `wp.element.cloneElement` to modify the element's props or replace its children, or returning an entirely new element.
Expand Down Expand Up @@ -70,6 +66,75 @@ Used internally by the default block (paragraph) to exclude the attributes from

Used to filters an individual transform result from block transformation. All of the original blocks are passed, since transformations are many-to-many, not one-to-one.

#### `editor.BlockEdit`

Used to modify the block's `edit` component. It receives the original block `BlockEdit` component and returns a new wrapped component.

_Example:_

```js
var el = wp.element.createElement;

var withInspectorControls = wp.element.createHigherOrderComponent( function( BlockEdit ) {
return function( props ) {
return el(
wp.element.Fragment,
{},
el(
BlockEdit,
props
),
el(
wp.editor.InspectorControls,
{},
el(
wp.components.PanelBody,
{},
'My custom control'
)
)
);
};
}, 'withInspectorControls' );

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );
```

#### `editor.BlockListBlock`

Used to modify the block's wrapper component containing the block's `edit` component and all toolbars. It receives the original `BlockListBlock` component and returns a new wrapped component.

_Example:_

```js
var el = wp.element.createElement;

var withDataAlign = wp.element.createHigherOrderComponent( function( BlockListBlock ) {
return function( props ) {
var newProps = Object.assign(
{},
props,
{
wrapperProps: Object.assign(
{},
props.wrapperProps,
{
'data-align': props.block.attributes.align
}
)
}
);

return el(
BlockListBlock,
newProps
);
};
}, 'withAlign' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', withDataAlign );
```

## Removing Blocks

### Using a blacklist
Expand Down
22 changes: 13 additions & 9 deletions docs/reference/deprecated.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,19 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo

- `useOnce: true` has been removed from the Block API. Please use `supports.multiple: false` instead.
- Serializing components using `componentWillMount` lifecycle method. Please use the constructor instead.
- `blocks.Autocomplete.completers` filter removed. Please use `editor.Autocomplete.completers` instead.
- `blocks.BlockEdit` filter removed. Please use `editor.BlockEdit` instead.
- `blocks.BlockListBlock` filter removed. Please use `editor.BlockListBlock` instead.
- `blocks.MediaUpload` filter removed. Please use `editor.MediaUpload` instead.

## 3.2.0

- `wp.data.withRehydratation` has been renamed to `wp.data.withRehydration`.
- The `wp.editor.ImagePlaceholder` component is removed. Please use `wp.editor.MediaPlaceholder` instead.
- `wp.utils.deprecated` function removed. Please use `wp.deprecated` instead.
- `getInserterItems`: the `allowedBlockTypes` argument was removed and the `parentUID` argument was added.
- `getFrecentInserterItems` selector removed. Please use `getInserterItems` instead.
- `getSupportedBlocks` selector removed. Please use `canInsertBlockType` instead.
- `getInserterItems`: the `allowedBlockTypes` argument was removed and the `parentUID` argument was added.
- `getFrecentInserterItems` selector removed. Please use `getInserterItems` instead.
- `getSupportedBlocks` selector removed. Please use `canInsertBlockType` instead.

## 3.1.0

Expand All @@ -24,18 +28,18 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo

## 3.0.0

- `wp.blocks.registerCoreBlocks` function removed. Please use `wp.coreBlocks.registerCoreBlocks` instead.
- Raw TinyMCE event handlers for `RichText` have been deprecated. Please use [documented props](https://wordpress.org/gutenberg/handbook/block-api/rich-text-api/), ancestor event handler, or onSetup access to the internal editor instance event hub instead.
- `wp.blocks.registerCoreBlocks` function removed. Please use `wp.coreBlocks.registerCoreBlocks` instead.
- Raw TinyMCE event handlers for `RichText` have been deprecated. Please use [documented props](https://wordpress.org/gutenberg/handbook/block-api/rich-text-api/), ancestor event handler, or onSetup access to the internal editor instance event hub instead.

## 2.8.0

- `Original autocompleter interface in wp.components.Autocomplete` updated. Please use `latest autocompleter interface` instead. See: https://github.com/WordPress/gutenberg/blob/master/components/autocomplete/README.md.
- `getInserterItems`: the `allowedBlockTypes` argument is now mandatory.
- `getFrecentInserterItems`: the `allowedBlockTypes` argument is now mandatory.
- `Original autocompleter interface in wp.components.Autocomplete` updated. Please use `latest autocompleter interface` instead. See: https://github.com/WordPress/gutenberg/blob/master/components/autocomplete/README.md.
- `getInserterItems`: the `allowedBlockTypes` argument is now mandatory.
- `getFrecentInserterItems`: the `allowedBlockTypes` argument is now mandatory.

## 2.7.0

- `wp.element.getWrapperDisplayName` function removed. Please use `wp.element.createHigherOrderComponent` instead.
- `wp.element.getWrapperDisplayName` function removed. Please use `wp.element.createHigherOrderComponent` instead.

## 2.6.0

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import MediaUpload from './media-upload';
const replaceMediaUpload = () => MediaUpload;

addFilter(
'blocks.MediaUpload',
'core/edit-post/blocks/media-upload/replaceMediaUpload',
'editor.MediaUpload',
'core/edit-post/components/media-upload/replace-media-upload',
replaceMediaUpload
);
2 changes: 1 addition & 1 deletion edit-post/hooks/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Internal dependencies
*/
import './blocks';
import './components';
import './more-menu';
import './validate-multiple-use';
4 changes: 2 additions & 2 deletions edit-post/hooks/validate-multiple-use/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ function getOutboundType( blockName ) {
}

addFilter(
'blocks.BlockEdit',
'core/validation/multiple',
'editor.BlockEdit',
'core/edit-post/validate-multiple-use/with-multiple-validation',
withMultipleValidation
);
2 changes: 1 addition & 1 deletion editor/components/autocomplete/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Autocomplete
============

This is an Autocomplete component for use in block UI. It is based on `Autocomplete` from `@wordpress/components` and takes the same props. In addition, it passes its autocompleters through a `blocks.Autocomplete.completers` filter to give developers an opportunity to override or extend them.
This is an Autocomplete component for use in block UI. It is based on `Autocomplete` from `@wordpress/components` and takes the same props. In addition, it passes its autocompleters through a `editor.Autocomplete.completers` filter to give developers an opportunity to override or extend them.

The autocompleter interface is documented with the original `Autocomplete` component in `@wordpress/components`.
5 changes: 2 additions & 3 deletions editor/components/autocomplete/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,9 @@ export function withFilteredAutocompleters( Autocomplete ) {
let nextCompleters = completers;
const lastFilteredCompletersProp = nextCompleters;

// Todo: Rename filter
if ( hasFilter( 'blocks.Autocomplete.completers' ) ) {
if ( hasFilter( 'editor.Autocomplete.completers' ) ) {
nextCompleters = applyFilters(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
// Provide copies so filters may directly modify them.
nextCompleters && nextCompleters.map( clone ),
blockName,
Expand Down
10 changes: 5 additions & 5 deletions editor/components/autocomplete/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe( 'Autocomplete', () => {
let wrapper = null;

afterEach( () => {
removeFilter( 'blocks.Autocomplete.completers', 'test/autocompleters-hook' );
removeFilter( 'editor.Autocomplete.completers', 'test/autocompleters-hook' );

if ( wrapper ) {
wrapper.unmount();
Expand All @@ -34,7 +34,7 @@ describe( 'Autocomplete', () => {
it( 'filters supplied completers when next focused', () => {
const completersFilter = jest.fn();
addFilter(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
'test/autocompleters-hook',
completersFilter
);
Expand All @@ -55,7 +55,7 @@ describe( 'Autocomplete', () => {

const completersFilter = jest.fn();
addFilter(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
'test/autocompleters-hook',
completersFilter
);
Expand All @@ -70,7 +70,7 @@ describe( 'Autocomplete', () => {
it( 'provides copies of completers to filter', () => {
const completersFilter = jest.fn();
addFilter(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
'test/autocompleters-hook',
completersFilter
);
Expand All @@ -91,7 +91,7 @@ describe( 'Autocomplete', () => {
const expectedFilteredCompleters = [ {}, {} ];
const completersFilter = jest.fn( () => expectedFilteredCompleters );
addFilter(
'blocks.Autocomplete.completers',
'editor.Autocomplete.completers',
'test/autocompleters-hook',
completersFilter
);
Expand Down
2 changes: 1 addition & 1 deletion editor/components/block-edit/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@ export const Edit = ( props ) => {
);
};

export default withFilters( 'blocks.BlockEdit' )( Edit );
export default withFilters( 'editor.BlockEdit' )( Edit );
4 changes: 2 additions & 2 deletions editor/components/media-upload/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import MediaUpload from './media-upload';
const replaceMediaUpload = () => MediaUpload;

addFilter(
'blocks.MediaUpload',
'core/edit-post/blocks/media-upload/replaceMediaUpload',
'editor.MediaUpload',
'core/edit-post/components/media-upload/replace-media-upload',
replaceMediaUpload
);
```
Expand Down
4 changes: 2 additions & 2 deletions editor/components/media-upload/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { withFilters } from '@wordpress/components';
/**
* This is a placeholder for the media upload component necessary to make it possible to provide
* an integration with the core blocks that handle media files. By default it renders nothing but
* it provides a way to have it overridden with the `blocks.MediaUpload` filter.
* it provides a way to have it overridden with the `editor.MediaUpload` filter.
*
* @return {WPElement} Media upload element.
*/
const MediaUpload = () => null;

// Todo: rename the filter
export default withFilters( 'blocks.MediaUpload' )( MediaUpload );
export default withFilters( 'editor.MediaUpload' )( MediaUpload );
8 changes: 4 additions & 4 deletions editor/hooks/align.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const withToolbarControls = createHigherOrderComponent( ( BlockEdit ) =>
* @param {Function} BlockListBlock Original component
* @return {Function} Wrapped component
*/
export const withAlign = createHigherOrderComponent( ( BlockListBlock ) => {
export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
const { align } = props.block.attributes;
const validAlignments = getBlockValidAlignments( props.block.name );
Expand All @@ -109,7 +109,7 @@ export const withAlign = createHigherOrderComponent( ( BlockListBlock ) => {

return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
};
}, 'withAlign' );
}, 'withDataAlign' );

/**
* Override props assigned to save component to inject alignment class name if
Expand All @@ -131,7 +131,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
}

addFilter( 'blocks.registerBlockType', 'core/align/addAttribute', addAttribute );
addFilter( 'editor.BlockListBlock', 'core/align/withAlign', withAlign );
addFilter( 'blocks.BlockEdit', 'core/align/withToolbarControls', withToolbarControls );
addFilter( 'editor.BlockListBlock', 'core/editor/align/with-data-align', withDataAlign );
addFilter( 'editor.BlockEdit', 'core/editor/align/with-toolbar-controls', withToolbarControls );
addFilter( 'blocks.getSaveContent.extraProps', 'core/align/addAssignedAlign', addAssignedAlign );

2 changes: 1 addition & 1 deletion editor/hooks/anchor.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,5 @@ export function addSaveProps( extraProps, blockType, attributes ) {
}

addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
addFilter( 'blocks.BlockEdit', 'core/anchor/inspector-control', withInspectorControl );
addFilter( 'editor.BlockEdit', 'core/editor/anchor/with-inspector-control', withInspectorControl );
addFilter( 'blocks.getSaveContent.extraProps', 'core/anchor/save-props', addSaveProps );
2 changes: 1 addition & 1 deletion editor/hooks/custom-class-name.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,5 +94,5 @@ export function addSaveProps( extraProps, blockType, attributes ) {
}

addFilter( 'blocks.registerBlockType', 'core/custom-class-name/attribute', addAttribute );
addFilter( 'blocks.BlockEdit', 'core/custom-class-name/inspector-control', withInspectorControl );
addFilter( 'editor.BlockEdit', 'core/editor/custom-class-name/with-inspector-control', withInspectorControl );
addFilter( 'blocks.getSaveContent.extraProps', 'core/custom-class-name/save-props', addSaveProps );
4 changes: 2 additions & 2 deletions editor/hooks/default-autocompleters.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function setDefaultCompleters( completers, blockName ) {
}

addFilter(
'blocks.Autocomplete.completers',
'blocks/autocompleters/set-default-completers',
'editor.Autocomplete.completers',
'editor/autocompleters/set-default-completers',
setDefaultCompleters
);
Loading