From cfa101a53a697ee54e0b55528c064c321a15044a Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 23 Jul 2021 15:56:27 +0100 Subject: [PATCH 01/15] Query Pagination Next: Add an arrow attribute --- .../src/query-pagination-next/block.json | 4 + .../src/query-pagination-next/edit.js | 102 +++++++++++++++--- .../src/query-pagination-next/index.php | 3 +- 3 files changed, 96 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json index afc69d6e14a3bd..931c79439bef55 100644 --- a/packages/block-library/src/query-pagination-next/block.json +++ b/packages/block-library/src/query-pagination-next/block.json @@ -9,6 +9,10 @@ "attributes": { "label": { "type": "string" + }, + "arrow": { + "default": "", + "type": "string" } }, "usesContext": [ "queryId", "query" ], diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 4e48c0bcecaa6b..49611f7a422e56 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -1,22 +1,100 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; -import { useBlockProps, PlainText } from '@wordpress/block-editor'; +import { __, isRTL } from '@wordpress/i18n'; +import { + useBlockProps, + PlainText, + BlockControls, +} from '@wordpress/block-editor'; +import { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components'; +import { + arrowLeft, + arrowRight, + chevronLeft, + chevronRight, + textColor, +} from '@wordpress/icons'; export default function QueryPaginationNextEdit( { - attributes: { label }, + attributes: { label, arrow }, setAttributes, } ) { + const arrowIcon = isRTL() ? arrowLeft : arrowRight; + const arrowValue = isRTL() ? '←' : '→'; + const chevronIcon = isRTL() ? chevronLeft : chevronRight; + const chevronValue = '⟩'; // chevrons seem to handle their own RTL. + + const arrowControls = [ + { + icon: textColor, + value: '', + title: __( 'No arrow' ), + isActive: '' === arrow, + onClick: () => { + setAttributes( { + arrow: '', + } ); + }, + }, + { + icon: arrowIcon, + value: arrowValue, + title: __( 'Arrow' ), + isActive: arrowValue === arrow, + onClick: () => { + setAttributes( { + arrow: arrowValue, + } ); + }, + }, + { + icon: chevronIcon, + value: chevronValue, + title: __( 'Chevron' ), + isActive: chevronValue === arrow, + onClick: () => { + setAttributes( { + arrow: chevronValue, + } ); + }, + }, + ]; + + const getIcon = () => { + const currentArrow = arrowControls.filter( + ( arrowControl ) => arrowControl.value === arrow + ); + if ( currentArrow.length > 0 ) { + return currentArrow[ 0 ].icon; + } + + return null; + }; + return ( - setAttributes( { label: newLabel } ) } - { ...useBlockProps() } - /> + <div className="wp-block-query-pagination-next"> + <BlockControls group="block"> + <ToolbarGroup> + <ToolbarDropdownMenu + icon={ getIcon() } + label={ __( 'Change arrow' ) } + controls={ arrowControls } + /> + </ToolbarGroup> + </BlockControls> + <PlainText + __experimentalVersion={ 2 } + tagName="a" + aria-label={ __( 'Next page link' ) } + placeholder={ __( 'Next Page' ) } + value={ label } + onChange={ ( newLabel ) => + setAttributes( { label: newLabel } ) + } + { ...useBlockProps() } + />{ ' ' } + { arrow } + </div> ); } diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index 7b0b4051f1aac2..68252c9651be80 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -50,7 +50,8 @@ function render_block_core_query_pagination_next( $attributes, $content, $block } wp_reset_postdata(); // Restore original Post Data. } - return $content; + + return '<div class="wp-block-query-pagination-next">' . $content . ' ' . $attributes['arrow'] . '</div>'; } /** From b5001b68f5b7b08231c278843a65679abdf2be4c Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Fri, 6 Aug 2021 11:05:27 +0100 Subject: [PATCH 02/15] change to a segmented control --- .../src/query-pagination-next/edit.js | 111 +++++++++--------- 1 file changed, 53 insertions(+), 58 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 49611f7a422e56..b45bff3d1b9f17 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -1,88 +1,83 @@ /** * WordPress dependencies */ -import { __, isRTL } from '@wordpress/i18n'; +import { __, _x, isRTL } from '@wordpress/i18n'; import { useBlockProps, PlainText, - BlockControls, + InspectorControls, } from '@wordpress/block-editor'; -import { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components'; import { - arrowLeft, - arrowRight, - chevronLeft, - chevronRight, - textColor, -} from '@wordpress/icons'; + PanelBody, + __experimentalSegmentedControl as SegmentedControl, + __experimentalSegmentedControlOption as SegmentedControlOption, +} from '@wordpress/components'; export default function QueryPaginationNextEdit( { attributes: { label, arrow }, setAttributes, } ) { - const arrowIcon = isRTL() ? arrowLeft : arrowRight; - const arrowValue = isRTL() ? '←' : '→'; - const chevronIcon = isRTL() ? chevronLeft : chevronRight; - const chevronValue = '⟩'; // chevrons seem to handle their own RTL. - const arrowControls = [ { - icon: textColor, value: '', - title: __( 'No arrow' ), - isActive: '' === arrow, - onClick: () => { - setAttributes( { - arrow: '', - } ); - }, + label: _x( 'None', 'Arrow option for Query Pagination Next block' ), }, { - icon: arrowIcon, - value: arrowValue, - title: __( 'Arrow' ), - isActive: arrowValue === arrow, - onClick: () => { - setAttributes( { - arrow: arrowValue, - } ); - }, + value: isRTL() ? '←' : '→', + label: _x( + 'Arrow', + 'Arrow option for Query Pagination Next block' + ), }, { - icon: chevronIcon, - value: chevronValue, - title: __( 'Chevron' ), - isActive: chevronValue === arrow, - onClick: () => { - setAttributes( { - arrow: chevronValue, - } ); - }, + value: isRTL() ? '«' : '»', + label: _x( + 'Chevron', + 'Arrow option for Query Pagination Next block' + ), }, ]; - const getIcon = () => { - const currentArrow = arrowControls.filter( - ( arrowControl ) => arrowControl.value === arrow - ); - if ( currentArrow.length > 0 ) { - return currentArrow[ 0 ].icon; - } + let selectedArrow = arrowControls.filter( + ( arrowControl ) => arrowControl.value === arrow + ); - return null; - }; + // This can happen if the user switches from an LTR to RTL + if ( selectedArrow.length === 0 ) { + selectedArrow = arrowControls[ 0 ]; + setAttributes( { + arrow: '', + } ); + } else { + selectedArrow = selectedArrow[ 0 ]; + } return ( <div className="wp-block-query-pagination-next"> - <BlockControls group="block"> - <ToolbarGroup> - <ToolbarDropdownMenu - icon={ getIcon() } - label={ __( 'Change arrow' ) } - controls={ arrowControls } - /> - </ToolbarGroup> - </BlockControls> + <InspectorControls> + <PanelBody title={ __( 'Arrow settings' ) }> + <SegmentedControl + label={ selectedArrow.label } + value={ arrow } + onChange={ ( value ) => { + setAttributes( { + arrow: value, + } ); + } } + isBlock + > + { arrowControls.map( ( arrowControl ) => { + return ( + <SegmentedControlOption + key={ arrowControl.value } + value={ arrowControl.value } + label={ arrowControl.label } + /> + ); + } ) } + </SegmentedControl> + </PanelBody> + </InspectorControls> <PlainText __experimentalVersion={ 2 } tagName="a" From 666a52ff52d1d9eabe0b3b1e02cc5f442af8e5a5 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Fri, 6 Aug 2021 11:09:35 +0100 Subject: [PATCH 03/15] update comment --- packages/block-library/src/query-pagination-next/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index b45bff3d1b9f17..32b96f007bcbda 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -42,7 +42,7 @@ export default function QueryPaginationNextEdit( { ( arrowControl ) => arrowControl.value === arrow ); - // This can happen if the user switches from an LTR to RTL + // This can happen if the user switches from an LTR to RTL site language. if ( selectedArrow.length === 0 ) { selectedArrow = arrowControls[ 0 ]; setAttributes( { From 526c20f34e6f448b51ffd704beb2d1c56c81b2c2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Mon, 9 Aug 2021 15:05:29 +0100 Subject: [PATCH 04/15] Use CSS for RTL --- .../src/query-pagination-next/edit.js | 68 ++++++------------- .../src/query-pagination-next/index.php | 6 +- .../src/query-pagination-next/style.scss | 5 ++ packages/block-library/src/style.scss | 1 + 4 files changed, 32 insertions(+), 48 deletions(-) create mode 100644 packages/block-library/src/query-pagination-next/style.scss diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 32b96f007bcbda..d4da88c862ed1e 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x, isRTL } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { useBlockProps, PlainText, @@ -17,47 +17,12 @@ export default function QueryPaginationNextEdit( { attributes: { label, arrow }, setAttributes, } ) { - const arrowControls = [ - { - value: '', - label: _x( 'None', 'Arrow option for Query Pagination Next block' ), - }, - { - value: isRTL() ? '←' : '→', - label: _x( - 'Arrow', - 'Arrow option for Query Pagination Next block' - ), - }, - { - value: isRTL() ? '«' : '»', - label: _x( - 'Chevron', - 'Arrow option for Query Pagination Next block' - ), - }, - ]; - - let selectedArrow = arrowControls.filter( - ( arrowControl ) => arrowControl.value === arrow - ); - - // This can happen if the user switches from an LTR to RTL site language. - if ( selectedArrow.length === 0 ) { - selectedArrow = arrowControls[ 0 ]; - setAttributes( { - arrow: '', - } ); - } else { - selectedArrow = selectedArrow[ 0 ]; - } - return ( <div className="wp-block-query-pagination-next"> <InspectorControls> <PanelBody title={ __( 'Arrow settings' ) }> <SegmentedControl - label={ selectedArrow.label } + label={ __( 'A decorative arrow appended to the next page link.' ) } value={ arrow } onChange={ ( value ) => { setAttributes( { @@ -66,15 +31,24 @@ export default function QueryPaginationNextEdit( { } } isBlock > - { arrowControls.map( ( arrowControl ) => { - return ( - <SegmentedControlOption - key={ arrowControl.value } - value={ arrowControl.value } - label={ arrowControl.label } - /> - ); - } ) } + <SegmentedControlOption + value="" + label={ _x( 'None', 'Arrow option for Query Pagination Next block' ) } + /> + <SegmentedControlOption + value="→" + label={ _x( + 'Arrow', + 'Arrow option for Query Pagination Next block' + ) } + /> + <SegmentedControlOption + value="»" + label={ _x( + 'Chevron', + 'Arrow option for Query Pagination Next block' + ) } + /> </SegmentedControl> </PanelBody> </InspectorControls> @@ -89,7 +63,7 @@ export default function QueryPaginationNextEdit( { } { ...useBlockProps() } />{ ' ' } - { arrow } + <span className={ `wp-block-query-pagination-next-arrow has-arrow-$(arrow)` }>{ arrow }</span> </div> ); } diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index 68252c9651be80..2ced2fd0fab649 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -51,7 +51,11 @@ function render_block_core_query_pagination_next( $attributes, $content, $block wp_reset_postdata(); // Restore original Post Data. } - return '<div class="wp-block-query-pagination-next">' . $content . ' ' . $attributes['arrow'] . '</div>'; + if ( $attributes['arrow'] === "→" ) { + $arrow_class = 'is-arrow'; + } + + return '<div class="wp-block-query-pagination-next">' . $content . ' <span class="wp-block-query-pagination-next-arrow ' . $arrow_class . '">' . $attributes['arrow'] . '</span></div>'; } /** diff --git a/packages/block-library/src/query-pagination-next/style.scss b/packages/block-library/src/query-pagination-next/style.scss new file mode 100644 index 00000000000000..0e311704876860 --- /dev/null +++ b/packages/block-library/src/query-pagination-next/style.scss @@ -0,0 +1,5 @@ +.wp-block-query-pagination-next-arrow.is-arrow { + display: inline-block; // Needed so that the transform works. + // Flip for RTL. + transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the chevron right for LTR and left for RTL. +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 8c3b5dc1317491..cc12b970df574f 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -32,6 +32,7 @@ @import "./pullquote/style.scss"; @import "./post-template/style.scss"; @import "./query-pagination/style.scss"; +@import "./query-pagination-next/style.scss"; @import "./quote/style.scss"; @import "./rss/style.scss"; @import "./search/style.scss"; From 22a2e8970c201cee94c263ca568441bd0d4fa054 Mon Sep 17 00:00:00 2001 From: Ben Dwyer <ben@scruffian.com> Date: Mon, 9 Aug 2021 15:07:22 +0100 Subject: [PATCH 05/15] formatting change --- .../src/query-pagination-next/edit.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index d4da88c862ed1e..4e44c95c07f9cc 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -22,7 +22,9 @@ export default function QueryPaginationNextEdit( { <InspectorControls> <PanelBody title={ __( 'Arrow settings' ) }> <SegmentedControl - label={ __( 'A decorative arrow appended to the next page link.' ) } + label={ __( + 'A decorative arrow appended to the next page link.' + ) } value={ arrow } onChange={ ( value ) => { setAttributes( { @@ -33,7 +35,10 @@ export default function QueryPaginationNextEdit( { > <SegmentedControlOption value="" - label={ _x( 'None', 'Arrow option for Query Pagination Next block' ) } + label={ _x( + 'None', + 'Arrow option for Query Pagination Next block' + ) } /> <SegmentedControlOption value="→" @@ -63,7 +68,11 @@ export default function QueryPaginationNextEdit( { } { ...useBlockProps() } />{ ' ' } - <span className={ `wp-block-query-pagination-next-arrow has-arrow-$(arrow)` }>{ arrow }</span> + <span + className={ `wp-block-query-pagination-next-arrow has-arrow-$(arrow)` } + > + { arrow } + </span> </div> ); } From 6799ee46c2ff30f3381ecb5f1fba990595366612 Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 9 Aug 2021 19:35:39 +0300 Subject: [PATCH 06/15] add arrow inside the link --- .../src/query-pagination-next/edit.js | 40 +++++++++++-------- .../src/query-pagination-next/index.php | 11 +++-- .../src/query-pagination-next/style.scss | 4 +- 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 4e44c95c07f9cc..0a094a0c525f16 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -18,7 +18,7 @@ export default function QueryPaginationNextEdit( { setAttributes, } ) { return ( - <div className="wp-block-query-pagination-next"> + <> <InspectorControls> <PanelBody title={ __( 'Arrow settings' ) }> <SegmentedControl @@ -57,22 +57,30 @@ export default function QueryPaginationNextEdit( { </SegmentedControl> </PanelBody> </InspectorControls> - <PlainText - __experimentalVersion={ 2 } - tagName="a" - aria-label={ __( 'Next page link' ) } - placeholder={ __( 'Next Page' ) } - value={ label } - onChange={ ( newLabel ) => - setAttributes( { label: newLabel } ) - } + <a + href="#pagination-next-pseudo-link" + onClick={ ( event ) => event.preventDefault() } { ...useBlockProps() } - />{ ' ' } - <span - className={ `wp-block-query-pagination-next-arrow has-arrow-$(arrow)` } > - { arrow } - </span> - </div> + <PlainText + __experimentalVersion={ 2 } + tagName="span" + aria-label={ __( 'Next page link' ) } + placeholder={ __( 'Next Page' ) } + value={ label } + onChange={ ( newLabel ) => + setAttributes( { label: newLabel } ) + } + /> + { arrow && ( + <> + { ' ' } + <span className="wp-block-query-pagination-next-arrow"> + { arrow } + </span> + </> + ) } + </a> + </> ); } diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index 2ced2fd0fab649..a543fccbd05361 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -22,7 +22,10 @@ function render_block_core_query_pagination_next( $attributes, $content, $block $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Next Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - $content = ''; + if ( ! empty( $attributes['arrow'] ) ) { + $label .= " <span class='wp-block-query-pagination-next-arrow'>{$attributes['arrow']}</span>"; + } + $content = ''; // Check if the pagination is for Query that inherits the global context. if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { @@ -51,11 +54,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block wp_reset_postdata(); // Restore original Post Data. } - if ( $attributes['arrow'] === "→" ) { - $arrow_class = 'is-arrow'; - } - - return '<div class="wp-block-query-pagination-next">' . $content . ' <span class="wp-block-query-pagination-next-arrow ' . $arrow_class . '">' . $attributes['arrow'] . '</span></div>'; + return $content; } /** diff --git a/packages/block-library/src/query-pagination-next/style.scss b/packages/block-library/src/query-pagination-next/style.scss index 0e311704876860..f771e9847ffb30 100644 --- a/packages/block-library/src/query-pagination-next/style.scss +++ b/packages/block-library/src/query-pagination-next/style.scss @@ -1,5 +1,5 @@ -.wp-block-query-pagination-next-arrow.is-arrow { +.wp-block-query-pagination-next-arrow { display: inline-block; // Needed so that the transform works. // Flip for RTL. - transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the chevron right for LTR and left for RTL. + transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. } From 59a2a54a5ce6c60b7910954c1e38c31ac249720e Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Fri, 13 Aug 2021 22:42:49 +0300 Subject: [PATCH 07/15] sync next+previous icons --- .../src/query-pagination-next/block.json | 7 +- .../src/query-pagination-next/edit.js | 90 +++++++++--------- .../src/query-pagination-next/index.php | 11 ++- .../src/query-pagination-previous/block.json | 7 +- .../src/query-pagination-previous/edit.js | 91 ++++++++++++++++--- .../src/query-pagination-previous/index.php | 12 ++- .../src/query-pagination-previous/style.scss | 5 + .../src/query-pagination/edit.js | 13 ++- .../src/query-pagination/index.js | 3 + .../query-pagination-arrow-controls.js | 46 ++++++++++ .../query-pagination-provider.js | 50 ++++++++++ packages/block-library/src/style.scss | 1 + 12 files changed, 268 insertions(+), 68 deletions(-) create mode 100644 packages/block-library/src/query-pagination-previous/style.scss create mode 100644 packages/block-library/src/query-pagination/query-pagination-arrow-controls.js create mode 100644 packages/block-library/src/query-pagination/query-pagination-provider.js diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json index 931c79439bef55..430f41a71ac6a6 100644 --- a/packages/block-library/src/query-pagination-next/block.json +++ b/packages/block-library/src/query-pagination-next/block.json @@ -11,8 +11,8 @@ "type": "string" }, "arrow": { - "default": "", - "type": "string" + "type": "string", + "default": "none" } }, "usesContext": [ "queryId", "query" ], @@ -27,5 +27,6 @@ "fontSize": true, "lineHeight": true } - } + }, + "style": "wp-block-query-pagination-next" } diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 0a094a0c525f16..462b86e5dc88ae 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -1,61 +1,58 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { useBlockProps, PlainText, InspectorControls, } from '@wordpress/block-editor'; +import { useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ import { - PanelBody, - __experimentalSegmentedControl as SegmentedControl, - __experimentalSegmentedControlOption as SegmentedControlOption, -} from '@wordpress/components'; + useQueryPaginationContext, + QueryPaginationArrowControls, +} from '../query-pagination'; + +const arrowMap = { + none: '', + arrow: '→', + chevron: '»', +}; export default function QueryPaginationNextEdit( { attributes: { label, arrow }, setAttributes, } ) { + const [ + { arrow: arrowFromContext = 'none' }, + setQueryPaginationContext, + ] = useQueryPaginationContext(); + /** + * Use arrow from context as the single source of truth. + * It is initialized from the the first matching pagination + * next/previous block it finds. + */ + useEffect( () => { + if ( arrow !== arrowFromContext ) { + setAttributes( { + arrow: arrowFromContext, + } ); + } + }, [ arrow, arrowFromContext ] ); + const displayArrow = arrowMap[ arrow ]; return ( <> <InspectorControls> - <PanelBody title={ __( 'Arrow settings' ) }> - <SegmentedControl - label={ __( - 'A decorative arrow appended to the next page link.' - ) } - value={ arrow } - onChange={ ( value ) => { - setAttributes( { - arrow: value, - } ); - } } - isBlock - > - <SegmentedControlOption - value="" - label={ _x( - 'None', - 'Arrow option for Query Pagination Next block' - ) } - /> - <SegmentedControlOption - value="→" - label={ _x( - 'Arrow', - 'Arrow option for Query Pagination Next block' - ) } - /> - <SegmentedControlOption - value="»" - label={ _x( - 'Chevron', - 'Arrow option for Query Pagination Next block' - ) } - /> - </SegmentedControl> - </PanelBody> + <QueryPaginationArrowControls + value={ arrowFromContext } + onChange={ ( value ) => { + setQueryPaginationContext( { arrow: value } ); + } } + /> </InspectorControls> <a href="#pagination-next-pseudo-link" @@ -72,13 +69,10 @@ export default function QueryPaginationNextEdit( { setAttributes( { label: newLabel } ) } /> - { arrow && ( - <> - { ' ' } - <span className="wp-block-query-pagination-next-arrow"> - { arrow } - </span> - </> + { displayArrow && ( + <span className="wp-block-query-pagination-next-arrow"> + { displayArrow } + </span> ) } </a> </> diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index a543fccbd05361..89b5c55aac5d19 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -19,11 +19,18 @@ function render_block_core_query_pagination_next( $attributes, $content, $block $page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; $max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0; + $arrow_map = array( + 'none' => '', + 'arrow' => '→', + 'chevron' => '»', + ); + $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Next Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - if ( ! empty( $attributes['arrow'] ) ) { - $label .= " <span class='wp-block-query-pagination-next-arrow'>{$attributes['arrow']}</span>"; + if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) ) { + $arrow = $arrow_map[ $attributes['arrow'] ]; + $label .= "<span class='wp-block-query-pagination-next-arrow'>$arrow</span>"; } $content = ''; diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json index 78a53867d0b7a5..c23eefd89ba892 100644 --- a/packages/block-library/src/query-pagination-previous/block.json +++ b/packages/block-library/src/query-pagination-previous/block.json @@ -9,6 +9,10 @@ "attributes": { "label": { "type": "string" + }, + "arrow": { + "type": "string", + "default": "none" } }, "usesContext": [ "queryId", "query" ], @@ -23,5 +27,6 @@ "fontSize": true, "lineHeight": true } - } + }, + "style": "wp-block-query-pagination-previous" } diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index 2c0bf33005de81..ec588035fe1001 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -2,21 +2,90 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useBlockProps, PlainText } from '@wordpress/block-editor'; +import { + useBlockProps, + PlainText, + InspectorControls, +} from '@wordpress/block-editor'; +import { useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { + useQueryPaginationContext, + QueryPaginationArrowControls, +} from '../query-pagination'; + +const arrowMap = { + none: '', + arrow: '←', + chevron: '«', +}; export default function QueryPaginationPreviousEdit( { - attributes: { label }, + attributes: { label, arrow }, setAttributes, } ) { + const [ + { arrow: arrowFromContext }, + setQueryPaginationContext, + ] = useQueryPaginationContext(); + /** + * Use arrow from context as the single source of truth. + * It is initialized from the the first matching pagination + * next/previous block it finds. + */ + useEffect( () => { + if ( arrow !== arrowFromContext ) { + setAttributes( { + arrow: arrowFromContext, + } ); + } + }, [ arrow, arrowFromContext ] ); + const displayArrow = arrowMap[ arrow ]; return ( - <PlainText - __experimentalVersion={ 2 } - tagName="a" - aria-label={ __( 'Previous page link' ) } - placeholder={ __( 'Previous Page' ) } - value={ label } - onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) } - { ...useBlockProps() } - /> + <> + <InspectorControls> + <QueryPaginationArrowControls + value={ arrowFromContext } + onChange={ ( value ) => { + setQueryPaginationContext( { arrow: value } ); + } } + /> + </InspectorControls> + <a + href="#pagination-previous-pseudo-link" + onClick={ ( event ) => event.preventDefault() } + { ...useBlockProps() } + > + { displayArrow && ( + <span className="wp-block-query-pagination-previous-arrow"> + { displayArrow } + </span> + ) } + <PlainText + __experimentalVersion={ 2 } + tagName="span" + aria-label={ __( 'Previous page link' ) } + placeholder={ __( 'Previous Page' ) } + value={ label } + onChange={ ( newLabel ) => + setAttributes( { label: newLabel } ) + } + /> + </a> + </> ); + // return ( + // <PlainText + // __experimentalVersion={ 2 } + // tagName="a" + // aria-label={ __( 'Previous page link' ) } + // placeholder={ __( 'Previous Page' ) } + // value={ label } + // onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) } + // { ...useBlockProps() } + // /> + // ); } diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index ac319d0be4dbf5..0795f7c9a31b56 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -18,10 +18,20 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl $page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; $page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; + $arrow_map = array( + 'none' => '', + 'arrow' => '←', + 'chevron' => '«', + ); + $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Previous Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - $content = ''; + if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) ) { + $arrow = $arrow_map[ $attributes['arrow'] ]; + $label = "<span class='wp-block-query-pagination-previous-arrow'>$arrow</span>$label"; + } + $content = ''; // 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'] ) { diff --git a/packages/block-library/src/query-pagination-previous/style.scss b/packages/block-library/src/query-pagination-previous/style.scss new file mode 100644 index 00000000000000..5fd8d9c660de1a --- /dev/null +++ b/packages/block-library/src/query-pagination-previous/style.scss @@ -0,0 +1,5 @@ +.wp-block-query-pagination-previous-arrow { + display: inline-block; // Needed so that the transform works. + // Flip for RTL. + transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. +} diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index 47ac55f30693a7..a5876079e90e95 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -6,13 +6,18 @@ import { __experimentalUseInnerBlocksProps as useInnerBlocksProps, } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import QueryPaginationProvider from './query-pagination-provider'; + const TEMPLATE = [ [ 'core/query-pagination-previous' ], [ 'core/query-pagination-numbers' ], [ 'core/query-pagination-next' ], ]; -export default function QueryPaginationEdit() { +export default function QueryPaginationEdit( { clientId } ) { const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, @@ -23,5 +28,9 @@ export default function QueryPaginationEdit() { ], orientation: 'horizontal', } ); - return <div { ...innerBlocksProps } />; + return ( + <QueryPaginationProvider clientId={ clientId }> + <div { ...innerBlocksProps } /> + </QueryPaginationProvider> + ); } diff --git a/packages/block-library/src/query-pagination/index.js b/packages/block-library/src/query-pagination/index.js index a15bdd4389cee5..f3816ba49cf00b 100644 --- a/packages/block-library/src/query-pagination/index.js +++ b/packages/block-library/src/query-pagination/index.js @@ -18,3 +18,6 @@ export const settings = { edit, save, }; + +export { useQueryPaginationContext } from './query-pagination-provider'; +export { QueryPaginationArrowControls } from './query-pagination-arrow-controls'; diff --git a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js new file mode 100644 index 00000000000000..e324e1075f39bd --- /dev/null +++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { + PanelBody, + __experimentalSegmentedControl as SegmentedControl, + __experimentalSegmentedControlOption as SegmentedControlOption, +} from '@wordpress/components'; + +export function QueryPaginationArrowControls( { value, onChange } ) { + return ( + <PanelBody title={ __( 'Arrow settings' ) }> + <SegmentedControl + label={ __( + 'A decorative arrow appended to the next and previous page link.' + ) } + value={ value } + onChange={ onChange } + isBlock + > + <SegmentedControlOption + value="none" + label={ _x( + 'None', + 'Arrow option for Query Pagination Next/Previous blocks' + ) } + /> + <SegmentedControlOption + value="arrow" + label={ _x( + 'Arrow', + 'Arrow option for Query Pagination Next/Previous blocks' + ) } + /> + <SegmentedControlOption + value="chevron" + label={ _x( + 'Chevron', + 'Arrow option for Query Pagination Next/Previous blocks' + ) } + /> + </SegmentedControl> + </PanelBody> + ); +} diff --git a/packages/block-library/src/query-pagination/query-pagination-provider.js b/packages/block-library/src/query-pagination/query-pagination-provider.js new file mode 100644 index 00000000000000..9e64303e017f70 --- /dev/null +++ b/packages/block-library/src/query-pagination/query-pagination-provider.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { + createContext, + useState, + useMemo, + useContext, +} from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +const QueryPaginationContext = createContext(); +export default function QueryPaginationProvider( { clientId, children } ) { + const paginationArrow = useSelect( ( select ) => { + const { getBlocks } = select( blockEditorStore ); + const aaa = getBlocks( clientId ); + const arr = aaa?.find( ( innerBlock ) => { + return [ + 'core/query-pagination-next', + 'core/query-pagination-previous', + ].includes( innerBlock.name ); + } ); + return arr?.attributes?.arrow || ''; + }, [] ); + const [ queryPaginationContext, setQueryPaginationContext ] = useState( { + arrow: paginationArrow, + } ); + return ( + <QueryPaginationContext.Provider + value={ useMemo( + () => [ + queryPaginationContext, + ( newContext ) => + setQueryPaginationContext( ( currentContext ) => ( { + ...currentContext, + ...newContext, + } ) ), + ], + [ queryPaginationContext ] + ) } + > + { children } + </QueryPaginationContext.Provider> + ); +} + +export function useQueryPaginationContext() { + return useContext( QueryPaginationContext ); +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index cc12b970df574f..d9196bcf3a81b1 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -33,6 +33,7 @@ @import "./post-template/style.scss"; @import "./query-pagination/style.scss"; @import "./query-pagination-next/style.scss"; +@import "./query-pagination-previous/style.scss"; @import "./quote/style.scss"; @import "./rss/style.scss"; @import "./search/style.scss"; From d6af752f6830c156f98624779b6acf6004c47213 Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Sat, 14 Aug 2021 19:48:47 +0300 Subject: [PATCH 08/15] handle rtl for used arrows --- .../src/query-pagination-next/edit.js | 4 +++- .../src/query-pagination-next/index.php | 8 +++++--- .../src/query-pagination-next/style.scss | 7 +++++-- .../src/query-pagination-previous/edit.js | 15 +++------------ .../src/query-pagination-previous/index.php | 8 +++++--- .../src/query-pagination-previous/style.scss | 7 +++++-- 6 files changed, 26 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 462b86e5dc88ae..27d0918e42d7f5 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -70,7 +70,9 @@ export default function QueryPaginationNextEdit( { } /> { displayArrow && ( - <span className="wp-block-query-pagination-next-arrow"> + <span + className={ `wp-block-query-pagination-next-arrow is-arrow-${ arrow }` } + > { displayArrow } </span> ) } diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index 89b5c55aac5d19..0378390157cbdb 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -28,9 +28,11 @@ function render_block_core_query_pagination_next( $attributes, $content, $block $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Next Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) ) { - $arrow = $arrow_map[ $attributes['arrow'] ]; - $label .= "<span class='wp-block-query-pagination-next-arrow'>$arrow</span>"; + if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) && ! empty( $arrow_map[ $attributes['arrow'] ] ) ) { + $arrow_attribute = $attributes['arrow']; + $arrow = $arrow_map[ $attributes['arrow'] ]; + $arrow_classes = "wp-block-query-pagination-next-arrow is-arrow-$arrow_attribute"; + $label .= "<span class='$arrow_classes'>$arrow</span>"; } $content = ''; diff --git a/packages/block-library/src/query-pagination-next/style.scss b/packages/block-library/src/query-pagination-next/style.scss index f771e9847ffb30..c1282019b55f3b 100644 --- a/packages/block-library/src/query-pagination-next/style.scss +++ b/packages/block-library/src/query-pagination-next/style.scss @@ -1,5 +1,8 @@ .wp-block-query-pagination-next-arrow { display: inline-block; // Needed so that the transform works. - // Flip for RTL. - transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. + // 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. + } } diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index ec588035fe1001..6824748034ea5d 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -60,7 +60,9 @@ export default function QueryPaginationPreviousEdit( { { ...useBlockProps() } > { displayArrow && ( - <span className="wp-block-query-pagination-previous-arrow"> + <span + className={ `wp-block-query-pagination-previous-arrow is-arrow-${ arrow }` } + > { displayArrow } </span> ) } @@ -77,15 +79,4 @@ export default function QueryPaginationPreviousEdit( { </a> </> ); - // return ( - // <PlainText - // __experimentalVersion={ 2 } - // tagName="a" - // aria-label={ __( 'Previous page link' ) } - // placeholder={ __( 'Previous Page' ) } - // value={ label } - // onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) } - // { ...useBlockProps() } - // /> - // ); } diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index 0795f7c9a31b56..534c7bb417d4b8 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -27,9 +27,11 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Previous Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) ) { - $arrow = $arrow_map[ $attributes['arrow'] ]; - $label = "<span class='wp-block-query-pagination-previous-arrow'>$arrow</span>$label"; + if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) && ! empty( $arrow_map[ $attributes['arrow'] ] ) ) { + $arrow_attribute = $attributes['arrow']; + $arrow = $arrow_map[ $attributes['arrow'] ]; + $arrow_classes = "wp-block-query-pagination-previous-arrow is-arrow-$arrow_attribute"; + $label = "<span class='$arrow_classes'>$arrow</span>$label"; } $content = ''; // Check if the pagination is for Query that inherits the global context diff --git a/packages/block-library/src/query-pagination-previous/style.scss b/packages/block-library/src/query-pagination-previous/style.scss index 5fd8d9c660de1a..55e2fab84e7323 100644 --- a/packages/block-library/src/query-pagination-previous/style.scss +++ b/packages/block-library/src/query-pagination-previous/style.scss @@ -1,5 +1,8 @@ .wp-block-query-pagination-previous-arrow { display: inline-block; // Needed so that the transform works. - // Flip for RTL. - transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. + // 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. + } } From 0cd85d3ff7f666b9d179229197c09c7e49d82033 Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 16 Aug 2021 12:39:54 +0300 Subject: [PATCH 09/15] update fixtures + polish --- .../src/query-pagination-next/edit.js | 15 +++-- .../src/query-pagination-next/index.php | 1 - .../src/query-pagination-previous/edit.js | 15 +++-- .../query-pagination-arrow-controls.js | 61 +++++++++---------- .../query-pagination-provider.js | 12 +++- .../blocks/core__query-pagination-next.json | 4 +- .../core__query-pagination-previous.json | 4 +- 7 files changed, 62 insertions(+), 50 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 27d0918e42d7f5..7d5d0a5876b900 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -7,6 +7,7 @@ import { PlainText, InspectorControls, } from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; import { useEffect } from '@wordpress/element'; /** @@ -47,12 +48,14 @@ export default function QueryPaginationNextEdit( { return ( <> <InspectorControls> - <QueryPaginationArrowControls - value={ arrowFromContext } - onChange={ ( value ) => { - setQueryPaginationContext( { arrow: value } ); - } } - /> + <PanelBody title={ __( 'Arrow settings' ) }> + <QueryPaginationArrowControls + value={ arrowFromContext } + onChange={ ( value ) => { + setQueryPaginationContext( { arrow: value } ); + } } + /> + </PanelBody> </InspectorControls> <a href="#pagination-next-pseudo-link" diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index 0378390157cbdb..53a5e45f89eea5 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -62,7 +62,6 @@ function render_block_core_query_pagination_next( $attributes, $content, $block } wp_reset_postdata(); // Restore original Post Data. } - return $content; } diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index 6824748034ea5d..e41c9bf9399068 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -7,6 +7,7 @@ import { PlainText, InspectorControls, } from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; import { useEffect } from '@wordpress/element'; /** @@ -47,12 +48,14 @@ export default function QueryPaginationPreviousEdit( { return ( <> <InspectorControls> - <QueryPaginationArrowControls - value={ arrowFromContext } - onChange={ ( value ) => { - setQueryPaginationContext( { arrow: value } ); - } } - /> + <PanelBody title={ __( 'Arrow settings' ) }> + <QueryPaginationArrowControls + value={ arrowFromContext } + onChange={ ( value ) => { + setQueryPaginationContext( { arrow: value } ); + } } + /> + </PanelBody> </InspectorControls> <a href="#pagination-previous-pseudo-link" diff --git a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js index e324e1075f39bd..9870791f793fcf 100644 --- a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js +++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js @@ -3,44 +3,41 @@ */ import { __, _x } from '@wordpress/i18n'; import { - PanelBody, __experimentalSegmentedControl as SegmentedControl, __experimentalSegmentedControlOption as SegmentedControlOption, } from '@wordpress/components'; export function QueryPaginationArrowControls( { value, onChange } ) { return ( - <PanelBody title={ __( 'Arrow settings' ) }> - <SegmentedControl - label={ __( - 'A decorative arrow appended to the next and previous page link.' + <SegmentedControl + label={ __( + 'A decorative arrow appended to the next and previous page link.' + ) } + value={ value } + onChange={ onChange } + isBlock + > + <SegmentedControlOption + value="none" + label={ _x( + 'None', + 'Arrow option for Query Pagination Next/Previous blocks' ) } - value={ value } - onChange={ onChange } - isBlock - > - <SegmentedControlOption - value="none" - label={ _x( - 'None', - 'Arrow option for Query Pagination Next/Previous blocks' - ) } - /> - <SegmentedControlOption - value="arrow" - label={ _x( - 'Arrow', - 'Arrow option for Query Pagination Next/Previous blocks' - ) } - /> - <SegmentedControlOption - value="chevron" - label={ _x( - 'Chevron', - 'Arrow option for Query Pagination Next/Previous blocks' - ) } - /> - </SegmentedControl> - </PanelBody> + /> + <SegmentedControlOption + value="arrow" + label={ _x( + 'Arrow', + 'Arrow option for Query Pagination Next/Previous blocks' + ) } + /> + <SegmentedControlOption + value="chevron" + label={ _x( + 'Chevron', + 'Arrow option for Query Pagination Next/Previous blocks' + ) } + /> + </SegmentedControl> ); } diff --git a/packages/block-library/src/query-pagination/query-pagination-provider.js b/packages/block-library/src/query-pagination/query-pagination-provider.js index 9e64303e017f70..9bdff91983f25c 100644 --- a/packages/block-library/src/query-pagination/query-pagination-provider.js +++ b/packages/block-library/src/query-pagination/query-pagination-provider.js @@ -14,14 +14,20 @@ const QueryPaginationContext = createContext(); export default function QueryPaginationProvider( { clientId, children } ) { const paginationArrow = useSelect( ( select ) => { const { getBlocks } = select( blockEditorStore ); - const aaa = getBlocks( clientId ); - const arr = aaa?.find( ( innerBlock ) => { + const innerBlocks = getBlocks( clientId ); + /** + * Query Pagination Next/Previous blocks' arrows should be synced + * inside a Query Pagination block. So we initialize the context + * arrow value from the the first matching Query Pagination + * Next/Previous block we find. + */ + const match = innerBlocks?.find( ( innerBlock ) => { return [ 'core/query-pagination-next', 'core/query-pagination-previous', ].includes( innerBlock.name ); } ); - return arr?.attributes?.arrow || ''; + return match?.attributes?.arrow; }, [] ); const [ queryPaginationContext, setQueryPaginationContext ] = useState( { arrow: paginationArrow, diff --git a/test/integration/fixtures/blocks/core__query-pagination-next.json b/test/integration/fixtures/blocks/core__query-pagination-next.json index cc2895f3e8d488..b5404039626ae1 100644 --- a/test/integration/fixtures/blocks/core__query-pagination-next.json +++ b/test/integration/fixtures/blocks/core__query-pagination-next.json @@ -3,7 +3,9 @@ "clientId": "_clientId_0", "name": "core/query-pagination-next", "isValid": true, - "attributes": {}, + "attributes": { + "arrow": "none" + }, "innerBlocks": [], "originalContent": "" } diff --git a/test/integration/fixtures/blocks/core__query-pagination-previous.json b/test/integration/fixtures/blocks/core__query-pagination-previous.json index 06bbd417d7b859..12097f84579e66 100644 --- a/test/integration/fixtures/blocks/core__query-pagination-previous.json +++ b/test/integration/fixtures/blocks/core__query-pagination-previous.json @@ -3,7 +3,9 @@ "clientId": "_clientId_0", "name": "core/query-pagination-previous", "isValid": true, - "attributes": {}, + "attributes": { + "arrow": "none" + }, "innerBlocks": [], "originalContent": "" } From dbccdabbda02959fa55609ff534edcdf8a1e02ac Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 16 Aug 2021 17:19:17 +0300 Subject: [PATCH 10/15] add small margin --- packages/block-library/src/query-pagination-next/style.scss | 1 + packages/block-library/src/query-pagination-previous/style.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/block-library/src/query-pagination-next/style.scss b/packages/block-library/src/query-pagination-next/style.scss index c1282019b55f3b..03f5d801eda924 100644 --- a/packages/block-library/src/query-pagination-next/style.scss +++ b/packages/block-library/src/query-pagination-next/style.scss @@ -1,4 +1,5 @@ .wp-block-query-pagination-next-arrow { + margin-left: 2px; display: inline-block; // Needed so that the transform works. // chevron(`»`) symbol doesn't need the mirroring by us. &:not(.is-arrow-chevron) { diff --git a/packages/block-library/src/query-pagination-previous/style.scss b/packages/block-library/src/query-pagination-previous/style.scss index 55e2fab84e7323..751509136becbb 100644 --- a/packages/block-library/src/query-pagination-previous/style.scss +++ b/packages/block-library/src/query-pagination-previous/style.scss @@ -1,4 +1,5 @@ .wp-block-query-pagination-previous-arrow { + margin-right: 2px; display: inline-block; // Needed so that the transform works. // chevron(`»`) symbol doesn't need the mirroring by us. &:not(.is-arrow-chevron) { From 30252f8e074f9377ec53cf62a9122a73ba029a82 Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 16 Aug 2021 18:45:37 +0300 Subject: [PATCH 11/15] update unit and control's label --- packages/block-library/src/query-pagination-next/edit.js | 2 +- .../block-library/src/query-pagination-next/style.scss | 2 +- .../block-library/src/query-pagination-previous/edit.js | 2 +- .../block-library/src/query-pagination-previous/style.scss | 2 +- .../query-pagination/query-pagination-arrow-controls.js | 7 ++++--- 5 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 7d5d0a5876b900..308ac6a9d61e52 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -48,7 +48,7 @@ export default function QueryPaginationNextEdit( { return ( <> <InspectorControls> - <PanelBody title={ __( 'Arrow settings' ) }> + <PanelBody title={ __( 'Settings' ) }> <QueryPaginationArrowControls value={ arrowFromContext } onChange={ ( value ) => { diff --git a/packages/block-library/src/query-pagination-next/style.scss b/packages/block-library/src/query-pagination-next/style.scss index 03f5d801eda924..30c7a24150dac4 100644 --- a/packages/block-library/src/query-pagination-next/style.scss +++ b/packages/block-library/src/query-pagination-next/style.scss @@ -1,5 +1,5 @@ .wp-block-query-pagination-next-arrow { - margin-left: 2px; + 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) { diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index e41c9bf9399068..feff0505f012ce 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -48,7 +48,7 @@ export default function QueryPaginationPreviousEdit( { return ( <> <InspectorControls> - <PanelBody title={ __( 'Arrow settings' ) }> + <PanelBody title={ __( 'Settings' ) }> <QueryPaginationArrowControls value={ arrowFromContext } onChange={ ( value ) => { diff --git a/packages/block-library/src/query-pagination-previous/style.scss b/packages/block-library/src/query-pagination-previous/style.scss index 751509136becbb..65c6726ce723ba 100644 --- a/packages/block-library/src/query-pagination-previous/style.scss +++ b/packages/block-library/src/query-pagination-previous/style.scss @@ -1,5 +1,5 @@ .wp-block-query-pagination-previous-arrow { - margin-right: 2px; + 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) { diff --git a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js index 9870791f793fcf..b84a5453f435b5 100644 --- a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js +++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js @@ -10,11 +10,12 @@ import { export function QueryPaginationArrowControls( { value, onChange } ) { return ( <SegmentedControl - label={ __( - 'A decorative arrow appended to the next and previous page link.' - ) } + label={ __( 'Arrow' ) } value={ value } onChange={ onChange } + help={ __( + 'A decorative arrow appended to the next and previous page link.' + ) } isBlock > <SegmentedControlOption From d882717aae3c6e592b0d71f6ed29cfa416885ba4 Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 6 Sep 2021 15:33:31 +0300 Subject: [PATCH 12/15] use block context and handle the arrow in `QueryPagination` block --- lib/compat/wordpress-5.8/index.php | 36 +++++++ .../src/query-pagination-next/block.json | 9 +- .../src/query-pagination-next/edit.js | 93 ++++++------------- .../src/query-pagination-next/index.php | 14 +-- .../src/query-pagination-next/style.scss | 9 -- .../src/query-pagination-previous/block.json | 9 +- .../src/query-pagination-previous/edit.js | 93 ++++++------------- .../src/query-pagination-previous/index.php | 14 +-- .../src/query-pagination-previous/style.scss | 9 -- .../src/query-pagination/block.json | 9 ++ .../src/query-pagination/edit.js | 52 ++++++++++- .../src/query-pagination/index.js | 3 - .../query-pagination-arrow-controls.js | 14 +-- .../query-pagination-provider.js | 56 ----------- .../src/query-pagination/style.scss | 18 ++++ packages/block-library/src/style.scss | 2 - 16 files changed, 179 insertions(+), 261 deletions(-) delete mode 100644 packages/block-library/src/query-pagination-next/style.scss delete mode 100644 packages/block-library/src/query-pagination-previous/style.scss delete mode 100644 packages/block-library/src/query-pagination/query-pagination-provider.js diff --git a/lib/compat/wordpress-5.8/index.php b/lib/compat/wordpress-5.8/index.php index 29a97fb20de819..35b0f11eeae1fa 100644 --- a/lib/compat/wordpress-5.8/index.php +++ b/lib/compat/wordpress-5.8/index.php @@ -164,3 +164,39 @@ function gutenberg_register_legacy_query_loop_block() { add_action( 'init', 'gutenberg_register_legacy_query_loop_block' ); } + +if ( ! function_exists( 'get_query_pagination_arrow' ) ) { + /** + * Helper function that returns the proper pagination arrow html for + * `QueryPaginationNext` and `QueryPaginationPrevious` blocks based + * on the provided `paginationArrow` from `QueryPagination` context. + * + * It's used in QueryPaginationNext and QueryPaginationPrevious blocks. + * + * @param WP_Block $block Block instance. + * @param boolean $is_next Flag for hanlding `next/previous` blocks. + * + * @return string|null Returns the constructed WP_Query arguments. + */ + function get_query_pagination_arrow( $block, $is_next ) { + $arrow_map = array( + 'none' => '', + 'arrow' => array( + 'next' => '→', + 'previous' => '←', + ), + 'chevron' => array( + 'next' => '»', + 'previous' => '«', + ), + ); + if ( ! empty( $block->context['paginationArrow'] ) && array_key_exists( $block->context['paginationArrow'], $arrow_map ) && ! empty( $arrow_map[ $block->context['paginationArrow'] ] ) ) { + $pagination_type = $is_next ? 'next' : 'previous'; + $arrow_attribute = $block->context['paginationArrow']; + $arrow = $arrow_map[ $block->context['paginationArrow'] ][ $pagination_type ]; + $arrow_classes = "wp-block-query-pagination-$pagination_type-arrow is-arrow-$arrow_attribute"; + return "<span class='$arrow_classes'>$arrow</span>"; + } + return null; + } +} diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json index 430f41a71ac6a6..f7d48504132220 100644 --- a/packages/block-library/src/query-pagination-next/block.json +++ b/packages/block-library/src/query-pagination-next/block.json @@ -9,13 +9,9 @@ "attributes": { "label": { "type": "string" - }, - "arrow": { - "type": "string", - "default": "none" } }, - "usesContext": [ "queryId", "query" ], + "usesContext": [ "queryId", "query", "paginationArrow" ], "supports": { "reusable": false, "html": false, @@ -27,6 +23,5 @@ "fontSize": true, "lineHeight": true } - }, - "style": "wp-block-query-pagination-next" + } } diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 308ac6a9d61e52..698c02d5c37086 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -2,21 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - useBlockProps, - PlainText, - InspectorControls, -} from '@wordpress/block-editor'; -import { PanelBody } from '@wordpress/components'; -import { useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { - useQueryPaginationContext, - QueryPaginationArrowControls, -} from '../query-pagination'; +import { useBlockProps, PlainText } from '@wordpress/block-editor'; const arrowMap = { none: '', @@ -27,59 +13,32 @@ const arrowMap = { export default function QueryPaginationNextEdit( { attributes: { label, arrow }, setAttributes, + context: { paginationArrow }, } ) { - const [ - { arrow: arrowFromContext = 'none' }, - setQueryPaginationContext, - ] = useQueryPaginationContext(); - /** - * Use arrow from context as the single source of truth. - * It is initialized from the the first matching pagination - * next/previous block it finds. - */ - useEffect( () => { - if ( arrow !== arrowFromContext ) { - setAttributes( { - arrow: arrowFromContext, - } ); - } - }, [ arrow, arrowFromContext ] ); - const displayArrow = arrowMap[ arrow ]; + const displayArrow = arrowMap[ paginationArrow ]; return ( - <> - <InspectorControls> - <PanelBody title={ __( 'Settings' ) }> - <QueryPaginationArrowControls - value={ arrowFromContext } - onChange={ ( value ) => { - setQueryPaginationContext( { arrow: value } ); - } } - /> - </PanelBody> - </InspectorControls> - <a - href="#pagination-next-pseudo-link" - onClick={ ( event ) => event.preventDefault() } - { ...useBlockProps() } - > - <PlainText - __experimentalVersion={ 2 } - tagName="span" - aria-label={ __( 'Next page link' ) } - placeholder={ __( 'Next Page' ) } - value={ label } - onChange={ ( newLabel ) => - setAttributes( { label: newLabel } ) - } - /> - { displayArrow && ( - <span - className={ `wp-block-query-pagination-next-arrow is-arrow-${ arrow }` } - > - { displayArrow } - </span> - ) } - </a> - </> + <a + href="#pagination-next-pseudo-link" + onClick={ ( event ) => event.preventDefault() } + { ...useBlockProps() } + > + <PlainText + __experimentalVersion={ 2 } + tagName="span" + aria-label={ __( 'Next page link' ) } + placeholder={ __( 'Next Page' ) } + value={ label } + onChange={ ( newLabel ) => + setAttributes( { label: newLabel } ) + } + /> + { displayArrow && ( + <span + className={ `wp-block-query-pagination-next-arrow is-arrow-${ arrow }` } + > + { displayArrow } + </span> + ) } + </a> ); } diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index 53a5e45f89eea5..d091e1c6bbc0fe 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/packages/block-library/src/query-pagination-next/index.php @@ -19,20 +19,12 @@ function render_block_core_query_pagination_next( $attributes, $content, $block $page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; $max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0; - $arrow_map = array( - 'none' => '', - 'arrow' => '→', - 'chevron' => '»', - ); - $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Next Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) && ! empty( $arrow_map[ $attributes['arrow'] ] ) ) { - $arrow_attribute = $attributes['arrow']; - $arrow = $arrow_map[ $attributes['arrow'] ]; - $arrow_classes = "wp-block-query-pagination-next-arrow is-arrow-$arrow_attribute"; - $label .= "<span class='$arrow_classes'>$arrow</span>"; + $pagination_arrow = get_query_pagination_arrow( $block, true ); + if ( $pagination_arrow ) { + $label .= $pagination_arrow; } $content = ''; diff --git a/packages/block-library/src/query-pagination-next/style.scss b/packages/block-library/src/query-pagination-next/style.scss deleted file mode 100644 index 30c7a24150dac4..00000000000000 --- a/packages/block-library/src/query-pagination-next/style.scss +++ /dev/null @@ -1,9 +0,0 @@ -.wp-block-query-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. - } -} diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json index c23eefd89ba892..c3a05cc202d30e 100644 --- a/packages/block-library/src/query-pagination-previous/block.json +++ b/packages/block-library/src/query-pagination-previous/block.json @@ -9,13 +9,9 @@ "attributes": { "label": { "type": "string" - }, - "arrow": { - "type": "string", - "default": "none" } }, - "usesContext": [ "queryId", "query" ], + "usesContext": [ "queryId", "query", "paginationArrow" ], "supports": { "reusable": false, "html": false, @@ -27,6 +23,5 @@ "fontSize": true, "lineHeight": true } - }, - "style": "wp-block-query-pagination-previous" + } } diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index feff0505f012ce..94fa173d49f1b6 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -2,21 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - useBlockProps, - PlainText, - InspectorControls, -} from '@wordpress/block-editor'; -import { PanelBody } from '@wordpress/components'; -import { useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { - useQueryPaginationContext, - QueryPaginationArrowControls, -} from '../query-pagination'; +import { useBlockProps, PlainText } from '@wordpress/block-editor'; const arrowMap = { none: '', @@ -27,59 +13,32 @@ const arrowMap = { export default function QueryPaginationPreviousEdit( { attributes: { label, arrow }, setAttributes, + context: { paginationArrow }, } ) { - const [ - { arrow: arrowFromContext }, - setQueryPaginationContext, - ] = useQueryPaginationContext(); - /** - * Use arrow from context as the single source of truth. - * It is initialized from the the first matching pagination - * next/previous block it finds. - */ - useEffect( () => { - if ( arrow !== arrowFromContext ) { - setAttributes( { - arrow: arrowFromContext, - } ); - } - }, [ arrow, arrowFromContext ] ); - const displayArrow = arrowMap[ arrow ]; + const displayArrow = arrowMap[ paginationArrow ]; return ( - <> - <InspectorControls> - <PanelBody title={ __( 'Settings' ) }> - <QueryPaginationArrowControls - value={ arrowFromContext } - onChange={ ( value ) => { - setQueryPaginationContext( { arrow: value } ); - } } - /> - </PanelBody> - </InspectorControls> - <a - href="#pagination-previous-pseudo-link" - onClick={ ( event ) => event.preventDefault() } - { ...useBlockProps() } - > - { displayArrow && ( - <span - className={ `wp-block-query-pagination-previous-arrow is-arrow-${ arrow }` } - > - { displayArrow } - </span> - ) } - <PlainText - __experimentalVersion={ 2 } - tagName="span" - aria-label={ __( 'Previous page link' ) } - placeholder={ __( 'Previous Page' ) } - value={ label } - onChange={ ( newLabel ) => - setAttributes( { label: newLabel } ) - } - /> - </a> - </> + <a + href="#pagination-previous-pseudo-link" + onClick={ ( event ) => event.preventDefault() } + { ...useBlockProps() } + > + { displayArrow && ( + <span + className={ `wp-block-query-pagination-previous-arrow is-arrow-${ arrow }` } + > + { displayArrow } + </span> + ) } + <PlainText + __experimentalVersion={ 2 } + tagName="span" + aria-label={ __( 'Previous page link' ) } + placeholder={ __( 'Previous Page' ) } + value={ label } + onChange={ ( newLabel ) => + setAttributes( { label: newLabel } ) + } + /> + </a> ); } diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index 534c7bb417d4b8..47506496722d8b 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -18,20 +18,12 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl $page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; $page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; - $arrow_map = array( - 'none' => '', - 'arrow' => '←', - 'chevron' => '«', - ); - $wrapper_attributes = get_block_wrapper_attributes(); $default_label = __( 'Previous Page' ); $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; - if ( ! empty( $attributes['arrow'] ) && array_key_exists( $attributes['arrow'], $arrow_map ) && ! empty( $arrow_map[ $attributes['arrow'] ] ) ) { - $arrow_attribute = $attributes['arrow']; - $arrow = $arrow_map[ $attributes['arrow'] ]; - $arrow_classes = "wp-block-query-pagination-previous-arrow is-arrow-$arrow_attribute"; - $label = "<span class='$arrow_classes'>$arrow</span>$label"; + $pagination_arrow = get_query_pagination_arrow( $block, false ); + if ( $pagination_arrow ) { + $label = $pagination_arrow . $label; } $content = ''; // Check if the pagination is for Query that inherits the global context diff --git a/packages/block-library/src/query-pagination-previous/style.scss b/packages/block-library/src/query-pagination-previous/style.scss deleted file mode 100644 index 65c6726ce723ba..00000000000000 --- a/packages/block-library/src/query-pagination-previous/style.scss +++ /dev/null @@ -1,9 +0,0 @@ -.wp-block-query-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. - } -} diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json index c1de24977f37f6..45b7a42bffbadb 100644 --- a/packages/block-library/src/query-pagination/block.json +++ b/packages/block-library/src/query-pagination/block.json @@ -6,7 +6,16 @@ "parent": [ "core/query" ], "description": "Displays a paginated navigation to next/previous set of posts, when applicable.", "textdomain": "default", + "attributes": { + "paginationArrow": { + "type": "string", + "default": "none" + } + }, "usesContext": [ "queryId", "query" ], + "providesContext": { + "paginationArrow": "paginationArrow" + }, "supports": { "align": true, "reusable": false, diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index a5876079e90e95..cc4236b7612f02 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -1,15 +1,22 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { + InspectorControls, useBlockProps, + BlockContextProvider, __experimentalUseInnerBlocksProps as useInnerBlocksProps, + store as blockEditorStore, } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; +import { PanelBody } from '@wordpress/components'; /** * Internal dependencies */ -import QueryPaginationProvider from './query-pagination-provider'; +import { QueryPaginationArrowControls } from './query-pagination-arrow-controls'; const TEMPLATE = [ [ 'core/query-pagination-previous' ], @@ -17,7 +24,25 @@ const TEMPLATE = [ [ 'core/query-pagination-next' ], ]; -export default function QueryPaginationEdit( { clientId } ) { +export default function QueryPaginationEdit( { + attributes: { paginationArrow }, + setAttributes, + clientId, +} ) { + 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, { template: TEMPLATE, @@ -28,9 +53,26 @@ export default function QueryPaginationEdit( { clientId } ) { ], orientation: 'horizontal', } ); + const context = useMemo( () => ( { paginationArrow } ), [ + paginationArrow, + ] ); return ( - <QueryPaginationProvider clientId={ clientId }> - <div { ...innerBlocksProps } /> - </QueryPaginationProvider> + <> + { hasNextPreviousBlocks && ( + <InspectorControls> + <PanelBody title={ __( 'Settings' ) }> + <QueryPaginationArrowControls + value={ paginationArrow } + onChange={ ( value ) => { + setAttributes( { paginationArrow: value } ); + } } + /> + </PanelBody> + </InspectorControls> + ) } + <BlockContextProvider value={ context }> + <div { ...innerBlocksProps } /> + </BlockContextProvider> + </> ); } diff --git a/packages/block-library/src/query-pagination/index.js b/packages/block-library/src/query-pagination/index.js index f3816ba49cf00b..a15bdd4389cee5 100644 --- a/packages/block-library/src/query-pagination/index.js +++ b/packages/block-library/src/query-pagination/index.js @@ -18,6 +18,3 @@ export const settings = { edit, save, }; - -export { useQueryPaginationContext } from './query-pagination-provider'; -export { QueryPaginationArrowControls } from './query-pagination-arrow-controls'; diff --git a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js index b84a5453f435b5..28ae36ed415726 100644 --- a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js +++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js @@ -3,13 +3,13 @@ */ import { __, _x } from '@wordpress/i18n'; import { - __experimentalSegmentedControl as SegmentedControl, - __experimentalSegmentedControlOption as SegmentedControlOption, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components'; export function QueryPaginationArrowControls( { value, onChange } ) { return ( - <SegmentedControl + <ToggleGroupControl label={ __( 'Arrow' ) } value={ value } onChange={ onChange } @@ -18,27 +18,27 @@ export function QueryPaginationArrowControls( { value, onChange } ) { ) } isBlock > - <SegmentedControlOption + <ToggleGroupControlOption value="none" label={ _x( 'None', 'Arrow option for Query Pagination Next/Previous blocks' ) } /> - <SegmentedControlOption + <ToggleGroupControlOption value="arrow" label={ _x( 'Arrow', 'Arrow option for Query Pagination Next/Previous blocks' ) } /> - <SegmentedControlOption + <ToggleGroupControlOption value="chevron" label={ _x( 'Chevron', 'Arrow option for Query Pagination Next/Previous blocks' ) } /> - </SegmentedControl> + </ToggleGroupControl> ); } diff --git a/packages/block-library/src/query-pagination/query-pagination-provider.js b/packages/block-library/src/query-pagination/query-pagination-provider.js deleted file mode 100644 index 9bdff91983f25c..00000000000000 --- a/packages/block-library/src/query-pagination/query-pagination-provider.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createContext, - useState, - useMemo, - useContext, -} from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; - -const QueryPaginationContext = createContext(); -export default function QueryPaginationProvider( { clientId, children } ) { - const paginationArrow = useSelect( ( select ) => { - const { getBlocks } = select( blockEditorStore ); - const innerBlocks = getBlocks( clientId ); - /** - * Query Pagination Next/Previous blocks' arrows should be synced - * inside a Query Pagination block. So we initialize the context - * arrow value from the the first matching Query Pagination - * Next/Previous block we find. - */ - const match = innerBlocks?.find( ( innerBlock ) => { - return [ - 'core/query-pagination-next', - 'core/query-pagination-previous', - ].includes( innerBlock.name ); - } ); - return match?.attributes?.arrow; - }, [] ); - const [ queryPaginationContext, setQueryPaginationContext ] = useState( { - arrow: paginationArrow, - } ); - return ( - <QueryPaginationContext.Provider - value={ useMemo( - () => [ - queryPaginationContext, - ( newContext ) => - setQueryPaginationContext( ( currentContext ) => ( { - ...currentContext, - ...newContext, - } ) ), - ], - [ queryPaginationContext ] - ) } - > - { children } - </QueryPaginationContext.Provider> - ); -} - -export function useQueryPaginationContext() { - return useContext( QueryPaginationContext ); -} diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss index e140863a7d981a..5a4a950757cd7e 100644 --- a/packages/block-library/src/query-pagination/style.scss +++ b/packages/block-library/src/query-pagination/style.scss @@ -18,4 +18,22 @@ $pagination-margin: 0.5em; margin-right: 0; } } + .wp-block-query-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-query-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. + } + } } diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index d9196bcf3a81b1..8c3b5dc1317491 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -32,8 +32,6 @@ @import "./pullquote/style.scss"; @import "./post-template/style.scss"; @import "./query-pagination/style.scss"; -@import "./query-pagination-next/style.scss"; -@import "./query-pagination-previous/style.scss"; @import "./quote/style.scss"; @import "./rss/style.scss"; @import "./search/style.scss"; From 1b846cef7e51a14d7c9dd6577961771483d7199e Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 6 Sep 2021 15:44:14 +0300 Subject: [PATCH 13/15] fix arrow css class --- packages/block-library/src/query-pagination-next/edit.js | 4 ++-- packages/block-library/src/query-pagination-previous/edit.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 698c02d5c37086..d91f3d7e0ba303 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -11,7 +11,7 @@ const arrowMap = { }; export default function QueryPaginationNextEdit( { - attributes: { label, arrow }, + attributes: { label }, setAttributes, context: { paginationArrow }, } ) { @@ -34,7 +34,7 @@ export default function QueryPaginationNextEdit( { /> { displayArrow && ( <span - className={ `wp-block-query-pagination-next-arrow is-arrow-${ arrow }` } + className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` } > { displayArrow } </span> diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index 94fa173d49f1b6..c695a453ce1e38 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -11,7 +11,7 @@ const arrowMap = { }; export default function QueryPaginationPreviousEdit( { - attributes: { label, arrow }, + attributes: { label }, setAttributes, context: { paginationArrow }, } ) { @@ -24,7 +24,7 @@ export default function QueryPaginationPreviousEdit( { > { displayArrow && ( <span - className={ `wp-block-query-pagination-previous-arrow is-arrow-${ arrow }` } + className={ `wp-block-query-pagination-previous-arrow is-arrow-${ paginationArrow }` } > { displayArrow } </span> From d5162f5d620bdbc27af44d544428d22da7b6fb9a Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 6 Sep 2021 15:47:01 +0300 Subject: [PATCH 14/15] remove unneeded provider --- packages/block-library/src/query-pagination/edit.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index cc4236b7612f02..c3f4f53f5f2b38 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -5,12 +5,10 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps, - BlockContextProvider, __experimentalUseInnerBlocksProps as useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import { useMemo } from '@wordpress/element'; import { PanelBody } from '@wordpress/components'; /** @@ -53,9 +51,6 @@ export default function QueryPaginationEdit( { ], orientation: 'horizontal', } ); - const context = useMemo( () => ( { paginationArrow } ), [ - paginationArrow, - ] ); return ( <> { hasNextPreviousBlocks && ( @@ -70,9 +65,7 @@ export default function QueryPaginationEdit( { </PanelBody> </InspectorControls> ) } - <BlockContextProvider value={ context }> - <div { ...innerBlocksProps } /> - </BlockContextProvider> + <div { ...innerBlocksProps } /> </> ); } From 3be32760020c36dde104560b0da20b7caf13fe45 Mon Sep 17 00:00:00 2001 From: ntsekouras <ntsekouras@outlook.com> Date: Mon, 6 Sep 2021 15:49:50 +0300 Subject: [PATCH 15/15] fix fixtures --- .../fixtures/blocks/core__query-pagination-next.json | 4 +--- .../fixtures/blocks/core__query-pagination-previous.json | 4 +--- test/integration/fixtures/blocks/core__query-pagination.json | 4 +++- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/test/integration/fixtures/blocks/core__query-pagination-next.json b/test/integration/fixtures/blocks/core__query-pagination-next.json index b5404039626ae1..cc2895f3e8d488 100644 --- a/test/integration/fixtures/blocks/core__query-pagination-next.json +++ b/test/integration/fixtures/blocks/core__query-pagination-next.json @@ -3,9 +3,7 @@ "clientId": "_clientId_0", "name": "core/query-pagination-next", "isValid": true, - "attributes": { - "arrow": "none" - }, + "attributes": {}, "innerBlocks": [], "originalContent": "" } diff --git a/test/integration/fixtures/blocks/core__query-pagination-previous.json b/test/integration/fixtures/blocks/core__query-pagination-previous.json index 12097f84579e66..06bbd417d7b859 100644 --- a/test/integration/fixtures/blocks/core__query-pagination-previous.json +++ b/test/integration/fixtures/blocks/core__query-pagination-previous.json @@ -3,9 +3,7 @@ "clientId": "_clientId_0", "name": "core/query-pagination-previous", "isValid": true, - "attributes": { - "arrow": "none" - }, + "attributes": {}, "innerBlocks": [], "originalContent": "" } diff --git a/test/integration/fixtures/blocks/core__query-pagination.json b/test/integration/fixtures/blocks/core__query-pagination.json index a5ade7819c893b..9a5c156770fbf9 100644 --- a/test/integration/fixtures/blocks/core__query-pagination.json +++ b/test/integration/fixtures/blocks/core__query-pagination.json @@ -3,7 +3,9 @@ "clientId": "_clientId_0", "name": "core/query-pagination", "isValid": true, - "attributes": {}, + "attributes": { + "paginationArrow": "none" + }, "innerBlocks": [], "originalContent": "<div class=\"wp-block-query-pagination\"></div>" }