Query Loop: Add design enhancements for the "enhanced pagination" set…

…ting (#54455)

* Update modal texts

* Update enhanced pagination error notice text

* Remove notice margin

* Update modal classname

* Update modal spacing

* Update animation time

* Change delay from 300 to 400 ms

* Disable animation motion when preferred

* Clarify that plugin blocks could be supported in the future

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

* Clarify that plugin blocks are not supported yet but will be

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

* Mention enhanced pagination again

* Fix eslint error

* Update modal description to mention the Query block

* Revert "Disable animation motion when preferred"

This reverts commit fe52845.

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

packages/block-library/src/query/edit/enhanced-pagination-modal.js

@@ -15,7 +15,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { useContainsThirdPartyBlocks } from '../utils';
 
 const disableEnhancedPaginationDescription = __(
-	'Third-party blocks are not supported inside a Query Loop block with enhanced pagination enabled. To re-enable it, remove any third-party block and then update it in the Query Loop settings.'
+	'Plugin blocks are not supported yet. For the enhanced pagination to work, remove the plugin block, then re-enable "Enhanced pagination" in the Query Block settings.'
 );
 
 const modalDescriptionId =
@@ -38,15 +38,15 @@ export default function EnhancedPaginationModal( {
 		isOpen && (
 			<Modal
 				title={ __( 'Enhanced pagination will be disabled' ) }
-				className={ 'wp-block-query-enhanced-pagination-modal' }
+				className="wp-block-query__enhanced-pagination-modal"
 				aria={ {
 					describedby: modalDescriptionId,
 				} }
 				isDismissible={ false }
 				shouldCloseOnEsc={ false }
 				shouldCloseOnClickOutside={ false }
 			>
-				<VStack alignment="right" spacing={ 8 }>
+				<VStack alignment="right" spacing={ 5 }>
 					<span id={ modalDescriptionId }>
 						{ disableEnhancedPaginationDescription }
 					</span>
@@ -56,7 +56,7 @@ export default function EnhancedPaginationModal( {
 							setAttributes( { enhancedPagination: false } );
 						} }
 					>
-						{ __( 'OK, understood' ) }
+						{ __( 'OK' ) }
 					</Button>
 				</VStack>
 			</Modal>

packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -15,7 +15,7 @@ export default function EnhancedPaginationControl( {
 	clientId,
 } ) {
 	const enhancedPaginationNotice = __(
-		'Enhanced pagination requires all descendants to be Core blocks. If you want to enable it, you have to remove all third-party blocks contained inside the Query Loop block.'
+		"Enhanced pagination doesn't support plugin blocks yet. If you want to enable it, you have to remove all plugin blocks from the Query Loop."
 	);
 
 	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
@@ -36,11 +36,13 @@ export default function EnhancedPaginationControl( {
 				} }
 			/>
 			{ containsThirdPartyBlocks && (
-				<div>
-					<Notice status="warning" isDismissible={ false }>
-						{ enhancedPaginationNotice }
-					</Notice>
-				</div>
+				<Notice
+					status="warning"
+					isDismissible={ false }
+					className="wp-block-query__enhanced-pagination-notice"
+				>
+					{ enhancedPaginationNotice }
+				</Notice>
 			) }
 		</>
 	);

packages/block-library/src/query/editor.scss

@@ -53,8 +53,12 @@
 	}
 }
 
-.wp-block-query-enhanced-pagination-modal {
+.wp-block-query__enhanced-pagination-modal {
 	@include break-small() {
 		max-width: $break-mobile;
 	}
 }
+
+.wp-block-query__enhanced-pagination-notice {
+	margin: 0;
+}

packages/block-library/src/query/style.scss

@@ -14,8 +14,8 @@
 		animation:
 			wp-block-query__enhanced-pagination-start-animation
 			30s
-			cubic-bezier(0, 1, 0, 1)
-			infinite;
+			cubic-bezier(0.03, 0.5, 0, 1)
+			forwards;
 	}
 
 	&.finish-animation {

packages/block-library/src/query/view.js

@@ -44,7 +44,7 @@ store( {
 							context.core.query.message =
 								context.core.query.loadingText;
 							context.core.query.animation = 'start';
-						}, 300 );
+						}, 400 );
 
 						await navigate( ref.href );