From 604561d8be21097925499022de3da5b6cfb89f6d Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com> Date: Tue, 30 Nov 2021 19:38:28 +0100 Subject: [PATCH] Block Library: Add the Comments Pagination block (#36872) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Block Library: Add new Comments Pagination block * Block Library: Fix Comments Pagination's index.php * Block Library: Add $schema to Comments Pagination * Block Library: Add Comments Pagination fixture * Hide the component until we have the templates ready * Block Library: Fix Comments Pagination block's title Co-authored-by: Greg Ziółkowski * Block Library: Remove unnecessary CSS classes Co-authored-by: Carlos Bravo Co-authored-by: Greg Ziółkowski Co-authored-by: David Arenas --- .../src/comments-pagination/block.json | 38 ++++++++++ .../comments-pagination-arrow-controls.js | 44 ++++++++++++ .../src/comments-pagination/edit.js | 70 +++++++++++++++++++ .../src/comments-pagination/editor.scss | 34 +++++++++ .../src/comments-pagination/index.js | 20 ++++++ .../src/comments-pagination/index.php | 39 +++++++++++ .../src/comments-pagination/save.js | 8 +++ .../src/comments-pagination/style.scss | 38 ++++++++++ packages/block-library/src/index.js | 2 + .../src/query-pagination/editor.scss | 4 -- .../blocks/core__comments-pagination.html | 1 + .../blocks/core__comments-pagination.json | 30 ++++++++ .../core__comments-pagination.parsed.json | 29 ++++++++ .../core__comments-pagination.serialized.html | 1 + 14 files changed, 354 insertions(+), 4 deletions(-) create mode 100644 packages/block-library/src/comments-pagination/block.json create mode 100644 packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js create mode 100644 packages/block-library/src/comments-pagination/edit.js create mode 100644 packages/block-library/src/comments-pagination/editor.scss create mode 100644 packages/block-library/src/comments-pagination/index.js create mode 100644 packages/block-library/src/comments-pagination/index.php create mode 100644 packages/block-library/src/comments-pagination/save.js create mode 100644 packages/block-library/src/comments-pagination/style.scss create mode 100644 test/integration/fixtures/blocks/core__comments-pagination.html create mode 100644 test/integration/fixtures/blocks/core__comments-pagination.json create mode 100644 test/integration/fixtures/blocks/core__comments-pagination.parsed.json create mode 100644 test/integration/fixtures/blocks/core__comments-pagination.serialized.html diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json new file mode 100644 index 0000000000000..f81e64adf028e --- /dev/null +++ b/packages/block-library/src/comments-pagination/block.json @@ -0,0 +1,38 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "core/comments-pagination", + "title": "Comments Pagination", + "category": "design", + "parent": [ "core/comments-query-loop" ], + "description": "Displays a paginated navigation to next/previous set of comments, when applicable.", + "textdomain": "default", + "attributes": { + "paginationArrow": { + "type": "string", + "default": "none" + } + }, + "providesContext": { + "paginationArrow": "paginationArrow" + }, + "supports": { + "align": true, + "reusable": false, + "html": false, + "inserter": false, + "color": { + "gradients": true, + "link": true + }, + "__experimentalLayout": { + "allowSwitching": false, + "allowInheriting": false, + "default": { + "type": "flex" + } + } + }, + "editorStyle": "wp-block-comments-pagination-editor", + "style": "wp-block-comments-pagination" +} diff --git a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js new file mode 100644 index 0000000000000..03b1b26cd8000 --- /dev/null +++ b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; + +export function CommentsPaginationArrowControls( { value, onChange } ) { + return ( + + + + + + ); +} diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js new file mode 100644 index 0000000000000..b75cd887b6958 --- /dev/null +++ b/packages/block-library/src/comments-pagination/edit.js @@ -0,0 +1,70 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + InspectorControls, + useBlockProps, + useInnerBlocksProps, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import { getBlockSupport } from '@wordpress/blocks'; +import { PanelBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls'; + +const getDefaultBlockLayout = ( blockTypeOrName ) => { + const layoutBlockSupportConfig = getBlockSupport( + blockTypeOrName, + '__experimentalLayout' + ); + return layoutBlockSupportConfig?.default; +}; + +export default function QueryPaginationEdit( { + attributes: { paginationArrow, layout }, + setAttributes, + clientId, + name, +} ) { + const usedLayout = layout || getDefaultBlockLayout( name ); + const hasNextPreviousBlocks = useSelect( ( select ) => { + const { getBlocks } = select( blockEditorStore ); + const innerBlocks = getBlocks( clientId ); + /** + * Show the `paginationArrow` control only if a + * `QueryPaginationNext/Previous` block exists. + */ + return innerBlocks?.find( ( innerBlock ) => { + return [ + 'core/query-pagination-next', + 'core/query-pagination-previous', + ].includes( innerBlock.name ); + } ); + }, [] ); + const blockProps = useBlockProps(); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + __experimentalLayout: usedLayout, + } ); + return ( + <> + { hasNextPreviousBlocks && ( + + + { + setAttributes( { paginationArrow: value } ); + } } + /> + + + ) } +
+ + ); +} diff --git a/packages/block-library/src/comments-pagination/editor.scss b/packages/block-library/src/comments-pagination/editor.scss new file mode 100644 index 0000000000000..dbf7e60ff65c0 --- /dev/null +++ b/packages/block-library/src/comments-pagination/editor.scss @@ -0,0 +1,34 @@ +$pagination-margin: 0.5em; + +// Center flex items. This has an equivalent in style.scss. +.wp-block[data-align="center"] > .wp-block-comments-pagination { + justify-content: center; +} + +.editor-styles-wrapper { + .wp-block-comments-pagination { + max-width: 100%; + &.block-editor-block-list__layout { + margin: 0; + } + } +} + +.wp-block-comments-pagination { + > .wp-block-comments-pagination-next, + > .wp-block-comments-pagination-previous, + > .wp-block-comments-pagination-numbers { + // Override editor auto block margins. + margin-left: 0; + margin-top: $pagination-margin; + + /*rtl:ignore*/ + margin-right: $pagination-margin; + margin-bottom: $pagination-margin; + + &:last-child { + /*rtl:ignore*/ + margin-right: 0; + } + } +} diff --git a/packages/block-library/src/comments-pagination/index.js b/packages/block-library/src/comments-pagination/index.js new file mode 100644 index 0000000000000..a15bdd4389cee --- /dev/null +++ b/packages/block-library/src/comments-pagination/index.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { queryPagination as icon } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon, + edit, + save, +}; diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php new file mode 100644 index 0000000000000..d7248d03b7381 --- /dev/null +++ b/packages/block-library/src/comments-pagination/index.php @@ -0,0 +1,39 @@ +%2$s
', + get_block_wrapper_attributes(), + $content + ); +} + +/** + * Registers the `core/comments-pagination` block on the server. + */ +function register_block_core_comments_pagination() { + register_block_type_from_metadata( + __DIR__ . '/comments-pagination', + array( + 'render_callback' => 'render_block_core_comments_pagination', + ) + ); +} +add_action( 'init', 'register_block_core_comments_pagination' ); diff --git a/packages/block-library/src/comments-pagination/save.js b/packages/block-library/src/comments-pagination/save.js new file mode 100644 index 0000000000000..17571d8f30d2d --- /dev/null +++ b/packages/block-library/src/comments-pagination/save.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save() { + return ; +} diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss new file mode 100644 index 0000000000000..c6b5d9a0a29e9 --- /dev/null +++ b/packages/block-library/src/comments-pagination/style.scss @@ -0,0 +1,38 @@ +$pagination-margin: 0.5em; +.wp-block-comments-pagination { + // Increased specificity to override blocks default margin. + > .wp-block-comments-pagination-next, + > .wp-block-comments-pagination-previous, + > .wp-block-comments-pagination-numbers { + /*rtl:ignore*/ + margin-right: $pagination-margin; + margin-bottom: $pagination-margin; + + &:last-child { + /*rtl:ignore*/ + margin-right: 0; + } + } + .wp-block-comments-pagination-previous-arrow { + margin-right: 1ch; + display: inline-block; // Needed so that the transform works. + // chevron(`»`) symbol doesn't need the mirroring by us. + &:not(.is-arrow-chevron) { + // Flip for RTL. + transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. + } + } + .wp-block-comments-pagination-next-arrow { + margin-left: 1ch; + display: inline-block; // Needed so that the transform works. + // chevron(`»`) symbol doesn't need the mirroring by us. + &:not(.is-arrow-chevron) { + // Flip for RTL. + transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. + } + } + + &.aligncenter { + justify-content: center; + } +} diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 0f445ac78424b..76ac03d8ef5f3 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -30,6 +30,7 @@ import * as commentEditLink from './comment-edit-link'; import * as commentReplyLink from './comment-reply-link'; import * as commentTemplate from './comment-template'; import * as commentsQueryLoop from './comments-query-loop'; +import * as commentsPagination from './comments-pagination'; import * as cover from './cover'; import * as embed from './embed'; import * as file from './file'; @@ -254,6 +255,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = commentReplyLink, commentTemplate, commentsQueryLoop, + commentsPagination, navigationArea, postComment, postCommentsCount, diff --git a/packages/block-library/src/query-pagination/editor.scss b/packages/block-library/src/query-pagination/editor.scss index 040ad0ed36b69..169f2b5ca72af 100644 --- a/packages/block-library/src/query-pagination/editor.scss +++ b/packages/block-library/src/query-pagination/editor.scss @@ -14,10 +14,6 @@ $pagination-margin: 0.5em; } } -.block-library-query-pagination-toolbar__popover .components-popover__content { - min-width: 230px; -} - .wp-block-query-pagination { > .wp-block-query-pagination-next, > .wp-block-query-pagination-previous, diff --git a/test/integration/fixtures/blocks/core__comments-pagination.html b/test/integration/fixtures/blocks/core__comments-pagination.html new file mode 100644 index 0000000000000..4449fac58ae2e --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__comments-pagination.json b/test/integration/fixtures/blocks/core__comments-pagination.json new file mode 100644 index 0000000000000..45976c56f30e3 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination.json @@ -0,0 +1,30 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/comments-pagination", + "isValid": true, + "attributes": { + "paginationArrow": "chevron", + "textColor": "black", + "style": { + "color": { + "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)" + }, + "elements": { + "link": { + "color": { + "text": "#ffffff" + } + } + } + }, + "layout": { + "type": "flex", + "orientation": "horizontal", + "justifyContent": "center" + } + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__comments-pagination.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination.parsed.json new file mode 100644 index 0000000000000..6bfe990aa7120 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination.parsed.json @@ -0,0 +1,29 @@ +[ + { + "blockName": "core/comments-pagination", + "attrs": { + "paginationArrow": "chevron", + "textColor": "black", + "style": { + "color": { + "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)" + }, + "elements": { + "link": { + "color": { + "text": "#ffffff" + } + } + } + }, + "layout": { + "type": "flex", + "orientation": "horizontal", + "justifyContent": "center" + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__comments-pagination.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination.serialized.html new file mode 100644 index 0000000000000..133344e717eec --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination.serialized.html @@ -0,0 +1 @@ +