Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Block Library - Query Pagination Next/Previous]: Add an arrow attribute and sync next/previous block's arrow #33656

Merged
merged 15 commits into from
Sep 7, 2021
Merged
Prev Previous commit
Next Next commit
sync next+previous icons
  • Loading branch information
ntsekouras committed Sep 6, 2021
commit 59a2a54a5ce6c60b7910954c1e38c31ac249720e
7 changes: 4 additions & 3 deletions packages/block-library/src/query-pagination-next/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"type": "string"
},
"arrow": {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
"default": "",
"type": "string"
"type": "string",
"default": "none"
}
},
"usesContext": [ "queryId", "query" ],
Expand All @@ -27,5 +27,6 @@
"fontSize": true,
"lineHeight": true
}
}
},
"style": "wp-block-query-pagination-next"
}
90 changes: 42 additions & 48 deletions packages/block-library/src/query-pagination-next/edit.js
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
</>
Expand Down
11 changes: 9 additions & 2 deletions packages/block-library/src/query-pagination-next/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
"attributes": {
"label": {
"type": "string"
},
"arrow": {
"type": "string",
"default": "none"
}
},
"usesContext": [ "queryId", "query" ],
Expand All @@ -23,5 +27,6 @@
"fontSize": true,
"lineHeight": true
}
}
},
"style": "wp-block-query-pagination-previous"
}
91 changes: 80 additions & 11 deletions packages/block-library/src/query-pagination-previous/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,90 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps, PlainText } from '@wordpress/block-editor';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these blocks already shipped but both previous and next bocks look very similar, could have been variations no? or at last they could share the same code base (like we used to do in the past to generate embed blocks before refactoring to variations)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This had been considered during the implementation, but due to existing conditional logic regarding inherit from Query, I thought it was best to leave as two separate blocks to make them more manageable.

Regarding sharing some code, that could be an option yes.

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() }
// />
// );
}
12 changes: 11 additions & 1 deletion packages/block-library/src/query-pagination-previous/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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'] ) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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.
}
13 changes: 11 additions & 2 deletions packages/block-library/src/query-pagination/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -23,5 +28,9 @@ export default function QueryPaginationEdit() {
],
orientation: 'horizontal',
} );
return <div { ...innerBlocksProps } />;
return (
<QueryPaginationProvider clientId={ clientId }>
<div { ...innerBlocksProps } />
</QueryPaginationProvider>
);
}
3 changes: 3 additions & 0 deletions packages/block-library/src/query-pagination/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,6 @@ export const settings = {
edit,
save,
};

export { useQueryPaginationContext } from './query-pagination-provider';
export { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading