[Query Loop]: Properly initialize and update perPage when we inheri…

…t from global query (#51641)

packages/block-library/src/query/edit/query-content.js

@@ -13,6 +13,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -35,6 +36,7 @@ export default function QueryContent( {
 		query,
 		displayLayout,
 		tagName: TagName = 'div',
+		query: { inherit } = {},
 	} = attributes;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -45,9 +47,12 @@ export default function QueryContent( {
 	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
+		const { getEntityRecord, canUser } = select( coreStore );
+		const settingPerPage = canUser( 'read', 'settings' )
+			? +getEntityRecord( 'root', 'site' )?.posts_per_page
+			: +getSettings().postsPerPage;
 		return {
-			postsPerPage:
-				+getSettings().postsPerPage || DEFAULTS_POSTS_PER_PAGE,
+			postsPerPage: settingPerPage || DEFAULTS_POSTS_PER_PAGE,
 		};
 	}, [] );
 	// There are some effects running where some initialization logic is
@@ -61,14 +66,18 @@ export default function QueryContent( {
 	// would cause to override previous wanted changes.
 	useEffect( () => {
 		const newQuery = {};
-		if ( ! query.perPage && postsPerPage ) {
+		// When we inherit from global query always need to set the `perPage`
+		// based on the reading settings.
+		if ( inherit && query.perPage !== postsPerPage ) {
+			newQuery.perPage = postsPerPage;
+		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage ] );
+	}, [ query.perPage, postsPerPage, inherit ] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {