Block library: Standardize align and className attributes for dynamic…

… blocks (#14533)

* Block library: Refactor blocks to use supports align

* Block libraray: Remove obsolete save fields which render nothing

* Block library: Standardize align and className attributes for dynamic blocks

* Update align options for dynamic blocks

* Fixed the RSS block. Added alignment class and revised the code to look a bit more like the Latest Posts block.

* Fixed the Search block alignment issue. Also added ability for classname onto RSS block.

* Update CHANGELOG file for block library package

* Make phpcs happy with code styles in rss block

* Regenerate server registered blocks fixture for tests

packages/block-library/CHANGELOG.md

@@ -1,6 +1,10 @@
-## 2.4.0 (Unreleased)
+## 2.5.0 (Unreleased)
 
-- Add vertical alignment controls to `columns` Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)).
+- Add vertical alignment controls to Columns Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)).
+- Add `wide` and `full` alignments to Archives block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
+- Add `wide` and `full` alignments to Categories block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
+- Add all alignment options to RSS block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
+- Add all alignment options to Search block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 
 ### Bug Fixes
 

packages/block-library/src/archives/edit.js

@@ -8,15 +8,11 @@ import {
 	Disabled,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	InspectorControls,
-	BlockAlignmentToolbar,
-	BlockControls,
-} from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 import { ServerSideRender } from '@wordpress/editor';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
-	const { align, showPostCounts, displayAsDropdown } = attributes;
+	const { showPostCounts, displayAsDropdown } = attributes;
 
 	return (
 		<Fragment>
@@ -34,15 +30,6 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<BlockControls>
-				<BlockAlignmentToolbar
-					value={ align }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
-					} }
-					controls={ [ 'left', 'center', 'right' ] }
-				/>
-			</BlockControls>
 			<Disabled>
 				<ServerSideRender block="core/archives" attributes={ attributes } />
 			</Disabled>

packages/block-library/src/archives/index.js

@@ -21,15 +21,9 @@ export const settings = {
 	category: 'widgets',
 
 	supports: {
+		align: true,
 		html: false,
 	},
 
-	getEditWrapperProps( attributes ) {
-		const { align } = attributes;
-		if ( [ 'left', 'center', 'right' ].includes( align ) ) {
-			return { 'data-align': align };
-		}
-	},
-
 	edit,
 };

packages/block-library/src/archives/index.php

@@ -126,6 +126,7 @@ function register_block_core_archives() {
 			'attributes'      => array(
 				'align'             => array(
 					'type' => 'string',
+					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
 				),
 				'className'         => array(
 					'type' => 'string',

packages/block-library/src/block/index.js

@@ -17,19 +17,11 @@ export const settings = {
 
 	description: __( 'Create content, and save it for you and other contributors to reuse across your site. Update the block, and the changes apply everywhere it’s used.' ),
 
-	attributes: {
-		ref: {
-			type: 'number',
-		},
-	},
-
 	supports: {
 		customClassName: false,
 		html: false,
 		inserter: false,
 	},
 
 	edit,
-
-	save: () => null,
 };

packages/block-library/src/block/index.php

@@ -41,7 +41,6 @@ function register_block_core_block() {
 					'type' => 'number',
 				),
 			),
-
 			'render_callback' => 'render_block_core_block',
 		)
 	);

packages/block-library/src/calendar/index.php

@@ -58,6 +58,7 @@ function register_block_core_calendar() {
 			'attributes'      => array(
 				'align'     => array(
 					'type' => 'string',
+					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
 				),
 				'className' => array(
 					'type' => 'string',

packages/block-library/src/categories/index.js

@@ -20,24 +20,8 @@ export const settings = {
 
 	category: 'widgets',
 
-	attributes: {
-		displayAsDropdown: {
-			type: 'boolean',
-			default: false,
-		},
-		showHierarchy: {
-			type: 'boolean',
-			default: false,
-		},
-		showPostCounts: {
-			type: 'boolean',
-			default: false,
-		},
-	},
-
 	supports: {
 		align: true,
-		alignWide: false,
 		html: false,
 	},
 

packages/block-library/src/categories/index.php

@@ -94,6 +94,27 @@ function register_block_core_categories() {
 	register_block_type(
 		'core/categories',
 		array(
+			'attributes'      => array(
+				'align'             => array(
+					'type' => 'string',
+					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
+				),
+				'className'         => array(
+					'type' => 'string',
+				),
+				'displayAsDropdown' => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+				'showHierarchy'     => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+				'showPostCounts'    => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+			),
 			'render_callback' => 'render_block_core_categories',
 		)
 	);

packages/block-library/src/latest-posts/edit.js

@@ -27,7 +27,6 @@ import { __ } from '@wordpress/i18n';
 import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';
 import {
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockControls,
 } from '@wordpress/block-editor';
 import { withSelect } from '@wordpress/data';
@@ -82,7 +81,7 @@ class LatestPostsEdit extends Component {
 	render() {
 		const { attributes, setAttributes, latestPosts } = this.props;
 		const { categoriesList } = this.state;
-		const { displayPostDate, align, postLayout, columns, order, orderBy, categories, postsToShow } = attributes;
+		const { displayPostDate, postLayout, columns, order, orderBy, categories, postsToShow } = attributes;
 
 		const inspectorControls = (
 			<InspectorControls>
@@ -160,12 +159,6 @@ class LatestPostsEdit extends Component {
 			<Fragment>
 				{ inspectorControls }
 				<BlockControls>
-					<BlockAlignmentToolbar
-						value={ align }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { align: nextAlign } );
-						} }
-					/>
 					<Toolbar controls={ layoutControls } />
 				</BlockControls>
 				<ul

packages/block-library/src/latest-posts/index.js

@@ -23,15 +23,9 @@ export const settings = {
 	keywords: [ __( 'recent posts' ) ],
 
 	supports: {
+		align: true,
 		html: false,
 	},
 
-	getEditWrapperProps( attributes ) {
-		const { align } = attributes;
-		if ( [ 'left', 'center', 'right', 'wide', 'full' ].includes( align ) ) {
-			return { 'data-align': align };
-		}
-	},
-
 	edit,
 };

packages/block-library/src/latest-posts/index.php

@@ -89,12 +89,16 @@ function register_block_core_latest_posts() {
 		'core/latest-posts',
 		array(
 			'attributes'      => array(
-				'categories'      => array(
+				'align'           => array(
 					'type' => 'string',
+					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
 				),
 				'className'       => array(
 					'type' => 'string',
 				),
+				'categories'      => array(
+					'type' => 'string',
+				),
 				'postsToShow'     => array(
 					'type'    => 'number',
 					'default' => 5,
@@ -111,9 +115,6 @@ function register_block_core_latest_posts() {
 					'type'    => 'number',
 					'default' => 3,
 				),
-				'align'           => array(
-					'type' => 'string',
-				),
 				'order'           => array(
 					'type'    => 'string',
 					'default' => 'desc',

packages/block-library/src/legacy-widget/index.php

@@ -60,6 +60,9 @@ function register_block_core_legacy_widget() {
 		'core/legacy-widget',
 		array(
 			'attributes'      => array(
+				'className'        => array(
+					'type' => 'string',
+				),
 				'identifier'       => array(
 					'type' => 'string',
 				),

packages/block-library/src/rss/editor.scss

@@ -4,3 +4,6 @@
 		padding-left: 0;
 	}
 }
+.wp-block-rss li a > div {
+	display: inline;
+}

packages/block-library/src/rss/index.js

@@ -22,6 +22,7 @@ export const settings = {
 	keywords: [ __( 'atom' ), __( 'feed' ) ],
 
 	supports: {
+		align: true,
 		html: false,
 	},
 

packages/block-library/src/rss/index.php

@@ -79,8 +79,24 @@ function render_block_core_rss( $attributes ) {
 		$list_items .= "<li class='wp-block-rss__item'>{$title}{$date}{$author}{$excerpt}</li>";
 	}
 
-	$classes           = 'grid' === $attributes['blockLayout'] ? ' is-grid columns-' . $attributes['columns'] : '';
-	$list_items_markup = "<ul class='wp-block-rss{$classes}'>{$list_items}</ul>";
+	$class = 'wp-block-rss';
+	if ( isset( $attributes['align'] ) ) {
+		$class .= ' align' . $attributes['align'];
+	}
+
+	if ( isset( $attributes['blockLayout'] ) && 'grid' === $attributes['blockLayout'] ) {
+		$class .= ' is-grid';
+	}
+
+	if ( isset( $attributes['columns'] ) && 'grid' === $attributes['blockLayout'] ) {
+		$class .= ' columns-' . $attributes['columns'];
+	}
+
+	if ( isset( $attributes['className'] ) ) {
+		$class .= ' ' . $attributes['className'];
+	}
+
+	$list_items_markup = "<ul class='{$class}'>{$list_items}</ul>";
 
 	// PHP 5.2 compatibility. See: http://simplepie.org/wiki/faq/i_m_getting_memory_leaks.
 	$rss->__destruct();
@@ -96,6 +112,13 @@ function register_block_core_rss() {
 	register_block_type( 'core/rss',
 		array(
 			'attributes'      => array(
+				'align'          => array(
+					'type' => 'string',
+					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
+				),
+				'className'      => array(
+					'type' => 'string',
+				),
 				'columns'        => array(
 					'type'    => 'number',
 					'default' => 2,

packages/block-library/src/rss/style.scss

@@ -30,6 +30,7 @@
 
 .wp-block-rss__item-publish-date,
 .wp-block-rss__item-author {
+	display: block;
 	color: $dark-gray-300;
 	font-size: $default-font-size;
 }

packages/block-library/src/search/index.js

@@ -21,5 +21,9 @@ export const settings = {
 
 	keywords: [ __( 'find' ) ],
 
+	supports: {
+		align: true,
+	},
+
 	edit,
 };

packages/block-library/src/search/index.php

@@ -44,6 +44,10 @@ function render_block_core_search( $attributes ) {
 		$class .= ' ' . $attributes['className'];
 	}
 
+	if ( isset( $attributes['align'] ) ) {
+		$class .= ' align' . $attributes['align'];
+	}
+
 	return sprintf(
 		'<form class="%s" role="search" method="get" action="%s">%s</form>',
 		$class,
@@ -60,6 +64,13 @@ function register_block_core_search() {
 		'core/search',
 		array(
 			'attributes'      => array(
+				'align'       => array(
+					'type' => 'string',
+					'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
+				),
+				'className'   => array(
+					'type' => 'string',
+				),
 				'label'       => array(
 					'type'    => 'string',
 					'default' => __( 'Search' ),
@@ -73,7 +84,6 @@ function register_block_core_search() {
 					'default' => __( 'Search' ),
 				),
 			),
-
 			'render_callback' => 'render_block_core_search',
 		)
 	);

packages/block-library/src/shortcode/index.js

@@ -19,13 +19,6 @@ export const settings = {
 
 	category: 'widgets',
 
-	attributes: {
-		text: {
-			type: 'string',
-			source: 'html',
-		},
-	},
-
 	transforms: {
 		from: [
 			{

packages/block-library/src/shortcode/index.php

@@ -24,6 +24,12 @@ function register_block_core_shortcode() {
 	register_block_type(
 		'core/shortcode',
 		array(
+			'attributes'      => array(
+				'text' => array(
+					'type'   => 'string',
+					'source' => 'html',
+				),
+			),
 			'render_callback' => 'render_block_core_shortcode',
 		)
 	);