Merge pull request #154 from ryanwelcher/feature/add-context-to-components

Add current post ID and type to context

Author: ryanwelcher

CLAUDE.md

@@ -94,6 +94,10 @@ Each trait in the Traits directory handles a specific query modification:
 - Conditionally renders different control sets based on `query.inherit` attribute
 - When `inherit: false` - Shows all advanced controls in the "Advanced Query Settings" panel
 - When `inherit: true` - Shows limited controls (only PostOrderControls and inherited query slot)
+- Builds `propsWithControls` passed to every component; extends the original block props with:
+  - `allowedControls` — array of permitted control keys
+  - `context.currentPostId` — numeric ID of the currently edited post/page (`0` in template context)
+  - `context.currentPostType` — post type string, e.g. `'post'`, `'page'`, `'wp_template'`
 
 **UI Components** (`src/components/`):
 Each component corresponds to a query feature:

extending-aql.md

@@ -14,16 +14,36 @@ For example, a control that makes changes to the content types being displayed m
 
 Both SlotFills are passed all `props` from the main block and are available on the `window.aql` object for use.
 
-The example below adds a new control to only show content from the from currently logged in user regardless of the status of `Inherit query from template`.
+##### Available props
+
+In addition to the standard block props (`attributes`, `setAttributes`, `clientId`, etc.), every component receives an enriched `context` object with the following values:
+
+| Property | Type | Description |
+|---|---|---|
+| `context.currentPostId` | `number` | The ID of the post or page currently open in the editor. Returns `0` when editing a template. |
+| `context.currentPostType` | `string` | The post type of the currently edited entity, e.g. `'post'`, `'page'`, or `'wp_template'`. |
+
+Any other context values that `core/query` already receives from its parent are also preserved.
+
+```js
+const MyControl = ( { attributes, setAttributes, context } ) => {
+	const { currentPostId, currentPostType } = context;
+	// currentPostId: e.g. 42
+	// currentPostType: e.g. 'post'
+};
+```
+
+The example below adds a new control to only show content from the currently logged in user regardless of the status of `Inherit query from template`.
 
 ```js
 const { AQLControls, AQLControlsInheritedQuery } = window.aql;
 import { registerPlugin } from '@wordpress/plugins';
 import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const LoggedInUserControl = ( { attributes, setAttributes } ) => {
+const LoggedInUserControl = ( { attributes, setAttributes, context } ) => {
 	const { query: { authorContent = false } = {} } = attributes;
+	const { currentPostId, currentPostType } = context;
 	return (
 		<>
 			<ToggleControl
@@ -137,8 +157,9 @@ import { registerPlugin } from '@wordpress/plugins';
 import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const LoggedInUserControl = ( { attributes, setAttributes } ) => {
+const LoggedInUserControl = ( { attributes, setAttributes, context } ) => {
 	const { query: { authorContent = false } = {} } = attributes;
+	const { currentPostId, currentPostType } = context;
 	return (
 		<>
 			<ToggleControl

src/variations/controls.js

@@ -4,13 +4,15 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { InspectorControls } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import {
 	PanelBody,
 	__experimentalVStack as VStack,
 	BaseControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  *  Internal dependencies
@@ -50,6 +52,23 @@ const isAdvancedQueryLoop = ( props ) => {
  * @return {Element} BlockEdit instance
  */
 const withAdvancedQueryControls = ( BlockEdit ) => ( props ) => {
+	const { currentPostId, currentPostType } = useSelect(
+		( select ) => {
+			if ( ! isAdvancedQueryLoop( props ) ) {
+				return {
+					currentPostId: undefined,
+					currentPostType: undefined,
+				};
+			}
+			const editor = select( editorStore );
+			return {
+				currentPostId: editor.getCurrentPostId(),
+				currentPostType: editor.getCurrentPostType(),
+			};
+		},
+		[ props?.attributes?.namespace ]
+	);
+
 	// If the is the correct variation, add the custom controls.
 	if ( isAdvancedQueryLoop( props ) ) {
 		const { allowedControls } = window?.aql;
@@ -58,6 +77,11 @@ const withAdvancedQueryControls = ( BlockEdit ) => ( props ) => {
 		const propsWithControls = {
 			...props,
 			allowedControls: allowedControlsArray,
+			context: {
+				...props.context,
+				currentPostId,
+				currentPostType,
+			},
 		};
 		// If the inherit prop is false or undefined, add all the controls.
 		if ( ! attributes.query.inherit ) {