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

Try: Preact #2734

Closed
wants to merge 5 commits into from
Closed

Try: Preact #2734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9b4e07
Try preact
youknowriad Sep 7, 2017
f45e4ba
Avoid using element fragments in blocks
youknowriad Sep 8, 2017
b699cf5
Small element fixes
youknowriad Sep 8, 2017
3379e61
Fork react-click-outside into WithClickOutside
mcsf Sep 14, 2017
acf0b64
Replace usage of react-click-outside with WithClickOutside
mcsf Sep 14, 2017
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
4 changes: 2 additions & 2 deletions blocks/editable/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { pick, noop } from 'lodash';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { Component, Children } from '@wordpress/element';
Copy link
Member

Choose a reason for hiding this comment

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

Can we avoid the Children utility and instead leverage the fact that children is an array in Preact, i.e.

// Before:
Children.only( this.props.children );

// After:
this.props.children[ 0 ];

I think it would be good if we avoid Children altogether.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's the exact same thing, the inner implementation is the same, but I can see that this enables to drop preact-compat at some moment.


/**
* The Editable Provider allows a rendering context to define global behaviors
Expand All @@ -23,7 +23,7 @@ class EditableProvider extends Component {
}

render() {
return this.props.children;
return Children.only( this.props.children );
}
}

Expand Down
18 changes: 9 additions & 9 deletions blocks/library/audio/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ registerBlockType( 'core/audio', {
};
const controls = (
focus && (
<BlockControls key="controls">
<BlockControls>
<BlockAlignmentToolbar
value={ align }
onChange={ updateAlignment }
Expand All @@ -106,7 +106,7 @@ registerBlockType( 'core/audio', {
);

if ( editing ) {
return [
return (
<Placeholder
key="placeholder"
icon="media-audio"
Expand All @@ -133,17 +133,17 @@ registerBlockType( 'core/audio', {
>
{ __( 'Insert from Media Library' ) }
</MediaUploadButton>
</Placeholder>,
];
</Placeholder>
);
}

/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
return [
controls,
<div key="audio">
return (
Copy link
Member

Choose a reason for hiding this comment

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

While it means we can't treat edit as a component proper (i.e. assigned as class extends Component, which we don't support well for save anyways), I think we could still potentially support array returns by wrapping the return value from the function from the block rendering handler. That or if we identify common characteristics of a block "container", we could create a wrapper component like <Block> for the block implementer to use.

<div>
{ controls }
<audio controls="controls" src={ src } />
</div>,
];
</div>
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
}
},
Expand Down
18 changes: 9 additions & 9 deletions blocks/library/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@ registerBlockType( 'core/button', {
const { text, url, title, align, color } = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );

return [
focus && (
<BlockControls key="controls">
<BlockAlignmentToolbar value={ align } onChange={ updateAlignment } />
</BlockControls>
),
<span key="button" className={ className } title={ title } style={ { backgroundColor: color } } >
return (
<span className={ className } title={ title } style={ { backgroundColor: color } } >
{ focus && (
<BlockControls>
<BlockAlignmentToolbar value={ align } onChange={ updateAlignment } />
</BlockControls>
) }
<Editable
tagName="span"
placeholder={ __( 'Write label…' ) }
Expand Down Expand Up @@ -100,8 +100,8 @@ registerBlockType( 'core/button', {
/>
</InspectorControls>
}
</span>,
];
</span>
);
},

save( { attributes } ) {
Expand Down
84 changes: 42 additions & 42 deletions blocks/library/categories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ registerBlockType( 'core/categories', {

return (
<select className={ `${ this.props.className }__dropdown` }>
{ categories.map( category => this.renderCategoryDropdownItem( category, 0 ) ) }
{ categories.reduce( ( memo, category ) => memo.concat( this.renderCategoryDropdownItem( category, 0 ) ), [] ) }
</select>
);
}
Expand All @@ -185,9 +185,9 @@ registerBlockType( 'core/categories', {
: ''
}
</option>,
showHierarchy &&
!! childCategories.length && (
childCategories.map( childCategory => this.renderCategoryDropdownItem( childCategory, level + 1 ) )
...( showHierarchy && !! childCategories.length
? childCategories.map( childCategory => this.renderCategoryDropdownItem( childCategory, level + 1 ) )
: []
),
];
}
Expand All @@ -210,49 +210,49 @@ registerBlockType( 'core/categories', {
const { focus } = this.props;
const { align, displayAsDropdown, showHierarchy, showPostCounts } = this.props.attributes;

return [
focus && (
<BlockControls key="controls">
<BlockAlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
controls={ [ 'left', 'center', 'right', 'full' ] }
/>
</BlockControls>
),
focus && (
<InspectorControls key="inspector">
<BlockDescription>
<p>{ __( 'Shows a list of your site\'s categories.' ) }</p>
</BlockDescription>
<h3>{ __( 'Categories Settings' ) }</h3>
<ToggleControl
label={ __( 'Display as dropdown' ) }
checked={ displayAsDropdown }
onChange={ this.toggleDisplayAsDropdown }
/>
<ToggleControl
label={ __( 'Show post counts' ) }
checked={ showPostCounts }
onChange={ this.toggleShowPostCounts }
/>
<ToggleControl
label={ __( 'Show hierarchy' ) }
checked={ showHierarchy }
onChange={ this.toggleShowHierarchy }
/>
</InspectorControls>
),
<div key="categories" className={ this.props.className }>
return (
<div className={ this.props.className }>
{ focus && (
<BlockControls>
<BlockAlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
controls={ [ 'left', 'center', 'right', 'full' ] }
/>
</BlockControls>
) }
{ focus && (
<InspectorControls>
<BlockDescription>
<p>{ __( 'Shows a list of your site\'s categories.' ) }</p>
</BlockDescription>
<h3>{ __( 'Categories Settings' ) }</h3>
<ToggleControl
label={ __( 'Display as dropdown' ) }
checked={ displayAsDropdown }
onChange={ this.toggleDisplayAsDropdown }
/>
<ToggleControl
label={ __( 'Show post counts' ) }
checked={ showPostCounts }
onChange={ this.toggleShowPostCounts }
/>
<ToggleControl
label={ __( 'Show hierarchy' ) }
checked={ showHierarchy }
onChange={ this.toggleShowHierarchy }
/>
</InspectorControls>
) }
{
displayAsDropdown
? this.renderCategoryDropdown()
: this.renderCategoryList()
}
</div>,
];
</div>
);
}
},

Expand Down
18 changes: 8 additions & 10 deletions blocks/library/cover-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,33 +118,31 @@ registerBlockType( 'core/cover-image', {

if ( ! url ) {
const uploadButtonProps = { isLarge: true };
return [
controls,
return (
<Placeholder
key="placeholder"
instructions={ __( 'Drag image here or insert from media library' ) }
icon="format-image"
label={ __( 'Cover Image' ) }
className={ className }>
{ controls }
<MediaUploadButton
buttonProps={ uploadButtonProps }
onSelect={ onSelectImage }
type="image"
>
{ __( 'Insert from Media Library' ) }
</MediaUploadButton>
</Placeholder>,
];
</Placeholder>
);
}

return [
controls,
return (
<section
key="preview"
data-url={ url }
style={ style }
className={ classes }
>
{ controls }
{ title || !! focus ? (
<Editable
tagName="h2"
Expand All @@ -156,8 +154,8 @@ registerBlockType( 'core/cover-image', {
inlineToolbar
/>
) : null }
</section>,
];
</section>
);
},

save( { attributes, className } ) {
Expand Down
46 changes: 22 additions & 24 deletions blocks/library/embed/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,33 +133,31 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
const { setAttributes, focus, setFocus } = this.props;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );

const controls = (
focus && (
<BlockControls key="controls">
<BlockAlignmentToolbar
value={ align }
onChange={ updateAlignment }
/>
</BlockControls>
)
const controls = focus && (
<BlockControls>
<BlockAlignmentToolbar
value={ align }
onChange={ updateAlignment }
/>
</BlockControls>
);

if ( fetching ) {
return [
controls,
<div key="loading" className="wp-block-embed is-loading">
return (
<div className="wp-block-embed is-loading">
{ controls }
<Spinner />
<p>{ __( 'Embedding…' ) }</p>
</div>,
];
</div>
);
}

if ( ! html ) {
const label = sprintf( __( '%s URL' ), title );

return [
controls,
<Placeholder key="placeholder" icon={ icon } label={ label } className="wp-block-embed">
return (
<Placeholder icon={ icon } label={ label } className="wp-block-embed">
{ controls }
<form onSubmit={ this.doServerSideRender }>
<input
type="url"
Expand All @@ -175,8 +173,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
</Button>
{ error && <p className="components-placeholder__error">{ __( 'Sorry, we could not embed that content.' ) }</p> }
</form>
</Placeholder>,
];
</Placeholder>
);
}

const parsedUrl = parse( url );
Expand All @@ -187,9 +185,9 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
typeClassName += ' is-video';
}

return [
controls,
<figure key="embed" className={ typeClassName }>
return (
<figure className={ typeClassName }>
{ controls }
{ ( cannotPreview ) ? (
<Placeholder icon={ icon } label={ __( 'Embed URL' ) }>
<p className="components-placeholder__error"><a href={ url }>{ url }</a></p>
Expand All @@ -211,8 +209,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
inlineToolbar
/>
) : null }
</figure>,
];
</figure>
);
}
},

Expand Down
26 changes: 13 additions & 13 deletions blocks/library/freeform/old-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,18 +159,18 @@ export default class OldEditor extends Component {
render() {
const { id } = this.props;

return [
<div
key="toolbar"
id={ id + '-toolbar' }
ref={ ref => this.ref = ref }
className="freeform-toolbar"
/>,
<div
key="editor"
id={ id }
className="blocks-editable__tinymce"
/>,
];
return (
<div>
<div
id={ id + '-toolbar' }
ref={ ref => this.ref = ref }
className="freeform-toolbar"
/>,
Copy link
Member

Choose a reason for hiding this comment

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

Comma here will be output as a string.

<div
id={ id }
className="blocks-editable__tinymce"
/>
</div>
);
}
}
Loading