Query Pagination: address feedback from #50779 (#51165)

* Wrap showLabel logic in a useEffect * Only render PlainText if showLabel is true * Update packages/block-library/src/query-pagination/edit.js Co-authored-by: Nik Tsekouras <[email protected]> * Add showLabel to deps --------- Co-authored-by: Nik Tsekouras <[email protected]>
WordPress · Jun 1, 2023 · ede0978 · ede0978 · github-actions · Jun 1, 2023
1 parent 1d87f29
commit ede0978
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js
@@ -22,16 +22,18 @@ export default function QueryPaginationNextEdit( {
 			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
 		>
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Next page link' ) }
-				placeholder={ showLabel ? __( 'Next Page' ) : '' }
-				value={ showLabel ? label : '' }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<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-${ paginationArrow }` }

diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js
@@ -30,16 +30,18 @@ export default function QueryPaginationPreviousEdit( {
 					{ displayArrow }
 				</span>
 			) }
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Previous page link' ) }
-				placeholder={ showLabel ? __( 'Previous Page' ) : '' }
-				value={ showLabel ? label : '' }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<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/edit.js b/packages/block-library/src/query-pagination/edit.js
@@ -10,6 +10,7 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,9 +54,11 @@ export default function QueryPaginationEdit( {
 		allowedBlocks: ALLOWED_BLOCKS,
 	} );
 	// Always show label text if paginationArrow is set to 'none'.
-	if ( paginationArrow === 'none' ) {
-		setAttributes( { showLabel: true } );
-	}
+	useEffect( () => {
+		if ( paginationArrow === 'none' && ! showLabel ) {
+			setAttributes( { showLabel: true } );
+		}
+	}, [ paginationArrow, setAttributes, showLabel ] );
 	return (
 		<>
 			{ hasNextPreviousBlocks && (