From cb6895cbf84669678917e74540853cdaa6299dec Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Fri, 29 Apr 2022 14:16:01 +0530 Subject: [PATCH 1/9] Add image-card and material-card --- .../block-editor/blocks/card-image/block.json | 13 ++ .../block-editor/blocks/card-image/edit.js | 68 ++++++++ .../block-editor/blocks/card-image/index.js | 33 ++++ .../block-editor/blocks/card-image/style.css | 39 +++++ .../block-editor/blocks/card-query/block.json | 48 +++++ .../block-editor/blocks/card-query/edit.js | 74 ++++++++ .../blocks/card-query/elevationControl.js | 53 ++++++ .../block-editor/blocks/card-query/icon.js | 35 ++++ .../block-editor/blocks/card-query/index.js | 33 ++++ .../blocks/card-query/inspectControl.js | 137 +++++++++++++++ .../block-patterns/material-card-image.php | 32 ++++ plugin/php/block-patterns/material-card.php | 32 ++++ plugin/php/blocks/class-blocks.php | 164 ++++++++++++++++++ plugin/php/class-block-patterns.php | 2 + plugin/php/class-block-types.php | 4 + .../php/template-parts/blocks/card-query.php | 147 ++++++++++++++++ .../blocks/image-card-query.php | 42 +++++ 17 files changed, 956 insertions(+) create mode 100644 plugin/assets/src/block-editor/blocks/card-image/block.json create mode 100644 plugin/assets/src/block-editor/blocks/card-image/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/card-image/index.js create mode 100644 plugin/assets/src/block-editor/blocks/card-image/style.css create mode 100644 plugin/assets/src/block-editor/blocks/card-query/block.json create mode 100644 plugin/assets/src/block-editor/blocks/card-query/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/card-query/elevationControl.js create mode 100644 plugin/assets/src/block-editor/blocks/card-query/icon.js create mode 100644 plugin/assets/src/block-editor/blocks/card-query/index.js create mode 100644 plugin/assets/src/block-editor/blocks/card-query/inspectControl.js create mode 100644 plugin/php/block-patterns/material-card-image.php create mode 100644 plugin/php/block-patterns/material-card.php create mode 100644 plugin/php/blocks/class-blocks.php create mode 100644 plugin/php/template-parts/blocks/card-query.php create mode 100644 plugin/php/template-parts/blocks/image-card-query.php diff --git a/plugin/assets/src/block-editor/blocks/card-image/block.json b/plugin/assets/src/block-editor/blocks/card-image/block.json new file mode 100644 index 000000000..661b50de5 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-image/block.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "name": "material/image-card-query", + "category": "material", + "title": "Material Image Card for Query loop", + "supports": {}, + "apiVersion": 2, + "description": "Material image card for query loop block", + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme", + "usesContext": [ "postId", "postType", "queryId" ], + "textdomain": "material-design-google" +} diff --git a/plugin/assets/src/block-editor/blocks/card-image/edit.js b/plugin/assets/src/block-editor/blocks/card-image/edit.js new file mode 100644 index 000000000..5876fde38 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-image/edit.js @@ -0,0 +1,68 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed uder the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies + */ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import ServerSideRender from '@wordpress/server-side-render'; + +/** + * Internal dependencies + */ +import { name } from './block.json'; + +/** + * Edit. + * + * @param {Object} props + * @param {{postType:string,postId:number,queryId:number}} props.context + * @param {Object} props.attributes + * @return {JSX.Element} Block edit. + */ +const Edit = ( { context, attributes } ) => { + const urlQueryArgs = { + materialParamContext: [], + }; + // Server side rendering doesn't support passing context yet. This hack adds context as url param to later manually parse in php. + for ( const key in context ) { + urlQueryArgs.materialParamContext[ key ] = context[ key ]; + } + + const preventAnchorLink = e => { + e.preventDefault(); + return false; + }; + + return ( + <> + { /* Prevent anchor click coming from SSR. */ } + { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ } +
+ +
+ + ); +}; + +export default Edit; diff --git a/plugin/assets/src/block-editor/blocks/card-image/index.js b/plugin/assets/src/block-editor/blocks/card-image/index.js new file mode 100644 index 000000000..ba34d192d --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-image/index.js @@ -0,0 +1,33 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import { icon } from '../card-query/icon'; +import edit from './edit'; + +const { name, title } = metadata; + +export { metadata, name }; + +export const settings = { + title, + description: metadata.description, + icon, + edit, +}; diff --git a/plugin/assets/src/block-editor/blocks/card-image/style.css b/plugin/assets/src/block-editor/blocks/card-image/style.css new file mode 100644 index 000000000..5c57463d0 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-image/style.css @@ -0,0 +1,39 @@ +/* + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.wp-block-material-image-card-query a { + display: block; +} + +.wp-block-material-image-card-query { + position: relative; + + .mdc-image-list__supporting { + position: absolute; + background: rgba(0, 0, 0, .6); + bottom: 7.5px; + color: #fff; + height: auto; + width: 100%; + align-items: start; + border-bottom-left-radius: var(--mdc-image-list-radius, 4px); + border-bottom-right-radius: var(--mdc-image-list-radius, 4px); + max-height: 100%; + min-height: 48px; + overflow: hidden; + padding: 8px 16px; + } +} diff --git a/plugin/assets/src/block-editor/blocks/card-query/block.json b/plugin/assets/src/block-editor/blocks/card-query/block.json new file mode 100644 index 000000000..bd01be2d7 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-query/block.json @@ -0,0 +1,48 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "name": "material/card-query", + "category": "material", + "attributes": { + "showExcerpt": { + "type": "boolean", + "default": true + }, + "showDate": { + "type": "boolean", + "default": true + }, + "showAuthor": { + "type": "boolean", + "default": true + }, + "showComments": { + "type": "boolean", + "default": true + }, + "showFeaturedImage": { + "type": "boolean", + "default": true + }, + "showTitle": { + "type": "boolean", + "default": true + }, + "postContentLength": { + "type": "number", + "default": 20 + }, + "cardStyle": { + "enum": [ "global", "elevated", "outlined"], + "default": "global", + "type": "string" + } + }, + "title": "Material Card for Query loop", + "supports": {}, + "apiVersion": 2, + "description": "Material card for query loop block", + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme", + "usesContext": [ "postId", "postType", "queryId" ], + "textdomain": "material-design-google" +} diff --git a/plugin/assets/src/block-editor/blocks/card-query/edit.js b/plugin/assets/src/block-editor/blocks/card-query/edit.js new file mode 100644 index 000000000..410da6068 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-query/edit.js @@ -0,0 +1,74 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed uder the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies + */ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import ServerSideRender from '@wordpress/server-side-render'; + +/** + * Internal dependencies + */ +import { name } from './block.json'; +import InspectControls from './inspectControl'; + +/** + * Edit. + * + * @param {Object} props + * @param {{postType:string,postId:number,queryId:number}} props.context + * @param {Function} props.setAttributes + * @param {Object} props.attributes + * @return {JSX.Element} Block edit. + */ +const Edit = ( { context, setAttributes, attributes } ) => { + const urlQueryArgs = { + materialParamContext: [], + }; + // Server side rendering doesn't support passing context yet. This hack adds context as url param to later manually parse in php. + for ( const key in context ) { + urlQueryArgs.materialParamContext[ key ] = context[ key ]; + } + + const preventAnchorLink = e => { + e.preventDefault(); + return false; + }; + + return ( + <> + + { /* Prevent anchor click coming from SSR. */ } + { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ } +
+ +
+ + ); +}; + +export default Edit; diff --git a/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js b/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js new file mode 100644 index 000000000..d67b55d28 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js @@ -0,0 +1,53 @@ +/* + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * WordPress dependencies + */ +import { RadioControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { applyFilters } from '@wordpress/hooks'; + +const ElevationStyleControl = ( { onChange, selected } ) => { + const options = applyFilters( + 'material.elevation.styleControl.options', + [ + { + label: __( 'Elevated', 'material-design-google' ), + value: 'elevated', + }, + { + label: __( 'Outlined', 'material-design-google' ), + value: 'outlined', + }, + ], + 'fse' + ); + return ( + + ); +}; + +export default ElevationStyleControl; diff --git a/plugin/assets/src/block-editor/blocks/card-query/icon.js b/plugin/assets/src/block-editor/blocks/card-query/icon.js new file mode 100644 index 000000000..10143e32f --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-query/icon.js @@ -0,0 +1,35 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Block Icon component. + * + * @return {JSX.Element} Function returning the HTML markup for the component. + */ +export const icon = () => ( + + + + + + +); diff --git a/plugin/assets/src/block-editor/blocks/card-query/index.js b/plugin/assets/src/block-editor/blocks/card-query/index.js new file mode 100644 index 000000000..14752c107 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-query/index.js @@ -0,0 +1,33 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import { icon } from './icon'; +import edit from './edit'; + +const { name, title } = metadata; + +export { metadata, name }; + +export const settings = { + title, + description: metadata.description, + icon, + edit, +}; diff --git a/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js b/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js new file mode 100644 index 000000000..21cdb7211 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js @@ -0,0 +1,137 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ +import { InspectorControls } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import genericAttributesSetter from '../../utils/generic-attributes-setter'; +import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import ElevationStyleControl from './elevationControl'; + +const MIN_POST_CONTENT_LENGTH = 10; +const MAX_POST_CONTENT_LENGTH = 30; + +/** + * @param {Object} props + * @param {Function} props.setAttributes + * @param {Object} props.attributes + * @param {boolean} props.attributes.showFeaturedImage + * @param {boolean} props.attributes.showTitle + * @param {boolean} props.attributes.showExcerpt + * @param {boolean} props.attributes.showDate + * @param {boolean} props.attributes.showAuthor + * @param {boolean} props.attributes.showComments + * @param {number} props.attributes.postContentLength + * @param {string} props.attributes.cardStyle + */ +const InspectControls = ( { + setAttributes, + attributes: { + showFeaturedImage, + showTitle, + showExcerpt, + showDate, + showAuthor, + showComments, + postContentLength, + cardStyle, + }, +} ) => { + const setter = genericAttributesSetter( setAttributes ); + return ( + + + + + + + { showExcerpt && ( + + ) } + + + + + + + + ); +}; + +export default InspectControls; diff --git a/plugin/php/block-patterns/material-card-image.php b/plugin/php/block-patterns/material-card-image.php new file mode 100644 index 000000000..835255941 --- /dev/null +++ b/plugin/php/block-patterns/material-card-image.php @@ -0,0 +1,32 @@ + __( 'Query with material image card.', 'material-design' ), + 'content' => "\n
\n\n\n\n\n\n\n\n\n\n\n\n
\n", + 'description' => __( 'Query with material image card and material pagination.', 'material-design' ), + 'blockTypes' => [ 'core/query' ], + 'categories' => [ 'material', 'query' ], +]; diff --git a/plugin/php/block-patterns/material-card.php b/plugin/php/block-patterns/material-card.php new file mode 100644 index 000000000..dadc4174e --- /dev/null +++ b/plugin/php/block-patterns/material-card.php @@ -0,0 +1,32 @@ + __( 'Query with material Card', 'material-design' ), + 'content' => "\n
\n\n\n\n\n\n\n\n\n\n\n\n
\n", + 'description' => __( 'Query with material card and pagination.', 'material-design' ), + 'blockTypes' => [ 'core/query' ], + 'categories' => [ 'material', 'query' ], +]; diff --git a/plugin/php/blocks/class-blocks.php b/plugin/php/blocks/class-blocks.php new file mode 100644 index 000000000..c41093041 --- /dev/null +++ b/plugin/php/blocks/class-blocks.php @@ -0,0 +1,164 @@ + 'template-parts/blocks/card-query.php', + 'material/image-card-query' => 'template-parts/blocks/image-card-query.php', + ]; + + /** + * Register any needed hooks/filters. + * + * @action init + */ + public function init() { + add_action( 'init', [ $this, 'action_register_blocks' ] ); + } + + /** + * Register all blocks living in the "/blocks/" folder in the theme. + */ + public function action_register_blocks() { + $folders = static::get_blocks_folders(); + + // Register blocks. + foreach ( $folders as $folder ) { + $object = static::get_block_object( $folder ); + + if ( ! $object ) { + continue; + } + + if ( ! array_key_exists( $object['name'], static::DYNAMIC_BLOCKS ) ) { + // Todo once class-block-type.php is migrated this condition can be removed. + continue; + } + + // If this is a dynamic block, register render_callback. + if ( array_key_exists( $object['name'], static::DYNAMIC_BLOCKS ) ) { + $object['render_callback'] = [ static::class, 'render' ]; + } + + /** + * Filters the arguments for registering a block type. + * + * @param array $metadata Array of arguments for registering a block type. + * @param string $name Block name. + */ + $args = apply_filters( 'material_design_block_type_args', $object, $object['name'] ); + + if ( function_exists( 'register_block_type' ) ) { + register_block_type( $folder, $args ); + } + } + } + + /** + * Get all blocks from file-system (folders). + * + * @return array + */ + public static function get_blocks_folders() { + $root_folder = __DIR__ . '/../../assets/src/block-editor/blocks'; + + return glob( $root_folder . '/*', GLOB_ONLYDIR | GLOB_MARK ); + } + + /** + * Get block object. + * + * @param string $block_folder Block folder. + * + * @return object + */ + public static function get_block_object( $block_folder ) { + $block_file = $block_folder . 'block.json'; + + if ( ! file_exists( $block_file ) ) { + return null; + } + + // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown + return json_decode( file_get_contents( $block_file ), true ); + } + + /** + * Render Dynamic blocks. + * + * @param array $attributes Block attributes. + * @param string $content Block content. + * @param object $block Block object. + * + * @return false|string + */ + public static function render( $attributes, $content, $block ) { + $template = __DIR__ . '/../' . static::DYNAMIC_BLOCKS[ $block->name ]; + + if ( ! file_exists( $template ) ) { + return false; + } + + // Remove this once server side context is available via gutenberg. + if ( ! empty( $block->block_type->uses_context ) && ! empty( $_GET['materialParamContext'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended + foreach ( $block->block_type->uses_context as $context ) { + if ( empty( $_GET['materialParamContext'][ $context ] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended + continue; + } + switch ( $context ) { + case 'postId': + case 'queryId': + $sanitize_callback = 'intval'; + break; + case 'postType': + $sanitize_callback = 'sanitize_key'; + break; + } + $block->context[ $context ] = call_user_func( $sanitize_callback, $_GET['materialParamContext'][ $context ] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized + } + } + + ob_start(); + + load_template( + $template, + false, + [ + 'attributes' => $attributes, + 'content' => $content, + 'block' => $block, + ] + ); + + return ob_get_clean(); + } +} diff --git a/plugin/php/class-block-patterns.php b/plugin/php/class-block-patterns.php index 7c3e00db2..0ea497184 100644 --- a/plugin/php/class-block-patterns.php +++ b/plugin/php/class-block-patterns.php @@ -86,6 +86,8 @@ public function register() { 'pricing', 'hero-section-image', 'latest-posts', + 'material-card', + 'material-card-image', ]; foreach ( $patterns as $pattern ) { diff --git a/plugin/php/class-block-types.php b/plugin/php/class-block-types.php index c5e17523b..2dc2de62d 100644 --- a/plugin/php/class-block-types.php +++ b/plugin/php/class-block-types.php @@ -25,6 +25,7 @@ namespace MaterialDesign\Plugin; +use MaterialDesign\Plugin\Blocks\Blocks; use MaterialDesign\Plugin\Blocks\Card_Block; use MaterialDesign\Plugin\Blocks\Posts_List_Block; use MaterialDesign\Plugin\Blocks\Contact_Form_Block; @@ -91,6 +92,9 @@ public function init() { $static_block = new Card_Block( $this->plugin, $static_card_block ); $static_block->init(); } + + $blocks = new Blocks( $this->plugin ); + $blocks->init(); } /** diff --git a/plugin/php/template-parts/blocks/card-query.php b/plugin/php/template-parts/blocks/card-query.php new file mode 100644 index 000000000..44bfce87c --- /dev/null +++ b/plugin/php/template-parts/blocks/card-query.php @@ -0,0 +1,147 @@ +context['postId'] ) ) { + return ''; +} +$post_id_card = $block->context['postId']; +$post_card = get_post( $post_id_card ); +$post_link = get_the_permalink( $post_card ); +$post_content = wp_trim_words( get_the_excerpt( $post_card ), $content_length, ' […]' ); +?> +
+ +
diff --git a/plugin/php/template-parts/blocks/image-card-query.php b/plugin/php/template-parts/blocks/image-card-query.php new file mode 100644 index 000000000..e7b97ff02 --- /dev/null +++ b/plugin/php/template-parts/blocks/image-card-query.php @@ -0,0 +1,42 @@ +context['postId']; +$post_link = get_the_permalink( $post_id_image_card ); +if ( has_post_thumbnail( $post_id_image_card ) ) { + $thumbnail = get_the_post_thumbnail_url( $post_id_image_card ); +} else { + $thumbnail = get_template_directory_uri() . '/assets/images/placeholder.png'; +} +$wrapper_attributes = get_block_wrapper_attributes(); +?> +
> + + +
+ +
+ +
From daffa861d3f13316a30d4d7021a7e6739e996108 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Fri, 29 Apr 2022 14:51:14 +0530 Subject: [PATCH 2/9] Add material pagination block --- .../blocks/card-query/elevationControl.js | 6 +- .../blocks/card-query/inspectControl.js | 22 ++--- .../blocks/query-pagination-first/block.json | 37 ++++++++ .../blocks/query-pagination-first/edit.js | 40 +++++++++ .../blocks/query-pagination-first/index.js | 41 +++++++++ .../blocks/query-pagination-last/block.json | 37 ++++++++ .../blocks/query-pagination-last/edit.js | 40 +++++++++ .../blocks/query-pagination-last/index.js | 41 +++++++++ .../blocks/query-pagination-next/block.json | 45 ++++++++++ .../blocks/query-pagination-next/edit.js | 40 +++++++++ .../blocks/query-pagination-next/index.js | 41 +++++++++ .../query-pagination-previous/block.json | 37 ++++++++ .../blocks/query-pagination-previous/edit.js | 40 +++++++++ .../blocks/query-pagination-previous/index.js | 41 +++++++++ .../blocks/query-pagination/block.json | 35 ++++++++ .../blocks/query-pagination/edit.js | 55 ++++++++++++ .../blocks/query-pagination/hooks.js | 44 ++++++++++ .../blocks/query-pagination/index.js | 45 ++++++++++ .../blocks/query-pagination/save.js | 26 ++++++ plugin/php/blocks/class-blocks.php | 9 +- plugin/php/class-block-patterns.php | 2 +- .../blocks/query-pagination-first.php | 70 +++++++++++++++ .../blocks/query-pagination-last.php | 79 +++++++++++++++++ .../blocks/query-pagination-next.php | 85 +++++++++++++++++++ .../blocks/query-pagination-previous.php | 73 ++++++++++++++++ .../blocks/query-pagination.php | 41 +++++++++ 26 files changed, 1055 insertions(+), 17 deletions(-) create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-first/block.json create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-first/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-first/index.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-last/block.json create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-last/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-last/index.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-next/block.json create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-next/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-next/index.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-previous/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination/block.json create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination/edit.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination/hooks.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination/index.js create mode 100644 plugin/assets/src/block-editor/blocks/query-pagination/save.js create mode 100644 plugin/php/template-parts/blocks/query-pagination-first.php create mode 100644 plugin/php/template-parts/blocks/query-pagination-last.php create mode 100644 plugin/php/template-parts/blocks/query-pagination-next.php create mode 100644 plugin/php/template-parts/blocks/query-pagination-previous.php create mode 100644 plugin/php/template-parts/blocks/query-pagination.php diff --git a/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js b/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js index d67b55d28..1fe2bb00f 100644 --- a/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js +++ b/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js @@ -26,11 +26,11 @@ const ElevationStyleControl = ( { onChange, selected } ) => { 'material.elevation.styleControl.options', [ { - label: __( 'Elevated', 'material-design-google' ), + label: __( 'Elevated', 'material-design' ), value: 'elevated', }, { - label: __( 'Outlined', 'material-design-google' ), + label: __( 'Outlined', 'material-design' ), value: 'outlined', }, ], @@ -41,7 +41,7 @@ const ElevationStyleControl = ( { onChange, selected } ) => { label={ __( 'Elevation style', 'material-design' ) } help={ __( 'Elevation style whether elevated or outlined.', - 'material-design-google' + 'material-design' ) } selected={ selected } options={ options } diff --git a/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js b/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js index 21cdb7211..3e2b17aa3 100644 --- a/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js +++ b/plugin/assets/src/block-editor/blocks/card-query/inspectControl.js @@ -66,31 +66,31 @@ const InspectControls = ( { @@ -98,7 +98,7 @@ const InspectControls = ( { ) } diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json new file mode 100644 index 000000000..91454317a --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json @@ -0,0 +1,37 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "material/query-pagination-first", + "title": "First Page", + "category": "material", + "parent": [ "material/query-pagination" ], + "description": "Displays the first posts page link.", + "textdomain": "material-design-google", + "attributes": { + "label": { + "type": "string" + } + }, + "usesContext": [ "queryId", "query" ], + "supports": { + "reusable": false, + "html": false, + "color": { + "gradients": true, + "text": false + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme" +} diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-first/edit.js b/plugin/assets/src/block-editor/blocks/query-pagination-first/edit.js new file mode 100644 index 000000000..327f2c9ea --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-first/edit.js @@ -0,0 +1,40 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; + +const QueryPaginationFirstEdit = () => { + return ( + event.preventDefault() } + { ...useBlockProps() } + > + + + { __( 'First page', 'material-design' ) } + + + ); +}; + +export default QueryPaginationFirstEdit; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js new file mode 100644 index 000000000..a57ef2a8b --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js @@ -0,0 +1,41 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon: () => ( + + + + + + + ), + edit, +}; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json new file mode 100644 index 000000000..90017b304 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json @@ -0,0 +1,37 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "material/query-pagination-last", + "title": "Last Page", + "category": "material", + "parent": [ "material/query-pagination" ], + "description": "Displays the last posts page link.", + "textdomain": "material-design-google", + "attributes": { + "label": { + "type": "string" + } + }, + "usesContext": [ "queryId", "query" ], + "supports": { + "reusable": false, + "html": false, + "color": { + "gradients": true, + "text": false + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme" +} diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-last/edit.js b/plugin/assets/src/block-editor/blocks/query-pagination-last/edit.js new file mode 100644 index 000000000..6546fb368 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-last/edit.js @@ -0,0 +1,40 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; + +const QueryPaginationLastEdit = () => { + return ( + event.preventDefault() } + { ...useBlockProps() } + > + + + { __( 'Last page', 'material-design' ) } + + + ); +}; + +export default QueryPaginationLastEdit; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js new file mode 100644 index 000000000..321e9157e --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js @@ -0,0 +1,41 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon: () => ( + + + + + + + ), + edit, +}; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json new file mode 100644 index 000000000..396dd60dc --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json @@ -0,0 +1,45 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "material/query-pagination-next", + "title": "Next Page", + "category": "material", + "parent": [ "material/query-pagination" ], + "description": "Displays the next posts page link.", + "textdomain": "material-design-google", + "attributes": { + "label": { + "type": "string" + }, + "className": { + "type": "string", + "default": "mdc-ripple-surface" + }, + "class": { + "type": "string", + "default": "mdc-ripple-surface" + } + }, + "usesContext": [ "queryId", "query" ], + "supports": { + "reusable": false, + "html": false, + "color": { + "gradients": true, + "text": false + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme" +} diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-next/edit.js b/plugin/assets/src/block-editor/blocks/query-pagination-next/edit.js new file mode 100644 index 000000000..45da8e677 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-next/edit.js @@ -0,0 +1,40 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; + +const QueryPaginationNextEdit = () => { + return ( + event.preventDefault() } + { ...useBlockProps() } + > + + + { __( 'Next page', 'material-design' ) } + + + ); +}; + +export default QueryPaginationNextEdit; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js new file mode 100644 index 000000000..655e70a78 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js @@ -0,0 +1,41 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon: () => ( + + + + + + + ), + edit, +}; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json new file mode 100644 index 000000000..20723be3f --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json @@ -0,0 +1,37 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "material/query-pagination-previous", + "title": "Previous Page", + "category": "material", + "parent": [ "material/query-pagination" ], + "description": "Displays the previous posts page link.", + "textdomain": "material-design-google", + "attributes": { + "label": { + "type": "string" + } + }, + "usesContext": [ "queryId", "query" ], + "supports": { + "reusable": false, + "html": false, + "color": { + "gradients": true, + "text": false + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme" +} diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-previous/edit.js b/plugin/assets/src/block-editor/blocks/query-pagination-previous/edit.js new file mode 100644 index 000000000..69b3aec08 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-previous/edit.js @@ -0,0 +1,40 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; + +const QueryPaginationPreviousEdit = () => { + return ( + event.preventDefault() } + { ...useBlockProps() } + > + + + { __( 'Previous page', 'material-design' ) } + + + ); +}; + +export default QueryPaginationPreviousEdit; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js new file mode 100644 index 000000000..8ca902d80 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js @@ -0,0 +1,41 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon: () => ( + + + + + + + ), + edit, +}; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/block.json b/plugin/assets/src/block-editor/blocks/query-pagination/block.json new file mode 100644 index 000000000..af5c8a462 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination/block.json @@ -0,0 +1,35 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "material/query-pagination", + "title": "Material Pagination", + "category": "material", + "parent": [ "core/query" ], + "description": "Displays a paginated navigation to next/previous set of posts, when applicable.", + "textdomain": "material-design", + "attributes": { + "paginationArrow": { + "type": "string", + "default": "none" + } + }, + "usesContext": [ "queryId", "query" ], + "supports": { + "align": true, + "reusable": false, + "html": false, + "color": { + "gradients": true, + "link": true + }, + "__experimentalLayout": { + "allowSwitching": false, + "allowInheriting": false, + "default": { + "type": "flex" + } + } + }, + "editorStyle": "material-block-editor-css-theme", + "editorScript": "material-block-editor-js-theme" +} diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/edit.js b/plugin/assets/src/block-editor/blocks/query-pagination/edit.js new file mode 100644 index 000000000..12e1725f6 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination/edit.js @@ -0,0 +1,55 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * WordPress dependencies + */ +import { getBlockSupport } from '@wordpress/blocks'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; + +// Override core template. +const TEMPLATE = [ + [ 'material/query-pagination-first' ], + [ 'material/query-pagination-previous' ], + [ 'material/query-pagination-next' ], + [ 'material/query-pagination-last' ], +]; + +const getDefaultBlockLayout = blockTypeOrName => { + const layoutBlockSupportConfig = getBlockSupport( + blockTypeOrName, + '__experimentalLayout' + ); + + return layoutBlockSupportConfig?.default; +}; + +const QueryPaginationEdit = ( { attributes: { layout }, name } ) => { + const usedLayout = layout || getDefaultBlockLayout( name ); + const blockProps = useBlockProps(); + const innerBlockProps = useInnerBlocksProps( blockProps, { + template: TEMPLATE, + allowedBlocks: TEMPLATE, + __experimentalLayout: usedLayout, + } ); + + return ( + <> +
+ + ); +}; + +export default QueryPaginationEdit; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/hooks.js b/plugin/assets/src/block-editor/blocks/query-pagination/hooks.js new file mode 100644 index 000000000..4b741bcda --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination/hooks.js @@ -0,0 +1,44 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { __ } from '@wordpress/i18n'; + +const addMaterialStyle = ( settings, name ) => { + if ( 'core/query-pagination' === name ) { + settings.styles = [ + { + name: 'material', + label: __( 'Material', 'material-design' ), + }, + { + name: 'regular', + label: __( 'Regular', 'material-design' ), + isDefault: true, + }, + ]; + } + + return settings; +}; + +addFilter( + 'blocks.registerBlockType', + 'material/query-navigation-style', + addMaterialStyle +); diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/index.js b/plugin/assets/src/block-editor/blocks/query-pagination/index.js new file mode 100644 index 000000000..95c281b54 --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination/index.js @@ -0,0 +1,45 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * Internal dependencies + */ + +import metadata from './block.json'; +import './hooks'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon: () => ( + + + + + + + ), + edit, + save, +}; diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/save.js b/plugin/assets/src/block-editor/blocks/query-pagination/save.js new file mode 100644 index 000000000..caf0ef46c --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/query-pagination/save.js @@ -0,0 +1,26 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +const Save = () => { + return ; +}; + +export default Save; diff --git a/plugin/php/blocks/class-blocks.php b/plugin/php/blocks/class-blocks.php index c41093041..e93c27373 100644 --- a/plugin/php/blocks/class-blocks.php +++ b/plugin/php/blocks/class-blocks.php @@ -32,8 +32,13 @@ class Blocks extends Module_Base { * Dynamic blocks. */ const DYNAMIC_BLOCKS = [ - 'material/card-query' => 'template-parts/blocks/card-query.php', - 'material/image-card-query' => 'template-parts/blocks/image-card-query.php', + 'material/card-query' => 'template-parts/blocks/card-query.php', + 'material/image-card-query' => 'template-parts/blocks/image-card-query.php', + 'material/query-pagination' => 'template-parts/blocks/query-pagination.php', + 'material/query-pagination-next' => 'template-parts/blocks/query-pagination-next.php', + 'material/query-pagination-previous' => 'template-parts/blocks/query-pagination-previous.php', + 'material/query-pagination-first' => 'template-parts/blocks/query-pagination-first.php', + 'material/query-pagination-last' => 'template-parts/blocks/query-pagination-last.php', ]; /** diff --git a/plugin/php/class-block-patterns.php b/plugin/php/class-block-patterns.php index 0ea497184..810a770fb 100644 --- a/plugin/php/class-block-patterns.php +++ b/plugin/php/class-block-patterns.php @@ -50,7 +50,7 @@ public function __construct( Plugin $plugin ) { * Initiate the class. */ public function init() { - add_action( 'init', [ $this, 'register' ] ); + add_action( 'init', [ $this, 'register' ], 9 ); } /** diff --git a/plugin/php/template-parts/blocks/query-pagination-first.php b/plugin/php/template-parts/blocks/query-pagination-first.php new file mode 100644 index 000000000..f0537dee3 --- /dev/null +++ b/plugin/php/template-parts/blocks/query-pagination-first.php @@ -0,0 +1,70 @@ +context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; +/** + * Copied from core without nonce verification. + */ +$page_number = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; // phpcs:ignore WordPress.Security.NonceVerification.Recommended +$wrapper_attributes = get_block_wrapper_attributes(); +$default_label = __( 'First', 'material-design' ); +$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; +$content = ''; +$url = ''; + +// Check if the pagination is for Query that inherits the global context +// and handle appropriately. +if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + global $wp_query; + $url = get_pagenum_link( 1 ); + $query_page_number = (int) get_query_var( 'paged' ); + $page_number = $query_page_number > 0 ? $query_page_number : $page_number; +} else { + $url = add_query_arg( $page_key, 1 ); +} +$is_disabled = 1 === $page_number; + +if ( ! empty( $url ) ) : + $screen_reader = sprintf( + /* translators: available page description. */ + esc_html__( '%s page', 'material-design' ), + esc_html( $label ) + ); + $inner_content = sprintf( + ' + %s', + $screen_reader + ); + $inner_content_with_anchor = $is_disabled ? $inner_content : sprintf( + '%s', + esc_url( $url ), + $inner_content + ); + $content = sprintf( + '
  • %s
    • ', + $wrapper_attributes, + $inner_content_with_anchor + ); + ?> + context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; +/** + * Copied from core without nonce verification. + */ +$page_number = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; // phpcs:ignore WordPress.Security.NonceVerification.Recommended +$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0; +$wrapper_attributes = get_block_wrapper_attributes(); +$default_label = __( 'Last', 'material-design' ); +$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; +$content = ''; +$url = ''; +$is_disabled = false; +// Check if the pagination is for Query that inherits the global context. +if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + + // Take into account if we have set a bigger `max page` + // than what the query has. + global $wp_query; + $max_page = $wp_query->max_num_pages; + $url = get_pagenum_link( $max_page ); + $current_page_num = get_query_var( 'paged' ); + $is_disabled = (int) $current_page_num === (int) $max_page; + +} elseif ( ! $max_page || $max_page > $page_number ) { + $custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page_number ) ); + $custom_query_max_pages = (int) $custom_query->max_num_pages; + $is_disabled = $custom_query_max_pages === $page_number; + $url = add_query_arg( $page_key, $custom_query_max_pages ); + + wp_reset_postdata(); // Restore original Post Data. +} + +if ( ! empty( $url ) ) : + $screen_reader = sprintf( + /* translators: available page description. */ + esc_html__( '%s page', 'material-design' ), + esc_html( $label ) + ); + $inner_content = sprintf( + ' + %s', + $screen_reader + ); + $inner_content_with_anchor = $is_disabled ? $inner_content : sprintf( + '%s', + esc_url( $url ), + $inner_content + ); + $content = sprintf( + '
  • %s
    • ', + $wrapper_attributes, + $inner_content_with_anchor + ); + ?> + context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; +/** + * Copied from core without nonce verification. + */ +$page_number = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; // phpcs:ignore WordPress.Security.NonceVerification.Recommended +$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0; +$default_label = __( 'Next', 'material-design' ); +$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; +$url = ''; +$content = ''; +$wrapper_attributes = get_block_wrapper_attributes(); +$is_disabled = false; + +// Check if the pagination is for Query that inherits the global context. +if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + // Take into account if we have set a bigger `max page` + // than what the query has. + global $wp_query; + + if ( $max_page > $wp_query->max_num_pages ) { + $max_page = $wp_query->max_num_pages; + } + $max_page = $wp_query->max_num_pages; + $url = get_pagenum_link( $max_page ); + $current_page_num = get_query_var( 'paged' ); + $is_disabled = (int) $current_page_num === (int) $max_page; + $url = next_posts( $max_page, false ); + // Force in loop to show disabled state, as next_posts returns empty when on last page. + $url = $url ? $url : '#'; +} elseif ( ! $max_page || $max_page > $page_number ) { + $custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page_number ) ); + $custom_query_max_pages = (int) $custom_query->max_num_pages; + $is_disabled = $custom_query_max_pages === $page_number; + // In case of disabled - url won't be used. + $url = add_query_arg( $page_key, $page_number + 1 ); + wp_reset_postdata(); // Restore original Post Data. +} + +if ( ! empty( $url ) ) : + $screen_reader = sprintf( + /* translators: available page description. */ + esc_html__( '%s page', 'material-design' ), + esc_html( $label ) + ); + $inner_content = sprintf( + ' + %s', + $screen_reader + ); + $inner_content_with_anchor = $is_disabled ? $inner_content : sprintf( + '%s', + esc_url( $url ), + $inner_content + ); + $content = sprintf( + '
  • %s
    • ', + $wrapper_attributes, + $inner_content_with_anchor + ); + ?> + context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; +/** + * Copied from core without nonce verification. + */ +$page_number = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; // phpcs:ignore WordPress.Security.NonceVerification.Recommended +$default_label = __( 'Previous', 'material-design' ); +$label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; +$content = ''; +$url = ''; +$wrapper_attributes = get_block_wrapper_attributes(); + +// Check if the pagination is for Query that inherits the global context +// and handle appropriately. +if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + global $wp_query; + $url = previous_posts( false ); + // Force in loop to show disabled state, as previous_posts returns empty when on first page. + $url = $url ? $url : '#'; + $query_page_number = (int) get_query_var( 'paged' ); + $page_number = $query_page_number > 0 ? $query_page_number : $page_number; +} else { + $url = add_query_arg( $page_key, $page_number - 1 ); +} + +$is_disabled = 1 === $page_number; + +if ( ! empty( $url ) ) : + $screen_reader = sprintf( + /* translators: available page description. */ + esc_html__( '%s page', 'material-design' ), + esc_html( $label ) + ); + $inner_content = sprintf( + ' + %s', + $screen_reader + ); + $inner_content_with_anchor = $is_disabled ? $inner_content : sprintf( + '%s', + esc_url( $url ), + $inner_content + ); + $content = sprintf( + '
  • %s
    • ', + $wrapper_attributes, + $inner_content_with_anchor + ); + ?> + + + +
      > + +
    From 87b14454db5997841d92b98d9665c59c1586f28e Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Fri, 29 Apr 2022 15:01:27 +0530 Subject: [PATCH 3/9] Update css and js handle for ported block; Fix pattern --- .../block-editor/blocks/card-image/block.json | 4 ++-- .../block-editor/blocks/card-query/block.json | 4 ++-- .../blocks/query-pagination-first/block.json | 4 ++-- .../blocks/query-pagination-last/block.json | 4 ++-- .../blocks/query-pagination-next/block.json | 4 ++-- .../blocks/query-pagination-previous/block.json | 4 ++-- .../blocks/query-pagination/block.json | 4 ++-- .../php/block-patterns/material-card-image.php | 16 +++++++++++++++- plugin/php/block-patterns/material-card.php | 16 +++++++++++++++- 9 files changed, 44 insertions(+), 16 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/card-image/block.json b/plugin/assets/src/block-editor/blocks/card-image/block.json index 661b50de5..13ee98fd1 100644 --- a/plugin/assets/src/block-editor/blocks/card-image/block.json +++ b/plugin/assets/src/block-editor/blocks/card-image/block.json @@ -6,8 +6,8 @@ "supports": {}, "apiVersion": 2, "description": "Material image card for query loop block", - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme", + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js", "usesContext": [ "postId", "postType", "queryId" ], "textdomain": "material-design-google" } diff --git a/plugin/assets/src/block-editor/blocks/card-query/block.json b/plugin/assets/src/block-editor/blocks/card-query/block.json index bd01be2d7..ecf98fe77 100644 --- a/plugin/assets/src/block-editor/blocks/card-query/block.json +++ b/plugin/assets/src/block-editor/blocks/card-query/block.json @@ -41,8 +41,8 @@ "supports": {}, "apiVersion": 2, "description": "Material card for query loop block", - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme", + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js", "usesContext": [ "postId", "postType", "queryId" ], "textdomain": "material-design-google" } diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json index 91454317a..e53d778b1 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json +++ b/plugin/assets/src/block-editor/blocks/query-pagination-first/block.json @@ -32,6 +32,6 @@ } } }, - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme" + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js" } diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json index 90017b304..f4bd16b29 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json +++ b/plugin/assets/src/block-editor/blocks/query-pagination-last/block.json @@ -32,6 +32,6 @@ } } }, - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme" + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js" } diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json index 396dd60dc..5ed96a8b5 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json +++ b/plugin/assets/src/block-editor/blocks/query-pagination-next/block.json @@ -40,6 +40,6 @@ } } }, - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme" + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js" } diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json b/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json index 20723be3f..13be4d0b7 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json +++ b/plugin/assets/src/block-editor/blocks/query-pagination-previous/block.json @@ -32,6 +32,6 @@ } } }, - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme" + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js" } diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/block.json b/plugin/assets/src/block-editor/blocks/query-pagination/block.json index af5c8a462..dc9f1e4cb 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination/block.json +++ b/plugin/assets/src/block-editor/blocks/query-pagination/block.json @@ -30,6 +30,6 @@ } } }, - "editorStyle": "material-block-editor-css-theme", - "editorScript": "material-block-editor-js-theme" + "editorStyle": "material-block-editor-css", + "editorScript": "material-block-editor-js" } diff --git a/plugin/php/block-patterns/material-card-image.php b/plugin/php/block-patterns/material-card-image.php index 835255941..d3f2a3a88 100644 --- a/plugin/php/block-patterns/material-card-image.php +++ b/plugin/php/block-patterns/material-card-image.php @@ -25,7 +25,21 @@ return [ 'title' => __( 'Query with material image card.', 'material-design' ), - 'content' => "\n
    \n\n\n\n\n\n\n\n\n\n\n\n
    \n", + 'content' => ' +
    + + + + + + + + + + + +
    +', 'description' => __( 'Query with material image card and material pagination.', 'material-design' ), 'blockTypes' => [ 'core/query' ], 'categories' => [ 'material', 'query' ], diff --git a/plugin/php/block-patterns/material-card.php b/plugin/php/block-patterns/material-card.php index dadc4174e..843e5c4f7 100644 --- a/plugin/php/block-patterns/material-card.php +++ b/plugin/php/block-patterns/material-card.php @@ -25,7 +25,21 @@ return [ 'title' => __( 'Query with material Card', 'material-design' ), - 'content' => "\n
    \n\n\n\n\n\n\n\n\n\n\n\n
    \n", + 'content' => ' +
    + + + + + + + + + + + +
    +', 'description' => __( 'Query with material card and pagination.', 'material-design' ), 'blockTypes' => [ 'core/query' ], 'categories' => [ 'material', 'query' ], From 9452f21b2d3227c2668d713c543f222352e8c941 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Fri, 29 Apr 2022 15:08:51 +0530 Subject: [PATCH 4/9] Update test: Register query loop patterns early - Register patterns early allows them to show up first in query loop when context is set for query loop in pattern. --- plugin/tests/phpunit/php/class-test-block-patterns.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin/tests/phpunit/php/class-test-block-patterns.php b/plugin/tests/phpunit/php/class-test-block-patterns.php index 6ba6fe0ac..177507819 100644 --- a/plugin/tests/phpunit/php/class-test-block-patterns.php +++ b/plugin/tests/phpunit/php/class-test-block-patterns.php @@ -61,7 +61,7 @@ class Test_Block_Patterns extends \WP_UnitTestCase { public function test_init() { $block_patterns = get_plugin_instance()->block_patterns; - $this->assertEquals( 10, has_action( 'init', [ $block_patterns, 'register' ] ) ); + $this->assertEquals( 9, has_action( 'init', [ $block_patterns, 'register' ] ) ); } /** From 6ce62c192115b37b5e0377c75120ada2edc6288f Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Fri, 29 Apr 2022 18:36:15 +0530 Subject: [PATCH 5/9] Add card style --- plugin/assets/css/src/block-editor.css | 1 + plugin/assets/css/src/components/card.css | 70 +++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 plugin/assets/css/src/components/card.css diff --git a/plugin/assets/css/src/block-editor.css b/plugin/assets/css/src/block-editor.css index 3635dad7d..ae0018309 100644 --- a/plugin/assets/css/src/block-editor.css +++ b/plugin/assets/css/src/block-editor.css @@ -21,6 +21,7 @@ @import "./base/variables.css"; @import "./conf/index.css"; @import "./components/masonry-grid.css"; +@import "./components/card.css"; @import "./overrides.css"; @import "./material-components.css"; diff --git a/plugin/assets/css/src/components/card.css b/plugin/assets/css/src/components/card.css new file mode 100644 index 000000000..22c2d6809 --- /dev/null +++ b/plugin/assets/css/src/components/card.css @@ -0,0 +1,70 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.post-card { + + &.sticky .post-card__title { + align-items: center; + display: flex; + } + + &.sticky .post-card__title .material-icons { + margin-right: 5px; + } + + & .post-card__title a { + text-decoration: none; + } + + & a:focus { + outline: 1px dotted; + } + + .mdc-card__action--button { + text-transform: none; + } + + .mdc-card__action-buttons .mdc-button__icon { + color: var(--mdc-theme-primary, #6200ee); + } + + .post-card__primary, + .post-card__secondary { + padding-left: 1rem; + padding-right: 1rem; + } + + .post-card__subtitle { + color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + } + + .mdc-card__media { + + & img { + bottom: 0; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + } + + .avatar { + border-radius: 50%; + margin-right: 1rem; + } +} From d4c855057d1178e38ae3bd2f0f34ef6ab3fd01b8 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 3 May 2022 16:49:35 +0530 Subject: [PATCH 6/9] Restrict query loop to WP 5.8 and above --- .../src/block-editor/blocks/card-image/index.js | 3 ++- .../src/block-editor/blocks/card-query/index.js | 3 ++- .../blocks/query-pagination-first/index.js | 3 ++- .../blocks/query-pagination-last/index.js | 3 ++- .../blocks/query-pagination-next/index.js | 3 ++- .../blocks/query-pagination-previous/index.js | 3 ++- .../block-editor/blocks/query-pagination/index.js | 3 ++- plugin/assets/src/block-editor/helpers/index.js | 12 ++++++++++-- plugin/php/class-block-types.php | 1 + 9 files changed, 25 insertions(+), 9 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/card-image/index.js b/plugin/assets/src/block-editor/blocks/card-image/index.js index ba34d192d..4027a7776 100644 --- a/plugin/assets/src/block-editor/blocks/card-image/index.js +++ b/plugin/assets/src/block-editor/blocks/card-image/index.js @@ -23,7 +23,8 @@ import edit from './edit'; const { name, title } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { title, diff --git a/plugin/assets/src/block-editor/blocks/card-query/index.js b/plugin/assets/src/block-editor/blocks/card-query/index.js index 14752c107..391fdc349 100644 --- a/plugin/assets/src/block-editor/blocks/card-query/index.js +++ b/plugin/assets/src/block-editor/blocks/card-query/index.js @@ -23,7 +23,8 @@ import edit from './edit'; const { name, title } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { title, diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js index a57ef2a8b..f7c574f3e 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js +++ b/plugin/assets/src/block-editor/blocks/query-pagination-first/index.js @@ -20,7 +20,8 @@ import metadata from './block.json'; import edit from './edit'; const { name } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { icon: () => ( diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js index 321e9157e..e72637589 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js +++ b/plugin/assets/src/block-editor/blocks/query-pagination-last/index.js @@ -20,7 +20,8 @@ import metadata from './block.json'; import edit from './edit'; const { name } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { icon: () => ( diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js index 655e70a78..cb5b0f050 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js +++ b/plugin/assets/src/block-editor/blocks/query-pagination-next/index.js @@ -20,7 +20,8 @@ import metadata from './block.json'; import edit from './edit'; const { name } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { icon: () => ( diff --git a/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js b/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js index 8ca902d80..1e92679ad 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js +++ b/plugin/assets/src/block-editor/blocks/query-pagination-previous/index.js @@ -20,7 +20,8 @@ import metadata from './block.json'; import edit from './edit'; const { name } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { icon: () => ( diff --git a/plugin/assets/src/block-editor/blocks/query-pagination/index.js b/plugin/assets/src/block-editor/blocks/query-pagination/index.js index 95c281b54..c99934256 100644 --- a/plugin/assets/src/block-editor/blocks/query-pagination/index.js +++ b/plugin/assets/src/block-editor/blocks/query-pagination/index.js @@ -23,7 +23,8 @@ import edit from './edit'; import save from './save'; const { name } = metadata; -export { metadata, name }; +const isQueryLoopRequired = true; +export { metadata, name, isQueryLoopRequired }; export const settings = { icon: () => ( diff --git a/plugin/assets/src/block-editor/helpers/index.js b/plugin/assets/src/block-editor/helpers/index.js index 567289379..0ec220fd0 100644 --- a/plugin/assets/src/block-editor/helpers/index.js +++ b/plugin/assets/src/block-editor/helpers/index.js @@ -26,8 +26,16 @@ import { registerBlockType } from '@wordpress/blocks'; */ export const registerBlocks = blocks => { blocks.keys().forEach( modulePath => { - const { name, settings, metadata } = blocks( modulePath ); - registerBlockType( name, { ...settings, ...( metadata || {} ) } ); + const { name, settings, metadata, isQueryLoopRequired } = blocks( + modulePath + ); + + if ( + ! isQueryLoopRequired || + window?.materialDesign?.canUseQueryLoop + ) { + registerBlockType( name, { ...settings, ...( metadata || {} ) } ); + } } ); }; diff --git a/plugin/php/class-block-types.php b/plugin/php/class-block-types.php index 2dc2de62d..8bdbaa95e 100644 --- a/plugin/php/class-block-types.php +++ b/plugin/php/class-block-types.php @@ -244,6 +244,7 @@ public function enqueue_block_editor_assets() { ], 'postTypes' => $post_types, 'doesRequireBackCompatList' => version_compare( get_bloginfo( 'version' ), '5.8', '<' ), + 'canUseQueryLoop' => version_compare( '5.8', get_bloginfo( 'version' ), '<=' ), ]; if ( Helpers::is_current_user_admin_or_editor_with_manage_options() ) { From 1811ada08da343c4e5dead5caaf343eec4137af5 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 3 May 2022 17:51:04 +0530 Subject: [PATCH 7/9] Add block registration condition in php --- plugin/php/blocks/class-blocks.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugin/php/blocks/class-blocks.php b/plugin/php/blocks/class-blocks.php index e93c27373..cf14c7600 100644 --- a/plugin/php/blocks/class-blocks.php +++ b/plugin/php/blocks/class-blocks.php @@ -47,7 +47,10 @@ class Blocks extends Module_Base { * @action init */ public function init() { - add_action( 'init', [ $this, 'action_register_blocks' ] ); + // Only add block for 5.8 or later. + if ( version_compare( '5.8', get_bloginfo( 'version' ), '<=' ) ) { + add_action( 'init', [ $this, 'action_register_blocks' ] ); + } } /** From 858056ffab4dded9ac98c4a4cce196bad857f557 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 3 May 2022 18:18:51 +0530 Subject: [PATCH 8/9] Support global elevation directly --- .../blocks/card-query/elevationControl.js | 29 +++++++++---------- .../php/template-parts/blocks/card-query.php | 4 ++- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js b/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js index 1fe2bb00f..e745d83b6 100644 --- a/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js +++ b/plugin/assets/src/block-editor/blocks/card-query/elevationControl.js @@ -19,23 +19,22 @@ */ import { RadioControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { applyFilters } from '@wordpress/hooks'; const ElevationStyleControl = ( { onChange, selected } ) => { - const options = applyFilters( - 'material.elevation.styleControl.options', - [ - { - label: __( 'Elevated', 'material-design' ), - value: 'elevated', - }, - { - label: __( 'Outlined', 'material-design' ), - value: 'outlined', - }, - ], - 'fse' - ); + const options = [ + { + label: __( 'Elevated', 'material-design' ), + value: 'elevated', + }, + { + label: __( 'Outlined', 'material-design' ), + value: 'outlined', + }, + { + label: __( 'Inherit from Global Settings', 'material-design' ), + value: 'global', + }, + ]; return ( block_types->get_global_styles( 'card_style' ); $classes = $card_style === 'outlined' || ( $card_style === 'global' && $global_card_style === 'outlined' ) ? 'mdc-card--outlined' : ''; From 23fd1dd0339672bd2b3be117b300037892315153 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Wed, 4 May 2022 17:58:52 +0530 Subject: [PATCH 9/9] Add masonry for query loop --- plugin/assets/css/src/block/style/masonry.css | 60 ++++++++++ plugin/assets/css/src/front-end.css | 1 + plugin/assets/src/block-editor/index.js | 1 + .../block-editor/style/core-template/index.js | 22 ++++ plugin/assets/src/front-end/index.js | 2 + plugin/assets/src/front-end/masonry.js | 104 ++++++++++++++++++ 6 files changed, 190 insertions(+) create mode 100644 plugin/assets/css/src/block/style/masonry.css create mode 100644 plugin/assets/src/block-editor/style/core-template/index.js create mode 100644 plugin/assets/src/front-end/masonry.js diff --git a/plugin/assets/css/src/block/style/masonry.css b/plugin/assets/css/src/block/style/masonry.css new file mode 100644 index 000000000..408834d4b --- /dev/null +++ b/plugin/assets/css/src/block/style/masonry.css @@ -0,0 +1,60 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +/* + * Masonry Grid for query loop with card. + */ +.is-style-material-masonry.wp-block-post-template.is-flex-container { + grid-gap: var(--mdc-layout-grid-margin-desktop, 24px); + grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); + grid-auto-rows: var(--mdc-layout-grid-margin-desktop, 24px); + margin: var(--mdc-layout-grid-margin-desktop, 24px) 0; + padding: var(--mdc-layout-grid-margin-desktop, 24px); + + @media (--medium-viewport) { + display: grid; + } + + @nest .material-archive__wide & { + grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); + } + + &.columns-3 { + grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); + } + + &.columns-4 { + grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); + } + + &.columns-5 { + grid-template-columns: repeat(auto-fill, minmax(16%, 1fr)); + } + + &.columns-6 { + grid-template-columns: repeat(auto-fill, minmax(14%, 1fr)); + } +} + +.is-style-material-masonry.wp-block-post-template.is-flex-container > li, +.is-style-material-masonry.wp-block-query-loop.is-flex-container > li { + width: 100% !important; +} + +.entry-content h2.post-card__title { + margin: revert; +} diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css index 4614a1c09..1b822fbc2 100644 --- a/plugin/assets/css/src/front-end.css +++ b/plugin/assets/css/src/front-end.css @@ -26,3 +26,4 @@ @import "../../src/block-editor/blocks/common-posts-list/style.css"; @import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css"; @import "../../src/block-editor/blocks/card/style.css"; +@import "./block/style/masonry.css"; diff --git a/plugin/assets/src/block-editor/index.js b/plugin/assets/src/block-editor/index.js index 7904dd3b8..0068335fd 100755 --- a/plugin/assets/src/block-editor/index.js +++ b/plugin/assets/src/block-editor/index.js @@ -27,6 +27,7 @@ import { updateCategory } from '@wordpress/blocks'; import { registerBlocks, MaterialLogo } from './helpers'; import './blocks/data-table/hooks'; import './formats'; +import './style/core-template'; /** * Register the blocks. diff --git a/plugin/assets/src/block-editor/style/core-template/index.js b/plugin/assets/src/block-editor/style/core-template/index.js new file mode 100644 index 000000000..94edc1559 --- /dev/null +++ b/plugin/assets/src/block-editor/style/core-template/index.js @@ -0,0 +1,22 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { registerBlockStyle } from '@wordpress/blocks'; + +registerBlockStyle( 'core/post-template', { + name: 'material-masonry', + label: 'Material Masonry Grid', +} ); diff --git a/plugin/assets/src/front-end/index.js b/plugin/assets/src/front-end/index.js index d0d05963f..7bcd91e19 100644 --- a/plugin/assets/src/front-end/index.js +++ b/plugin/assets/src/front-end/index.js @@ -27,6 +27,7 @@ import { initTextFields, } from '../common/mdc-components-init'; import { initContactForm } from './contact-form'; +import { masonryInit } from './masonry'; addEventListener( 'DOMContentLoaded', () => { initButtons(); @@ -34,6 +35,7 @@ addEventListener( 'DOMContentLoaded', () => { initTabBar(); initContactForm(); initToolTips(); + masonryInit(); // If material theme is not active then init text fields. if ( diff --git a/plugin/assets/src/front-end/masonry.js b/plugin/assets/src/front-end/masonry.js new file mode 100644 index 000000000..00840de1e --- /dev/null +++ b/plugin/assets/src/front-end/masonry.js @@ -0,0 +1,104 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +let gridElement = null; +let rowHeight = 24; +let rowGap = 24; +export const masonryInit = () => { + gridElement = document.querySelector( '.is-flex-container' ); + + if ( ! gridElement ) { + return; + } + + const mediaQuery = window.matchMedia( '(min-width: 840px)' ); + + mediaQuery.addEventListener( 'change', handleResize ); + handleResize( mediaQuery ); +}; + +const handleResize = mediaQuery => { + if ( mediaQuery.matches ) { + resizeAllGridItems(); + } +}; + +const resizeAllGridItems = () => { + const cells = gridElement.querySelectorAll( + '.is-style-material-masonry .wp-block-post' + ); + + if ( cells.length <= 0 ) { + return; + } + + rowHeight = parseInt( + window + .getComputedStyle( gridElement ) + .getPropertyValue( 'grid-auto-rows' ), + 10 + ); + + rowGap = parseInt( + window + .getComputedStyle( gridElement ) + .getPropertyValue( 'grid-row-gap' ), + 10 + ); + + const hasPostCard = cells[ 0 ].querySelectorAll( '.post-card' ).length > 0; + + if ( ! hasPostCard ) { + gridElement.style.gridAutoRows = 'minmax(min-content,max-content)'; + + // Let it re-render to compute height. + setTimeout( () => { + cells.forEach( resizeGridItem ); + gridElement.style.removeProperty( 'grid-auto-rows' ); + }, 0 ); + return; + } + + cells.forEach( resizeGridItem ); +}; + +const resizeGridItem = cell => { + if ( ! cell ) { + return; + } + + let cellCard = cell.querySelector( '.post-card' ); + + if ( ! cellCard ) { + const imageCardBlock = cell.querySelector( + '.wp-block-material-image-card-query' + ); + if ( imageCardBlock ) { + // For material image card. + cellCard = imageCardBlock; + } else { + // If we have a cell without card wrapper inside let's use that, Used for default WP template. + cellCard = cell; + } + } + + const contentHeight = cellCard.getBoundingClientRect().height; + + const rowSpan = Math.ceil( + ( contentHeight + rowGap ) / ( rowHeight + rowGap ) + ); + + cell.style.gridRowEnd = 'span ' + rowSpan; +};