Blocks: Add a new Tag Cloud block (#7875)

lib/load.php

@@ -52,6 +52,9 @@
 if ( ! function_exists( 'render_block_core_shortcode' ) ) {
 	require dirname( __FILE__ ) . '/../packages/block-library/src/shortcode/index.php';
 }
+if ( ! function_exists( 'render_block_core_tag_cloud' ) ) {
+	require dirname( __FILE__ ) . '/../packages/block-library/src/tag-cloud/index.php';
+}
 if ( ! function_exists( 'render_block_core_search' ) ) {
 	require dirname( __FILE__ ) . '/../packages/block-library/src/search/index.php';
 }

packages/block-library/src/editor.scss

@@ -28,6 +28,7 @@
 @import "./spacer/editor.scss";
 @import "./subhead/editor.scss";
 @import "./table/editor.scss";
+@import "./tag-cloud/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./verse/editor.scss";
 @import "./video/editor.scss";

packages/block-library/src/index.js

@@ -50,6 +50,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';
 
@@ -96,6 +97,7 @@ export const registerCoreBlocks = () => {
 		spacer,
 		subhead,
 		table,
+		tagCloud,
 		template,
 		textColumns,
 		verse,

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

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { map, filter } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import {
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+	ServerSideRender,
+} from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/editor';
+
+class TagCloudEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			editing: ! this.props.attributes.taxonomy,
+		};
+
+		this.setTaxonomy = this.setTaxonomy.bind( this );
+		this.toggleShowTagCounts = this.toggleShowTagCounts.bind( this );
+	}
+
+	getTaxonomyOptions() {
+		const taxonomies = filter( this.props.taxonomies, 'show_cloud' );
+		const selectOption = {
+			label: __( '- Select -' ),
+			value: '',
+		};
+		const taxonomyOptions = map( taxonomies, ( taxonomy ) => {
+			return {
+				value: taxonomy.slug,
+				label: taxonomy.name,
+			};
+		} );
+
+		return [ selectOption, ...taxonomyOptions ];
+	}
+
+	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 taxonomyOptions = this.getTaxonomyOptions();
+
+		const inspectorControls = (
+			<InspectorControls>
+				<PanelBody title={ __( 'Tag Cloud Settings' ) }>
+					<SelectControl
+						label={ __( 'Taxonomy' ) }
+						options={ taxonomyOptions }
+						value={ taxonomy }
+						onChange={ this.setTaxonomy }
+					/>
+					<ToggleControl
+						label={ __( 'Show post counts' ) }
+						checked={ showTagCounts }
+						onChange={ this.toggleShowTagCounts }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+
+		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 @@
+.block-editor .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,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+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,71 @@
+<?php
+/**
+ * Server-side rendering of the `core/tag-cloud` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * 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 = isset( $attributes['align'] ) ?
+		"wp-block-tag-cloud align{$attributes['align']}" :
+		'wp-block-tag-cloud';
+
+	if ( isset( $attributes['className'] ) ) {
+		$class .= ' ' . $attributes['className'];
+	}
+
+	$args = array(
+		'echo'       => false,
+		'taxonomy'   => $attributes['taxonomy'],
+		'show_count' => $attributes['showTagCounts'],
+	);
+
+	$tag_cloud = wp_tag_cloud( $args );
+
+	if ( ! $tag_cloud ) {
+		$tag_cloud = esc_html( __( 'No terms to show.' ) );
+	}
+
+	return sprintf(
+		'<p class="%1$s">%2$s</p>',
+		esc_attr( $class ),
+		$tag_cloud
+	);
+}
+
+/**
+ * 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',
+					'default' => 'post_tag',
+				),
+				'className'     => array(
+					'type' => 'string',
+				),
+				'showTagCounts' => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+				'align'         => array(
+					'type' => 'string',
+				),
+			),
+			'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,13 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/tag-cloud",
+        "isValid": true,
+        "attributes": {
+            "taxonomy": "category",
+            "showTagCounts": false
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

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

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

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,13 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/tag-cloud",
+        "isValid": true,
+        "attributes": {
+            "taxonomy": "category",
+            "showTagCounts": true
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

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

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

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","default":"tags"},"className":{"type":"string"},"showTagCounts":{"type":"boolean","default":false},"align":{"type":"string"}}}}