Add calendar block v1 (#13772)

The first version of the calendar block.
The design tries to follow the mockup proposed.

lib/load.php

@@ -36,6 +36,9 @@
 }
 // Currently merged in core as `gutenberg_render_block_core_latest_comments`,
 // expected to change soon.
+if ( ! function_exists( 'render_block_core_calendar' ) ) {
+	require dirname( __FILE__ ) . '/../packages/block-library/src/calendar/index.php';
+}
 if ( ! function_exists( 'render_block_core_latest_comments' )
 	&& ! function_exists( 'gutenberg_render_block_core_latest_comments' ) ) {
 	require dirname( __FILE__ ) . '/../packages/block-library/src/latest-comments/index.php';

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

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Disabled,
+	ServerSideRender,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+class CalendarEdit extends Component {
+	constructor() {
+		super( ...arguments );
+		this.getYearMonth = memoize(
+			this.getYearMonth.bind( this ),
+			{ maxSize: 1 }
+		);
+		this.getServerSideAttributes = memoize(
+			this.getServerSideAttributes.bind( this ),
+			{ maxSize: 1 }
+		);
+	}
+
+	getYearMonth( date ) {
+		if ( ! date ) {
+			return {};
+		}
+		const momentDate = moment( date );
+		return {
+			year: momentDate.year(),
+			month: momentDate.month() + 1,
+		};
+	}
+
+	getServerSideAttributes( attributes, date ) {
+		return {
+			...attributes,
+			...this.getYearMonth( date ),
+		};
+	}
+
+	render() {
+		return (
+			<Disabled>
+				<ServerSideRender
+					block="core/calendar"
+					attributes={ this.getServerSideAttributes(
+						this.props.attributes,
+						this.props.date
+					) }
+				/>
+			</Disabled>
+		);
+	}
+}
+
+export default withSelect( ( select ) => {
+	return {
+		date: select( 'core/editor' ).getEditedPostAttribute( 'date' ),
+	};
+} )( CalendarEdit );

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+export const name = 'core/calendar';
+
+export const settings = {
+	title: __( 'Calendar' ),
+
+	description: __( 'A calendar of your site’s posts.' ),
+
+	icon: 'calendar',
+
+	category: 'widgets',
+
+	keywords: [ __( 'posts' ), __( 'archive' ) ],
+
+	supports: {
+		align: true,
+	},
+
+	edit,
+
+	save() {
+		return null;
+	},
+};

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

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Server-side rendering of the `core/calendar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/calendar` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the block content.
+ */
+function render_block_core_calendar( $attributes ) {
+	global $monthnum, $year, $post;
+	$previous_monthnum = $monthnum;
+	$previous_year     = $year;
+
+	if ( isset( $attributes['month'] ) ) {
+		// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
+		$monthnum = $attributes['month'];
+	}
+
+	if ( isset( $attributes['year'] ) ) {
+		// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
+		$year = $attributes['year'];
+	}
+
+	$custom_class_name = empty( $attributes['className'] ) ? '' : ' ' . $attributes['className'];
+	$align_class_name  = empty( $attributes['align'] ) ? '' : ' ' . "align{$attributes['align']}";
+
+	return sprintf(
+		'<div class="%1$s">%2$s</div>',
+		esc_attr( 'wp-block-calendar' . $custom_class_name . $align_class_name ),
+		get_calendar( true, false )
+	);
+
+	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
+	$monthnum = $previous_monthnum;
+	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
+	$year = $previous_year;
+}
+
+/**
+ * Registers the `core/calendar` block on server.
+ */
+function register_block_core_calendar() {
+	register_block_type(
+		'core/calendar',
+		array(
+			'attributes'      => array(
+				'align'     => array(
+					'type' => 'string',
+				),
+				'className' => array(
+					'type' => 'string',
+				),
+				'month'     => array(
+					'type' => 'integer',
+				),
+				'year'      => array(
+					'type' => 'integer',
+				),
+			),
+			'render_callback' => 'render_block_core_calendar',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_calendar' );

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

@@ -0,0 +1,37 @@
+.wp-block-calendar {
+	text-align: center;
+
+	th,
+	tbody td {
+		padding: 4px;
+		border: 1px solid $light-gray-500;
+	}
+
+	tfoot td {
+		border: none;
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-family: $default-font;
+	}
+
+	table th {
+		font-weight: 440;
+		background: $light-gray-300;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	tfoot a {
+		color: $blue-medium-800;
+	}
+
+	table tbody,
+	table caption {
+		color: $dark-gray-600;
+	}
+}

packages/block-library/src/index.js

@@ -20,6 +20,7 @@ import * as gallery from './gallery';
 import * as archives from './archives';
 import * as audio from './audio';
 import * as button from './button';
+import * as calendar from './calendar';
 import * as categories from './categories';
 import * as code from './code';
 import * as columns from './columns';
@@ -68,6 +69,7 @@ export const registerCoreBlocks = () => {
 		archives,
 		audio,
 		button,
+		calendar,
 		categories,
 		code,
 		columns,

packages/block-library/src/style.scss

@@ -2,6 +2,7 @@
 @import "./block/edit-panel/style.scss";
 @import "./block/indicator/style.scss";
 @import "./button/style.scss";
+@import "./calendar/style.scss";
 @import "./categories/style.scss";
 @import "./columns/style.scss";
 @import "./cover/style.scss";

test/integration/full-content/fixtures/core__calendar.html

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

test/integration/full-content/fixtures/core__calendar.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/calendar",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__calendar.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/calendar",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

test/integration/full-content/fixtures/core__calendar.serialized.html

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