Add Archives block

core-blocks/archives/block.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import {
+	PanelBody,
+	ServerSideRender,
+	ToggleControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	InspectorControls,
+	BlockAlignmentToolbar,
+	BlockControls,
+} from '@wordpress/blocks';
+
+class ArchivesBlock extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.toggleShowPostCounts = this.toggleShowPostCounts.bind( this );
+		this.toggleDisplayAsDropdown = this.toggleDisplayAsDropdown.bind( this );
+	}
+
+	toggleShowPostCounts() {
+		const { attributes, setAttributes } = this.props;
+		const { showPostCounts } = attributes;
+
+		setAttributes( { showPostCounts: ! showPostCounts } );
+	}
+
+	toggleDisplayAsDropdown() {
+		const { attributes, setAttributes } = this.props;
+		const { displayAsDropdown } = attributes;
+
+		setAttributes( { displayAsDropdown: ! displayAsDropdown } );
+	}
+
+	render() {
+		const { attributes, isSelected, setAttributes } = this.props;
+		const { align, showPostCounts, displayAsDropdown } = attributes;
+
+		const inspectorControls = isSelected && (
+			<InspectorControls key="inspector">
+				<PanelBody title={ __( 'Archives Settings' ) }>
+					<ToggleControl
+						label={ __( 'Show post counts' ) }
+						checked={ showPostCounts }
+						onChange={ this.toggleShowPostCounts }
+					/>
+					<ToggleControl
+						label={ __( 'Display as dropdown' ) }
+						checked={ displayAsDropdown }
+						onChange={ this.toggleDisplayAsDropdown }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+
+		return [
+			inspectorControls,
+			isSelected && (
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+						controls={ [ 'left', 'center', 'right', 'full' ] }
+					/>
+				</BlockControls>
+			),
+			<ServerSideRender key="archives" block="core/archives" attributes={ this.props.attributes } />,
+		];
+	}
+}
+
+export default ArchivesBlock;

core-blocks/archives/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ArchivesBlock from './block';
+export const name = 'core/archives';
+
+export const settings = {
+	title: __( 'Archives' ),
+
+	description: __( 'This block displays a monthly archive of your site’s Posts.' ),
+
+	icon: 'calendar-alt',
+
+	category: 'widgets',
+
+	keywords: [ __( 'archives' ) ],
+
+	supports: {
+		html: false,
+	},
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'center' === align || 'full' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit: ArchivesBlock,
+
+	save() {
+		// Handled by PHP.
+		return null;
+	},
+};

core-blocks/archives/index.php

@@ -0,0 +1,108 @@
+<?php
+/**
+ * Server-side rendering of the `core/archives` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/archives` block on server.
+ *
+ * @see WP_Widget_Archives
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the post content with archives added.
+ */
+function render_block_core_archives( $attributes ) {
+	static $block_id = 0;
+	$block_id++;
+
+	$show_post_count = ! empty( $attributes['showPostCounts'] ) ? true : false;
+	$class           = "wp-block-archives align{$attributes['align']}";
+
+	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
+
+		$dropdown_id = esc_attr( 'wp-block-archives-' . $block_id );
+		$title       = __( 'Archives', 'gutenberg' );
+
+		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
+		$dropdown_args = apply_filters( 'widget_archives_dropdown_args', array(
+			'type'            => 'monthly',
+			'format'          => 'option',
+			'show_post_count' => $show_post_count,
+		) );
+
+		$dropdown_args['echo'] = 0;
+
+		$archives = wp_get_archives( $dropdown_args );
+
+		switch ( $dropdown_args['type'] ) {
+			case 'yearly':
+				$label = __( 'Select Year', 'gutenberg' );
+				break;
+			case 'monthly':
+				$label = __( 'Select Month', 'gutenberg' );
+				break;
+			case 'daily':
+				$label = __( 'Select Day', 'gutenberg' );
+				break;
+			case 'weekly':
+				$label = __( 'Select Week', 'gutenberg' );
+				break;
+			default:
+				$label = __( 'Select Post', 'gutenberg' );
+				break;
+		}
+
+		$label = esc_attr( $label );
+
+		$block_content = '<label class="screen-reader-text" for="' . $dropdown_id . '">' . $title . '</label>
+	<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+	<option value="">' . $label . '</option>' . $archives . '</select>';
+	} else {
+
+		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
+		$archives_args = apply_filters( 'widget_archives_args', array(
+			'type'            => 'monthly',
+			'show_post_count' => $show_post_count,
+		) );
+
+		$archives_args['echo'] = 0;
+
+		$block_content = wp_get_archives( $archives_args );
+	}
+
+	$block_content = sprintf(
+		'<div class="%1$s">%2$s</div>',
+		esc_attr( $class ),
+		$block_content
+	);
+
+	return $block_content;
+}
+
+/**
+ * Register archives block.
+ */
+function register_block_core_archives() {
+	register_block_type( 'core/archives', array(
+		'attributes'      => array(
+			'showPostCounts'    => array(
+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'displayAsDropdown' => array(
+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'align'             => array(
+				'type'    => 'string',
+				'default' => 'none',
+			),
+		),
+		'render_callback' => 'render_block_core_archives',
+	) );
+}
+
+add_action( 'init', 'register_block_core_archives' );

core-blocks/index.js

@@ -17,6 +17,7 @@ import * as image from './image';
 import * as heading from './heading';
 import * as quote from './quote';
 import * as gallery from './gallery';
+import * as archives from './archives';
 import * as audio from './audio';
 import * as button from './button';
 import * as categories from './categories';
@@ -55,6 +56,7 @@ export const registerCoreBlocks = () => {
 
 		// Register all remaining core blocks.
 		shortcode,
+		archives,
 		audio,
 		button,
 		categories,

core-blocks/test/fixtures/core__archives.html

@@ -0,0 +1 @@
+<!-- wp:archives {"showPostCounts":false,"displayAsDropdown":false} /-->

core-blocks/test/fixtures/core__archives.json

@@ -0,0 +1,10 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/archives",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

core-blocks/test/fixtures/core__archives.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/archives",
+        "attrs": {
+            "showPostCounts": false,
+            "displayAsDropdown": false
+        },
+        "innerBlocks": [],
+        "innerHTML": ""
+    }
+]

core-blocks/test/fixtures/core__archives.serialized.html

@@ -0,0 +1 @@
+<!-- wp:archives /-->

core-blocks/test/fixtures/core__archives__showPostCounts.html

@@ -0,0 +1 @@
+<!-- wp:archives {"showPostCounts":true,"displayAsDropdown":false} /-->

core-blocks/test/fixtures/core__archives__showPostCounts.json

@@ -0,0 +1,10 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/archives",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

core-blocks/test/fixtures/core__archives__showPostCounts.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/archives",
+        "attrs": {
+            "showPostCounts": true,
+            "displayAsDropdown": false
+        },
+        "innerBlocks": [],
+        "innerHTML": ""
+    }
+]

core-blocks/test/fixtures/core__archives__showPostCounts.serialized.html

@@ -0,0 +1 @@
+<!-- wp:archives /-->