Polish RSS block. (#21773)

* RSS block: use block.json * Use single quote string for consistency. * RSS block: refactor edit component to use hooks. * RSS block: update editor classes for consistency, Co-authored-by: Sören Wrede <soerenwrede@gmail.com>
WordPress · Apr 22, 2020 · df7315e · df7315e
1 parent 586e216
commit df7315e
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 186 deletions.
diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json
@@ -0,0 +1,45 @@
+{
+	"name": "core/rss",
+	"category": "widgets",
+	"attributes": {
+		"align": {
+			"type": "string",
+			"enum": [ "left", "center", "right", "wide", "full" ]
+		},
+		"className": {
+			"type": "string"
+		},
+		"columns": {
+			"type": "number",
+			"default": 2
+		},
+		"blockLayout": {
+			"type": "string",
+			"default": "list"
+		},
+		"feedURL": {
+			"type": "string",
+			"default": ""
+		},
+		"itemsToShow": {
+			"type": "number",
+			"default": 5
+		},
+		"displayExcerpt": {
+			"type": "boolean",
+			"default": false
+		},
+		"displayAuthor": {
+			"type": "boolean",
+			"default": false
+		},
+		"displayDate": {
+			"type": "boolean",
+			"default": false
+		},
+		"excerptLength": {
+			"type": "number",
+			"default": 55
+		}
+	}
+}
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import {
 	Button,
 	Disabled,
@@ -12,169 +12,148 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { grid, list, pencil, rss } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
-import { rss, pencil, grid, list } from '@wordpress/icons';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 10;
 
-class RSSEdit extends Component {
-	constructor() {
-		super( ...arguments );
+export default function RSSEdit( { attributes, setAttributes } ) {
+	const [ isEditing, setIsEditing ] = useState( ! attributes.feedURL );
 
-		this.state = {
-			editing: ! this.props.attributes.feedURL,
-		};
+	const {
+		blockLayout,
+		columns,
+		displayAuthor,
+		displayDate,
+		displayExcerpt,
+		excerptLength,
+		feedURL,
+		itemsToShow,
+	} = attributes;
 
-		this.toggleAttribute = this.toggleAttribute.bind( this );
-		this.onSubmitURL = this.onSubmitURL.bind( this );
-	}
-
-	toggleAttribute( propName ) {
+	function toggleAttribute( propName ) {
 		return () => {
-			const value = this.props.attributes[ propName ];
-			const { setAttributes } = this.props;
+			const value = attributes[ propName ];
 
 			setAttributes( { [ propName ]: ! value } );
 		};
 	}
 
-	onSubmitURL( event ) {
+	function onSubmitURL( event ) {
 		event.preventDefault();
 
-		const { feedURL } = this.props.attributes;
 		if ( feedURL ) {
-			this.setState( { editing: false } );
+			setIsEditing( false );
 		}
 	}
 
-	render() {
-		const {
-			blockLayout,
-			columns,
-			displayAuthor,
-			displayExcerpt,
-			displayDate,
-			excerptLength,
-			feedURL,
-			itemsToShow,
-		} = this.props.attributes;
-		const { setAttributes } = this.props;
+	if ( isEditing ) {
+		return (
+			<Placeholder icon={ rss } label="RSS">
+				<form
+					onSubmit={ onSubmitURL }
+					className="wp-block-rss__placeholder-form"
+				>
+					<TextControl
+						placeholder={ __( 'Enter URL here…' ) }
+						value={ feedURL }
+						onChange={ ( value ) =>
+							setAttributes( { feedURL: value } )
+						}
+						className="wp-block-rss__placeholder-input"
+					/>
+					<Button isPrimary type="submit">
+						{ __( 'Use URL' ) }
+					</Button>
+				</form>
+			</Placeholder>
+		);
+	}
+
+	const toolbarControls = [
+		{
+			icon: pencil,
+			title: __( 'Edit RSS URL' ),
+			onClick: () => setIsEditing( true ),
+		},
+		{
+			icon: list,
+			title: __( 'List view' ),
+			onClick: () => setAttributes( { blockLayout: 'list' } ),
+			isActive: blockLayout === 'list',
+		},
+		{
+			icon: grid,
+			title: __( 'Grid view' ),
+			onClick: () => setAttributes( { blockLayout: 'grid' } ),
+			isActive: blockLayout === 'grid',
+		},
+	];
 
-		if ( this.state.editing ) {
-			return (
-				<Placeholder icon={ rss } label="RSS">
-					<form
-						onSubmit={ this.onSubmitURL }
-						className="blocks-rss__placeholder-form"
-					>
-						<TextControl
-							placeholder={ __( 'Enter URL here…' ) }
-							value={ feedURL }
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup controls={ toolbarControls } />
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'RSS settings' ) }>
+					<RangeControl
+						label={ __( 'Number of items' ) }
+						value={ itemsToShow }
+						onChange={ ( value ) =>
+							setAttributes( { itemsToShow: value } )
+						}
+						min={ DEFAULT_MIN_ITEMS }
+						max={ DEFAULT_MAX_ITEMS }
+						required
+					/>
+					<ToggleControl
+						label={ __( 'Display author' ) }
+						checked={ displayAuthor }
+						onChange={ toggleAttribute( 'displayAuthor' ) }
+					/>
+					<ToggleControl
+						label={ __( 'Display date' ) }
+						checked={ displayDate }
+						onChange={ toggleAttribute( 'displayDate' ) }
+					/>
+					<ToggleControl
+						label={ __( 'Display excerpt' ) }
+						checked={ displayExcerpt }
+						onChange={ toggleAttribute( 'displayExcerpt' ) }
+					/>
+					{ displayExcerpt && (
+						<RangeControl
+							label={ __( 'Max number of words in excerpt' ) }
+							value={ excerptLength }
 							onChange={ ( value ) =>
-								setAttributes( { feedURL: value } )
+								setAttributes( { excerptLength: value } )
 							}
-							className="blocks-rss__placeholder-input"
+							min={ 10 }
+							max={ 100 }
+							required
 						/>
-						<Button isPrimary type="submit">
-							{ __( 'Use URL' ) }
-						</Button>
-					</form>
-				</Placeholder>
-			);
-		}
-
-		const toolbarControls = [
-			{
-				icon: pencil,
-				title: __( 'Edit RSS URL' ),
-				onClick: () => this.setState( { editing: true } ),
-			},
-			{
-				icon: list,
-				title: __( 'List view' ),
-				onClick: () => setAttributes( { blockLayout: 'list' } ),
-				isActive: blockLayout === 'list',
-			},
-			{
-				icon: grid,
-				title: __( 'Grid view' ),
-				onClick: () => setAttributes( { blockLayout: 'grid' } ),
-				isActive: blockLayout === 'grid',
-			},
-		];
-
-		return (
-			<>
-				<BlockControls>
-					<ToolbarGroup controls={ toolbarControls } />
-				</BlockControls>
-				<InspectorControls>
-					<PanelBody title={ __( 'RSS settings' ) }>
+					) }
+					{ blockLayout === 'grid' && (
 						<RangeControl
-							label={ __( 'Number of items' ) }
-							value={ itemsToShow }
+							label={ __( 'Columns' ) }
+							value={ columns }
 							onChange={ ( value ) =>
-								setAttributes( { itemsToShow: value } )
+								setAttributes( { columns: value } )
 							}
-							min={ DEFAULT_MIN_ITEMS }
-							max={ DEFAULT_MAX_ITEMS }
+							min={ 2 }
+							max={ 6 }
 							required
 						/>
-						<ToggleControl
-							label={ __( 'Display author' ) }
-							checked={ displayAuthor }
-							onChange={ this.toggleAttribute( 'displayAuthor' ) }
-						/>
-						<ToggleControl
-							label={ __( 'Display date' ) }
-							checked={ displayDate }
-							onChange={ this.toggleAttribute( 'displayDate' ) }
-						/>
-						<ToggleControl
-							label={ __( 'Display excerpt' ) }
-							checked={ displayExcerpt }
-							onChange={ this.toggleAttribute(
-								'displayExcerpt'
-							) }
-						/>
-						{ displayExcerpt && (
-							<RangeControl
-								label={ __( 'Max number of words in excerpt' ) }
-								value={ excerptLength }
-								onChange={ ( value ) =>
-									setAttributes( { excerptLength: value } )
-								}
-								min={ 10 }
-								max={ 100 }
-								required
-							/>
-						) }
-						{ blockLayout === 'grid' && (
-							<RangeControl
-								label={ __( 'Columns' ) }
-								value={ columns }
-								onChange={ ( value ) =>
-									setAttributes( { columns: value } )
-								}
-								min={ 2 }
-								max={ 6 }
-								required
-							/>
-						) }
-					</PanelBody>
-				</InspectorControls>
-				<Disabled>
-					<ServerSideRender
-						block="core/rss"
-						attributes={ this.props.attributes }
-					/>
-				</Disabled>
-			</>
-		);
-	}
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<ServerSideRender block="core/rss" attributes={ attributes } />
+			</Disabled>
+		</>
+	);
 }
-
-export default RSSEdit;
diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss
@@ -8,7 +8,7 @@
 	display: inline;
 }
 
-.blocks-rss__placeholder-form {
+.wp-block-rss__placeholder-form {
 	display: flex;
 	align-items: stretch;
 
@@ -23,7 +23,7 @@
 	}
 }
 
-.blocks-rss__placeholder-input {
+.wp-block-rss__placeholder-input {
 	display: flex;
 	align-items: stretch;
 	flex-grow: 1;

diff --git a/packages/block-library/src/rss/index.js b/packages/block-library/src/rss/index.js
@@ -1,21 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { rss as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import metadata from './block.json';
 import edit from './edit';
 
-export const name = 'core/rss';
+const { name } = metadata;
+
+export { metadata, name };
 
 export const settings = {
 	title: __( 'RSS' ),
 	description: __( 'Display entries from any RSS or Atom feed.' ),
 	icon,
-	category: 'widgets',
 	keywords: [ __( 'atom' ), __( 'feed' ) ],
 	supports: {
 		align: true,