Add tag cloud block

packages/block-library/src/index.js

@@ -47,6 +47,7 @@ import * as template from './template';
 import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
+import * as tagCloud from './tag-cloud';
 
 import * as classic from './classic';
 
@@ -94,11 +95,8 @@ export const registerCoreBlocks = () => {
 		textColumns,
 		verse,
 		video,
-	].forEach( ( block ) => {
-		if ( ! block ) {
-			return;
-		}
-		const { name, settings } = block;
+		tagCloud,
+	].forEach( ( { name, settings } ) => {
 		registerBlockType( name, settings );
 	} );
 

packages/block-library/src/tag-cloud/edit.js

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { map, filter } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import {
+	PanelBody,
+	Placeholder,
+	ToggleControl,
+	SelectControl,
+	ServerSideRender,
+} from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '@wordpress/editor';
+
+class TagCloudEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.setTaxonomy = this.setTaxonomy.bind( this );
+		this.toggleShowTagCounts = this.toggleShowTagCounts.bind( this );
+	}
+
+	getTaxonomies() {
+		const taxonomies = filter( this.props.taxonomies, 'show_cloud' );
+
+		return map( taxonomies, ( taxonomy ) => {
+			return {
+				value: taxonomy.slug,
+				label: taxonomy.name,
+			};
+		} );
+	}
+
+	setTaxonomy( taxonomy ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( { taxonomy } );
+	}
+
+	toggleShowTagCounts() {
+		const { attributes, setAttributes } = this.props;
+		const { showTagCounts } = attributes;
+
+		setAttributes( { showTagCounts: ! showTagCounts } );
+	}
+
+	render() {
+		const { attributes } = this.props;
+		const { taxonomy, showTagCounts } = attributes;
+		const taxonomies = this.getTaxonomies();
+		const options = [
+			{
+				label: __( '- Select -' ),
+				value: '',
+			},
+			...taxonomies,
+		];
+
+		const inspectorControls = (
+			<InspectorControls>
+				<PanelBody title={ __( 'Tag Cloud Settings' ) }>
+					<SelectControl
+						label={ __( 'Taxonomy' ) }
+						options={ options }
+						value={ taxonomy }
+						onChange={ this.setTaxonomy }
+					/>
+					<ToggleControl
+						label={ __( 'Show tag counts' ) }
+						checked={ showTagCounts }
+						onChange={ this.toggleShowTagCounts }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+
+		if ( ! taxonomy ) {
+			return (
+				<Fragment>
+					{ inspectorControls }
+					<Placeholder
+						key="placeholder"
+						icon="tag"
+						label={ __( 'Tag Cloud' ) }
+						instructions={ __( 'Select a Taxonomy' ) }
+					>
+						<SelectControl
+							options={ options }
+							onChange={ this.setTaxonomy }
+						/>
+					</Placeholder>
+				</Fragment>
+			);
+		}
+
+		return (
+			<Fragment>
+				{ inspectorControls }
+				<ServerSideRender
+					key="tag-cloud"
+					block="core/tag-cloud"
+					attributes={ attributes }
+				/>
+			</Fragment>
+		);
+	}
+}
+
+export default withSelect( ( select ) => {
+	return {
+		taxonomies: select( 'core' ).getTaxonomies(),
+	};
+} )( TagCloudEdit );

packages/block-library/src/tag-cloud/editor.scss

@@ -0,0 +1,13 @@
+.gutenberg .wp-block-tag-cloud {
+	a {
+		display: inline-block;
+		margin-right: 5px;
+	}
+
+	span {
+		display: inline-block;
+		margin-left: 5px;
+		color: $dark-gray-100;
+		text-decoration: none;
+	}
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import edit from './edit';
+
+export const name = 'core/tag-cloud';
+
+export const settings = {
+	title: __( 'Tag Cloud' ),
+
+	description: __( 'A cloud of your most used tags.' ),
+
+	icon: 'tag',
+
+	category: 'widgets',
+
+	supports: {
+		html: false,
+		align: true,
+	},
+
+	edit,
+
+	save() {
+		return null;
+	},
+};

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

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Server-side rendering of the `core/tag-cloud` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/tag-cloud` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the tag cloud for selected taxonomy.
+ */
+function render_block_core_tag_cloud( $attributes ) {
+	$class          = "wp-block-tag-cloud align{$attributes['align']}";
+	$wrapper_markup = '<p class="%1$s">%2$s</p>';
+
+	$args = array(
+		'echo'       => false,
+		'taxonomy'   => $attributes['taxonomy'],
+		'show_count' => ! empty( $attributes['showTagCounts'] ),
+	);
+
+	$tag_cloud = wp_tag_cloud( $args );
+
+	$block_content = sprintf(
+		$wrapper_markup,
+		esc_attr( $class ),
+		$tag_cloud
+	);
+
+	return $block_content;
+}
+
+/**
+ * Registers the `core/tag-cloud` block on server.
+ */
+function register_block_core_tag_cloud() {
+	register_block_type( 'core/tag-cloud', array(
+		'attributes'      => array(
+			'taxonomy'      => array(
+				'type' => 'string',
+			),
+			'showTagCounts' => array(
+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'align'         => array(
+				'type'    => 'string',
+				'default' => 'center',
+			),
+		),
+		'render_callback' => 'render_block_core_tag_cloud',
+	) );
+}
+
+add_action( 'init', 'register_block_core_tag_cloud' );

test/integration/full-content/fixtures/core__tag-cloud.html

@@ -0,0 +1 @@
+<!-- wp:tag-cloud {"taxonomy":"category"} /-->

test/integration/full-content/fixtures/core__tag-cloud.json

@@ -0,0 +1,14 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/tag-cloud",
+        "isValid": true,
+        "attributes": {
+            "taxonomy": "category",
+            "showTagCounts": false,
+            "align": "center"
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__tag-cloud.parsed.json

@@ -0,0 +1,10 @@
+[
+    {
+        "blockName": "core/tag-cloud",
+        "attrs": {
+            "taxonomy": "category"
+        },
+        "innerBlocks": [],
+        "innerHTML": ""
+    }
+]

test/integration/full-content/fixtures/core__tag-cloud.serialized.html

@@ -0,0 +1 @@
+<!-- wp:tag-cloud {"taxonomy":"category"} /-->

test/integration/full-content/fixtures/core__tag-cloud__showTagCounts.html

@@ -0,0 +1 @@
+<!-- wp:tag-cloud {"taxonomy":"category","showTagCounts":true} /-->

test/integration/full-content/fixtures/core__tag-cloud__showTagCounts.json

@@ -0,0 +1,14 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/tag-cloud",
+        "isValid": true,
+        "attributes": {
+            "taxonomy": "category",
+            "showTagCounts": true,
+            "align": "center"
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__tag-cloud__showTagCounts.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/tag-cloud",
+        "attrs": {
+            "taxonomy": "category",
+            "showTagCounts": true
+        },
+        "innerBlocks": [],
+        "innerHTML": ""
+    }
+]

test/integration/full-content/fixtures/core__tag-cloud__showTagCounts.serialized.html

@@ -0,0 +1 @@
+<!-- wp:tag-cloud {"taxonomy":"category","showTagCounts":true} /-->

test/integration/full-content/server-registered.json

@@ -1 +1 @@
-{"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/latest-comments":{"attributes":{"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true},"align":{"type":"string","enum":["center","left","right","wide","full",""]}}},"core\/archives":{"attributes":{"align":{"type":"string"},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-posts":{"attributes":{"categories":{"type":"string"},"className":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"align":{"type":"string"},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}}}
+{"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/latest-comments":{"attributes":{"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true},"align":{"type":"string","enum":["center","left","right","wide","full",""]}}},"core\/archives":{"attributes":{"align":{"type":"string"},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-posts":{"attributes":{"categories":{"type":"string"},"className":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"align":{"type":"string"},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/tag-cloud":{"attributes":{"taxonomy":{"type":"string"},"showTagCounts":{"type":"boolean","default":false},"align":{"type":"string","default":"center"}}}}