Deprecate controls that were merged into Gutenberg 19

composer.json

@@ -23,7 +23,8 @@
 		},
 		"files": [
 			"includes/enqueues.php",
-			"includes/query-loop.php"
+			"includes/query-loop.php",
+			"includes/utilities.php"
 		]
 	},
 	"require-dev": {

includes/enqueues.php

@@ -7,6 +7,9 @@
 
 namespace AdvancedQueryLoop;
 
+use function AdvancedQueryLoop\Utils\{ is_gutenberg_plugin_version_or_higher,is_core_version_or_higher };
+
+
 // Bail on unit tests.
 if ( ! function_exists( 'add_action' ) ) {
 	return;
@@ -33,5 +36,23 @@ function () {
 			// Allow for translation.
 			wp_set_script_translations( 'advanced-query-loop', 'advanced-query-loop' );
 		}
+
+		// Per Page, Offset, and Max count controls where merged into GB 19.
+		if ( ! is_gutenberg_plugin_version_or_higher( '19' ) && ! is_core_version_or_higher( '6.7' ) ) {
+			// Enqueue the legacy controls.
+			$pre_gb_19_assets_file = BUILD_DIR_PATH . 'legacy-pre-gb-19.asset.php';
+
+			if ( file_exists( $pre_gb_19_assets_file ) ) {
+				$pre_gb_19_assets = include $pre_gb_19_assets_file;
+
+				\wp_enqueue_script(
+					'advanced-query-loop-legacy-pre-gb-19',
+					BUILD_DIR_URL . 'legacy-pre-gb-19.js',
+					array_merge( array( 'advanced-query-loop' ), $pre_gb_19_assets['dependencies'] ),
+					$pre_gb_19_assets['version'],
+					true
+				);
+			}
+		}
 	}
 );

includes/utilities.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Handles enqueueing of assets for the plugin.
+ *
+ * @package AdvancedQueryLoop/Utils
+ */
+
+namespace AdvancedQueryLoop\Utils;
+
+/**
+ * Helper to determine if the Gutenberg plugin is installed and if so, if it is at or higher a given version.
+ *
+ * @param string $version The version to check for.
+ *
+ * @return boolean.
+ */
+function is_gutenberg_plugin_version_or_higher( string $version ) {
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && defined( 'GUTENBERG_VERSION' ) ) {
+		// This means the plugin is installed
+		return version_compare( GUTENBERG_VERSION, $version, '>=' );
+	}
+	return false;
+}
+
+/**
+ * Helper to determine is the current WP install is at or higher than a given version.
+ *
+ * @param string $version The version to check for.
+
+ * @return boolean.
+ */
+function is_core_version_or_higher( string $version ) {
+	$core = get_bloginfo( 'version' );
+	return version_compare( $core, $version, '>=' );
+}
+

src/legacy-controls/pre-gb-19.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import AQLLegacyControls from '../slots/aql-legacy-controls';
+import { PostCountControls } from '../components/post-count-controls';
+import { PostOffsetControls } from '../components/post-offset-controls';
+
+registerPlugin( 'aql-pre-gb-19-controls', {
+	render: () => {
+		return (
+			<>
+				<AQLLegacyControls>
+					{ ( props ) => (
+						<>
+							<PostCountControls { ...props } />
+							<PostOffsetControls { ...props } />
+						</>
+					) }
+				</AQLLegacyControls>
+			</>
+		);
+	},
+} );

src/slots/aql-legacy-controls.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Create our Slot and Fill components
+ */
+const { Fill, Slot } = createSlotFill( 'AQLLegacyControls' );
+
+/**
+ * This slot is not exposed and is used to try to maintain the same UI
+ */
+
+const AQLLegacyControls = ( { children } ) => <Fill>{ children }</Fill>;
+
+AQLLegacyControls.Slot = ( { fillProps } ) => (
+	<Slot fillProps={ fillProps }>
+		{ ( fills ) => {
+			return fills.length ? fills : null;
+		} }
+	</Slot>
+);
+
+export default AQLLegacyControls;

src/variations/controls.js

@@ -12,8 +12,7 @@ import { createBlock } from '@wordpress/blocks';
 import { AQL } from '.';
 import AQLControls from '../slots/aql-controls';
 import AQLControlsInheritedQuery from '../slots/aql-controls-inherited-query';
-import { PostCountControls } from '../components/post-count-controls';
-import { PostOffsetControls } from '../components/post-offset-controls';
+import AQLLegacyControls from '../slots/aql-legacy-controls';
 import { PostMetaQueryControls } from '../components/post-meta-query-controls';
 import { PostDateQueryControls } from '../components/post-date-query-controls';
 import { MultiplePostSelect } from '../components/multiple-post-select';
@@ -58,10 +57,11 @@ const withAdvancedQueryControls = ( BlockEdit ) => ( props ) => {
 								'advanced-query-loop'
 							) }
 						>
+							<AQLLegacyControls.Slot
+								fillProps={ { ...props } }
+							/>
 							<PaginationToggle { ...props } />
 							<MultiplePostSelect { ...props } />
-							<PostCountControls { ...props } />
-							<PostOffsetControls { ...props } />
 							<PostOrderControls { ...props } />
 							<PostExcludeControls { ...props } />
 							<ExcludeTaxonomies { ...props } />

webpack.config.js

@@ -10,6 +10,7 @@ module.exports = {
 	entry: {
 		...getWebpackEntryPoints(),
 		variations: './src/variations/index.js',
+		'legacy-pre-gb-19': './src/legacy-controls/pre-gb-19.js',
 	},
 	output: {
 		...defaultConfig.output,