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

Jump to bottom

Add a filter('editor.FeaturedImage') for the FeaturedImage component #6940

Merged
merged 5 commits into from Jul 11, 2018
Merged

Add a filter('editor.FeaturedImage') for the FeaturedImage component #6940

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c1b72c9
Add a filter for editor.FeaturedImage
May 24, 2018
904658a
move filter to PostFeaturedImage
Jul 3, 2018
396d4e6
Add a PostFeaturedImage readme, first pass
Jul 6, 2018
4e10ade
update readme
Jul 6, 2018
a7f4269
Components: Improve docs for PostFeaturedImage
gziolo Jul 11, 2018
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
47 changes: 47 additions & 0 deletions editor/components/post-featured-image/README.md
View file
Open in desktop
@@ -0,0 +1,47 @@
PostFeaturedImage
===========

PostFeaturedImage is a React component used to render the Post Featured Image selection tool.
It includes a `wp.hooks` filter `editor.PostFeaturedImage` that enables developers to replace or extend it.

## Examples
Replace the contents of the panel:

```js
wp.hooks.addFilter(
'editor.PostFeaturedImage',
'myplugin/myhook',
function() {
return function() {
return wp.element.createElement(
'div',
{},
'The replacement contents or components.'
);
}
}
);
```

Prepend/Append to the panel contents:
```js
wp.hooks.addFilter(
'editor.PostFeaturedImage',
'myplugin/myhook',
function( original ) {
return function() {
return (
wp.element.createElement(
'div',
{ key: 'outer' + Math.random() },
Copy link
Member

Choose a reason for hiding this comment

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

This is confusing to use random here. I think you don't need it at all. I also wanted to note that you probably can refactor it as:

const el = wp.element.createElement;

el( 
	'div', 
	{}, 
	'Prepend above',
	el( OriginalComponent, props ),
	'Append below' 
)

Copy link
Member Author

Choose a reason for hiding this comment

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

right, that was bad! thanks for fixing that and cleanup generally.

[
'Prepend above',
_.extend( original( {} ), { key: 'my-key' } ),
'Append below'
]
)
);
}
}
);
```
3 changes: 2 additions & 1 deletion editor/components/post-featured-image/index.js
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ import { get } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Spinner, ResponsiveWrapper } from '@wordpress/components';
import { Button, Spinner, ResponsiveWrapper, withFilters } from '@wordpress/components';
import { compose } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';

Expand Down Expand Up @@ -114,4 +114,5 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
export default compose(
applyWithSelect,
applyWithDispatch,
withFilters( 'editor.PostFeaturedImage' ),
)( PostFeaturedImage );