From 3499eb37a93e9b79a1c2cfb186fb7f6ead2962ce Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 5 Feb 2019 18:42:55 +0000 Subject: [PATCH 1/4] Add calendar block v1 --- lib/load.php | 3 + packages/block-library/src/calendar/edit.js | 67 +++++++++++++++++++ packages/block-library/src/calendar/index.js | 33 +++++++++ packages/block-library/src/calendar/index.php | 60 +++++++++++++++++ .../block-library/src/calendar/style.scss | 62 +++++++++++++++++ packages/block-library/src/index.js | 2 + packages/block-library/src/style.scss | 1 + .../full-content/fixtures/core__calendar.html | 1 + .../full-content/fixtures/core__calendar.json | 10 +++ .../fixtures/core__calendar.parsed.json | 18 +++++ .../fixtures/core__calendar.serialized.html | 1 + 11 files changed, 258 insertions(+) create mode 100644 packages/block-library/src/calendar/edit.js create mode 100644 packages/block-library/src/calendar/index.js create mode 100644 packages/block-library/src/calendar/index.php create mode 100644 packages/block-library/src/calendar/style.scss create mode 100644 test/integration/full-content/fixtures/core__calendar.html create mode 100644 test/integration/full-content/fixtures/core__calendar.json create mode 100644 test/integration/full-content/fixtures/core__calendar.parsed.json create mode 100644 test/integration/full-content/fixtures/core__calendar.serialized.html diff --git a/lib/load.php b/lib/load.php index b3c81971a353f6..54be9e51c49bdf 100644 --- a/lib/load.php +++ b/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'; diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js new file mode 100644 index 00000000000000..67d89d99bd4572 --- /dev/null +++ b/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 ( + + + + ); + } +} + +export default withSelect( ( select ) => { + return { + date: select( 'core/editor' ).getEditedPostAttribute( 'date' ), + }; +} )( CalendarEdit ); diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js new file mode 100644 index 00000000000000..da8f02dbe4038b --- /dev/null +++ b/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; + }, +}; diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php new file mode 100644 index 00000000000000..c5f5ae0924bdd2 --- /dev/null +++ b/packages/block-library/src/calendar/index.php @@ -0,0 +1,60 @@ +%2$s', + esc_attr( 'wp-block-calendar' . $custom_class_name . $align_class_name ), + get_calendar( true, false ) + ); +} + +/** + * 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' ); diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss new file mode 100644 index 00000000000000..5fecf976e64b4b --- /dev/null +++ b/packages/block-library/src/calendar/style.scss @@ -0,0 +1,62 @@ +.wp-block-calendar { + text-align: center; + border: 2px solid $light-gray-500; + + table { + width: 100%; + border-collapse: collapse; + font-family: $default-font; + } + + table thead { + display: table-row-group; + } + + table tfoot { + display: table-header-group; + border-bottom: 2px solid $light-gray-500; + } + + table tfoot, + caption { + font-weight: 600; + background: $light-gray-300; + } + + table tfoot tr td#prev a, + table tfoot tr td#next a { + color: transparent; + overflow: hidden; + max-height: 40px; + width: 16px; + + } + + table tfoot tr td#prev a::before, + table tfoot tr td#next a::after { + // Disabling lint because in this case we need dashicons and not + // a generic font. + /* stylelint-disable */ + font-family: dashicons; + /* stylelint-enable */ + display: inline-block; + color: $black; + } + + table tfoot tr td#prev a::before { + content: "\f141"; + } + + table tfoot tr td#next a::after { + content: "\f139"; + } + + table td, + table th { + border: none; + } + + a { + text-decoration: underline; + } +} diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index aac4e56fc7a8b5..1439edcc350ecc 100644 --- a/packages/block-library/src/index.js +++ b/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, diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 35168d85ab237d..f9a53b92214177 100644 --- a/packages/block-library/src/style.scss +++ b/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"; diff --git a/test/integration/full-content/fixtures/core__calendar.html b/test/integration/full-content/fixtures/core__calendar.html new file mode 100644 index 00000000000000..bef2c9d140267e --- /dev/null +++ b/test/integration/full-content/fixtures/core__calendar.html @@ -0,0 +1 @@ + diff --git a/test/integration/full-content/fixtures/core__calendar.json b/test/integration/full-content/fixtures/core__calendar.json new file mode 100644 index 00000000000000..e0d590b3b9dc1d --- /dev/null +++ b/test/integration/full-content/fixtures/core__calendar.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/calendar", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/full-content/fixtures/core__calendar.parsed.json b/test/integration/full-content/fixtures/core__calendar.parsed.json new file mode 100644 index 00000000000000..eceba9dddbe8ef --- /dev/null +++ b/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" + ] + } +] diff --git a/test/integration/full-content/fixtures/core__calendar.serialized.html b/test/integration/full-content/fixtures/core__calendar.serialized.html new file mode 100644 index 00000000000000..bef2c9d140267e --- /dev/null +++ b/test/integration/full-content/fixtures/core__calendar.serialized.html @@ -0,0 +1 @@ + From baf00e2797fa4dac4159183245ca809470956c45 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 12 Feb 2019 21:32:17 +0000 Subject: [PATCH 2/4] New styles version --- .../block-library/src/calendar/style.scss | 63 ++++++------------- 1 file changed, 19 insertions(+), 44 deletions(-) diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index 5fecf976e64b4b..422fc525e0759d 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -1,62 +1,37 @@ .wp-block-calendar { text-align: center; - border: 2px solid $light-gray-500; - table { - width: 100%; - border-collapse: collapse; - font-family: $default-font; + th, + tbody td { + padding: 4px; + border: 1px solid $light-gray-500; } - table thead { - display: table-row-group; + tfoot td { + border: none; } - table tfoot { - display: table-header-group; - border-bottom: 2px solid $light-gray-500; + table { + width: 100%; + border-collapse: collapse; + font-family: $default-font; } - table tfoot, - caption { - font-weight: 600; + table th { + font-weight: 440; background: $light-gray-300; } - table tfoot tr td#prev a, - table tfoot tr td#next a { - color: transparent; - overflow: hidden; - max-height: 40px; - width: 16px; - - } - - table tfoot tr td#prev a::before, - table tfoot tr td#next a::after { - // Disabling lint because in this case we need dashicons and not - // a generic font. - /* stylelint-disable */ - font-family: dashicons; - /* stylelint-enable */ - display: inline-block; - color: $black; - } - - table tfoot tr td#prev a::before { - content: "\f141"; - } - - table tfoot tr td#next a::after { - content: "\f139"; + a { + text-decoration: underline; } - table td, - table th { - border: none; + tfoot a { + color: #0073aa; } - a { - text-decoration: underline; + table tbody, + table caption { + color: $dark-gray-600; } } From ac53ae91fe29547328d55d97493cc32fd118225d Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 13 Feb 2019 17:16:54 +0000 Subject: [PATCH 3/4] Code improvements. --- packages/block-library/src/calendar/index.php | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index c5f5ae0924bdd2..04ffa9d9483676 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -13,14 +13,22 @@ * @return string Returns the block content. */ function render_block_core_calendar( $attributes ) { - global $monthnum, $year; + global $monthnum, $year, $post; + $previous_monthnum; + $previous_year; + + // phpcs:disable WordPress.WP.GlobalVariablesOverride.OverrideProhibited if ( isset( $attributes['month'] ) ) { - $monthnum = $attributes['month']; + $previous_monthnum = $monthnum; + $monthnum = $attributes['month']; } if ( isset( $attributes['year'] ) ) { - $year = $attributes['year']; + $previous_year = $year; + $year = $attributes['year']; } + // phpcs:enable WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $custom_class_name = empty( $attributes['className'] ) ? '' : ' ' . $attributes['className']; $align_class_name = empty( $attributes['align'] ) ? '' : ' ' . "align{$attributes['align']}"; @@ -29,6 +37,16 @@ function render_block_core_calendar( $attributes ) { esc_attr( 'wp-block-calendar' . $custom_class_name . $align_class_name ), get_calendar( true, false ) ); + + // phpcs:disable WordPress.WP.GlobalVariablesOverride.OverrideProhibited + if ( isset( $attributes['month'] ) ) { + $monthnum = $previous_monthnum; + } + + if ( isset( $attributes['year'] ) ) { + $year = $previous_year; + } + // phpcs:enable WordPress.WP.GlobalVariablesOverride.OverrideProhibited } /** @@ -45,7 +63,7 @@ function register_block_core_calendar() { 'className' => array( 'type' => 'string', ), - 'month' => array( + 'month' => array( 'type' => 'integer', ), 'year' => array( From 4c6abfb4691b60af1c1d87cddc5e4029f0176b9c Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 14 Feb 2019 09:34:41 +0000 Subject: [PATCH 4/4] Addressed code review --- packages/block-library/src/calendar/index.php | 27 +++++++------------ .../block-library/src/calendar/style.scss | 2 +- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index 04ffa9d9483676..9177997692f400 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -14,20 +14,18 @@ */ function render_block_core_calendar( $attributes ) { global $monthnum, $year, $post; - $previous_monthnum; - $previous_year; + $previous_monthnum = $monthnum; + $previous_year = $year; - // phpcs:disable WordPress.WP.GlobalVariablesOverride.OverrideProhibited if ( isset( $attributes['month'] ) ) { - $previous_monthnum = $monthnum; - $monthnum = $attributes['month']; + // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $monthnum = $attributes['month']; } if ( isset( $attributes['year'] ) ) { - $previous_year = $year; - $year = $attributes['year']; + // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $year = $attributes['year']; } - // phpcs:enable WordPress.WP.GlobalVariablesOverride.OverrideProhibited $custom_class_name = empty( $attributes['className'] ) ? '' : ' ' . $attributes['className']; $align_class_name = empty( $attributes['align'] ) ? '' : ' ' . "align{$attributes['align']}"; @@ -38,15 +36,10 @@ function render_block_core_calendar( $attributes ) { get_calendar( true, false ) ); - // phpcs:disable WordPress.WP.GlobalVariablesOverride.OverrideProhibited - if ( isset( $attributes['month'] ) ) { - $monthnum = $previous_monthnum; - } - - if ( isset( $attributes['year'] ) ) { - $year = $previous_year; - } - // phpcs:enable WordPress.WP.GlobalVariablesOverride.OverrideProhibited + // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $monthnum = $previous_monthnum; + // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $year = $previous_year; } /** diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index 422fc525e0759d..f6fc8f3a5ad7be 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -27,7 +27,7 @@ } tfoot a { - color: #0073aa; + color: $blue-medium-800; } table tbody,