Add the Content Summarization UI #147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

jeffpaul merged 39 commits into WordPress:develop from dkotter:feature/content-summarization-ui

Feb 5, 2026

+1,095 −3

.wordpress-org/screenshot-#.gif

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

docs/experiments/summarization.md

Large diffs are not rendered by default.

includes/Experiments/Summarization/Summarization.php

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ @@
     use WordPress\AI\Abilities\Summarization\Summarization as Summarization_Ability;
     use WordPress\AI\Abstracts\Abstract_Experiment;
+    use WordPress\AI\Asset_Loader;
     // Exit if accessed directly.
     if ( ! defined( 'ABSPATH' ) ) {
@@ Expand Down Expand Up / @@ -45,7 +46,26 @@ protected function load_experiment_metadata(): array { @@
     	 * @since 0.2.0
     	 */
     	public function register(): void {
+    		$this->register_post_meta();
     		add_action( 'wp_abilities_api_init', array( $this, 'register_abilities' ) );
+    		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
+    	}
+    	/**
+    	 * Register any needed post meta.
+    	 *
+    	 * @since x.x.x
+    	 */
+    	public function register_post_meta(): void {
+    		register_meta(
+    			'post',
+    			'ai_generated_summary',
+    			array(
+    				'type'         => 'string',
+    				'single'       => true,
+    				'show_in_rest' => true,
+    			)
+    		);
     	}
     	/**
@@ Expand All / @@ -63,4 +83,29 @@ public function register_abilities(): void { @@
     			),
     		);
     	}
+    	/**
+    	 * Enqueues and localizes the admin script.
+    	 *
+    	 * @since x.x.x
+    	 *
+    	 * @param string $hook_suffix The current admin page hook suffix.
+    	 */
+    	public function enqueue_assets( string $hook_suffix ): void {
+    		// Load asset in new post and edit post screens only.
+    		if ( 'post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix ) {
+    			return;
+    		}
+    		Asset_Loader::enqueue_script( 'summarization', 'experiments/summarization' );
+    		Asset_Loader::enqueue_style( 'summarization', 'experiments/summarization' );
+    		Asset_Loader::localize_script(
+    			'summarization',
+    			'SummarizationData',
+    			array(
+    				'enabled' => $this->is_enabled(),
+    				'path'    => Summarization_Ability::path( $this->get_id() ),
+    			)
+    		);
+    	}
     }

readme.txt

-Original file line number
+Diff line change
@@ Expand Up @@
     **Current Features:**
     * **Title Generation** - Generate title suggestions for your posts with a single click. Perfect for brainstorming headlines or finding the right tone for your content.
+    * **Content Summarization** - Summarizes long-form content into digestible overviews.
     * **Excerpt Generation** - Automatically create concise summaries for your posts.
     * **Experiment Framework** - Opt-in system that lets you enable only the AI features you want to use.
     * **Multi-Provider Support** - Works with popular AI providers like OpenAI, Google, and Anthropic.
@@ Expand Down @@

src/experiments/summarization/components/SummarizationBlockControls.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,80 @@
+    /**
+     * External dependencies
+     */
+    import React from 'react';
+    /**
+     * WordPress dependencies
+     */
+    import { BlockControls } from '@wordpress/block-editor';
+    import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+    import { createHigherOrderComponent } from '@wordpress/compose';
+    import { __ } from '@wordpress/i18n';
+    import { update } from '@wordpress/icons';
+    /**
+     * Internal dependencies
+     */
+    import { useSummaryGeneration } from '../functions/useSummaryGeneration';
+    const { aiSummarizationData } = window as any;
+    /**
+     * Block controls component.
+     */
+    const Controls = () => {
+    	const { isSummarizing, hasSummary, handleSummarize } =
+    		useSummaryGeneration();
+    	const buttonLabel = hasSummary
+    		? __( 'Re-generate AI Summary', 'ai' )
+    		: __( 'Generate AI Summary', 'ai' );
+    	// Ensure the experiment is enabled.
+    	if ( ! aiSummarizationData?.enabled ) {
+    		return null;
+    	}
+    	return (
+    		<BlockControls>
+    			<ToolbarGroup>
+    				<ToolbarButton
+    					label={ buttonLabel }
+    					icon={ update }
+    					className="ai-summarization-block-controls-button"
+    					onClick={ handleSummarize }
+    					disabled={ isSummarizing }
+    					isBusy={ isSummarizing }
+    				/>
+    			</ToolbarGroup>
+    		</BlockControls>
+    	);
+    };
+    /**
+     * Add custom block controls to the summarization block.
+     */
+    const SummarizationBlockControls = createHigherOrderComponent(
+    	( BlockEdit: React.ComponentType< any > ) => {
+    		return ( props: any ) => {
+    			const {
+    				name,
+    				isSelected,
+    				attributes: { aiGeneratedSummary = false },
+    			} = props;
+    			if ( name !== 'core/paragraph' || ! aiGeneratedSummary ) {
+    				return <BlockEdit { ...props } />;
+    			}
+    			return (
+    				<>
+    					{ isSelected && <Controls { ...props } /> }
+    					<BlockEdit { ...props } />
+    				</>
+    			);
+    		};
+    	},
+    	'addBlockControls'
+    );
+    export default SummarizationBlockControls;

src/experiments/summarization/components/SummarizationPlugin.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,71 @@
+    /**
+     * Summarization plugin component.
+     */
+    /**
+     * WordPress dependencies
+     */
+    import { Button, Flex, FlexItem } from '@wordpress/components';
+    import { PluginPostStatusInfo } from '@wordpress/editor';
+    import { __ } from '@wordpress/i18n';
+    import { update } from '@wordpress/icons';
+    /**
+     * Internal dependencies
+     */
+    import { useSummaryGeneration } from '../functions/useSummaryGeneration';
+    const { aiSummarizationData } = window as any;
+    /**
+     * Summarization plugin component.
+     */
+    export default function SummarizationPlugin() {
+    	const { isSummarizing, hasSummary, handleSummarize } =
+    		useSummaryGeneration();
+    	const buttonLabel = hasSummary
+    		? __( 'Re-generate AI Summary', 'ai' )
+    		: __( 'Generate AI Summary', 'ai' );
+    	const buttonDescription = hasSummary
+    		? __(
+    				'This will update the AI generated summary block with a new summary of the content of this post.',
+    				'ai'
+    		  )
+    		: __(
+    				'This will create a block that is a summary of the content of this post, generated by AI.',
+    				'ai'
+    		  );
+    	// Ensure the experiment is enabled.
+    	if ( ! aiSummarizationData?.enabled ) {
+    		return null;
+    	}
+    	return (
+    		<PluginPostStatusInfo>
+    			<Flex
+    				direction="column"
+    				className="ai-summarization-plugin-container"
+    				gap={ 2 }
+    			>
+    				<FlexItem>
+    					<Button
+    						variant="secondary"
+    						label={ buttonLabel }
+    						icon={ update }
+    						onClick={ handleSummarize }
+    						disabled={ isSummarizing }
+    						isBusy={ isSummarizing }
+    						__next40pxDefaultSize
+    					>
+    						{ buttonLabel }
+    					</Button>
+    				</FlexItem>
+    				<FlexItem>
+    					<span className="description">{ buttonDescription }</span>
+    				</FlexItem>
+    			</Flex>
+    		</PluginPostStatusInfo>
+    	);
+    }

src/experiments/summarization/functions/generate-summary.ts

-Original file line number
+Diff line change
@@ -0,0 +1,39 @@
+    /**
+     * WordPress dependencies
+     */
+    import apiFetch from '@wordpress/api-fetch';
+    const { aiSummarizationData } = window as any;
+    /**
+     * Generates a summary for the given post ID and content.
+     *
+     * @param {number} postId  The ID of the post to generate a summary for.
+     * @param {string} content The content of the post to generate a summary for.
+     * @return {Promise<string>} A promise that resolves to the generated summary.
+     */
+    export async function generateSummary(
+    	postId: number,
+    	content: string
+    ): Promise< string > {
+    	return apiFetch( {
+    		path: aiSummarizationData?.path ?? '',
+    		method: 'POST',
+    		data: {
+    			input: {
+    				context: postId.toString(),
+    				content,
+    			},
+    		},
+    	} )
+    		.then( ( response ) => {
+    			if ( response && typeof response === 'string' ) {
+    				return response as string;
+    			}
+    			throw new Error( 'Invalid response from API' );
+    		} )
+    		.catch( ( error ) => {
+    			throw new Error( error.message );
+    		} );
+    }

src/experiments/summarization/functions/useSummaryGeneration.ts

-Original file line number
+Diff line change
@@ -0,0 +1,118 @@
+    /**
+     * Shared hook for summary generation logic.
+     */
+    /**
+     * WordPress dependencies
+     */
+    import { createBlock, type BlockInstance } from '@wordpress/blocks';
+    import { store as blockEditorStore } from '@wordpress/block-editor';
+    import { dispatch, useDispatch, useSelect } from '@wordpress/data';
+    import { store as editorStore } from '@wordpress/editor';
+    import { useEffect, useState } from '@wordpress/element';
+    import { store as noticesStore } from '@wordpress/notices';
+    /**
+     * Internal dependencies
+     */
+    import { generateSummary } from './generate-summary';
+    /**
+     * Summary generation hook.
+     */
+    export function useSummaryGeneration() {
+    	const { allBlocks, postId, content, meta } = useSelect( ( select ) => {
+    		return {
+    			allBlocks: select( blockEditorStore )[ 'getBlocks' ](), // eslint-disable-line dot-notation
+    			postId: select( editorStore ).getCurrentPostId(),
+    			content: select( editorStore ).getEditedPostContent(),
+    			meta: select( editorStore ).getEditedPostAttribute( 'meta' ),
+    		};
+    	} );
+    	const { editPost } = useDispatch( editorStore );
+    	const [ isSummarizing, setIsSummarizing ] = useState( false );
+    	const [ summary, setSummary ] = useState( '' );
+    	// Check if a summary block exists and update state accordingly.
+    	useEffect( () => {
+    		const summaryBlock = allBlocks.find(
+    			( block: BlockInstance ) =>
+    				block.name === 'core/paragraph' &&
+    				block.attributes[ 'aiGeneratedSummary' ] === true // eslint-disable-line dot-notation
+    		);
+    		if ( summaryBlock && summaryBlock.attributes.content ) {
+    			setSummary( summaryBlock.attributes.content );
+    		}
+    	}, [ allBlocks ] );
+    	/**
+    	 * Handles the summarization button click.
+    	 */
+    	const handleSummarize = async () => {
+    		setIsSummarizing( true );
+    		( dispatch( noticesStore ) as any ).removeNotice(
+    			'ai_summarization_error'
+    		);
+    		try {
+    			const generatedSummary = await generateSummary(
+    				postId as number,
+    				content
+    			);
+    			setSummary( generatedSummary );
+    			// Store the summary in post meta (will require a manual save).
+    			editPost( {
+    				meta: {
+    					...meta,
+    					ai_generated_summary: generatedSummary,
+    				},
+    			} );
+    			// Check if an existing AI summary block exists.
+    			const existingSummaryBlock = allBlocks.find(
+    				( block: BlockInstance ) =>
+    					block.name === 'core/paragraph' &&
+    					block.attributes[ 'aiGeneratedSummary' ] === true // eslint-disable-line dot-notation
+    			);
+    			if ( existingSummaryBlock ) {
+    				// Update only the content of the existing block to preserve styles and other attributes.
+    				/* eslint-disable dot-notation -- updateBlockAttributes from store index signature */
+    				( dispatch( blockEditorStore ) as any )[
+    					'updateBlockAttributes'
+    				]( existingSummaryBlock.clientId, {
+    					content: generatedSummary,
+    				} );
+    				/* eslint-enable dot-notation */
+    			} else {
+    				// Insert a new summary block at the top.
+    				const summaryBlock = createBlock( 'core/paragraph', {
+    					content: generatedSummary,
+    					className: 'ai-summarization-summary',
+    					aiGeneratedSummary: true,
+    				} );
+    				// eslint-disable-next-line dot-notation
+    				( dispatch( blockEditorStore ) as any )[ 'insertBlock' ](
+    					summaryBlock,
+    				);
+    			}
+    		} catch ( error: any ) {
+    			( dispatch( noticesStore ) as any ).createErrorNotice( error, {
+    				id: 'ai_summarization_error',
+    				isDismissible: true,
+    			} );
+    			setSummary( '' );
+    		} finally {
+    			setIsSummarizing( false );
+    		}
+    	};
+    	return {
+    		isSummarizing,
+    		hasSummary: summary && summary.trim().length > 0,
+    		summary,
+    		handleSummarize,
+    	};
+    }

src/experiments/summarization/index.scss

-Original file line number
+Diff line change
@@ -0,0 +1,12 @@
+    .ai-summarization-plugin-container {
+    	.description {
+    		color: #757575;
+    	}
+    }
+    .block-editor-block-popover {
+    	.ai-summarization-block-controls-button {
+    		margin-top: 1px;
+    		height: 46px;
+    	}
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the Content Summarization UI #147

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!