Canvas AI: Expose Props of Blocks to the Agent

Overview

Currently CanvasAiPageBuilderHelper::getAllComponentsKeyedBySource() does this

      if ($source === SingleDirectoryComponent::SOURCE_PLUGIN_ID) {
        $this->processSdc($component, $sdc_definitions, $output);
      }
      elseif ($source === JsComponent::SOURCE_PLUGIN_ID) {
        $this->processCodeComponents($component, $output, $available_components[$component_id]);
      }
      else {
        // Other sources: id, name, description (description = name)
        $output[$source]['components'][$component_id] = [
          'id' => $component_id,
          'name' => $component->label(),
          'description' => $component->label(),
        ];
      }

So for blocks, only the ID, name, and description are passed as context to the agent. However, this causes issues when the agent decides to use a block with required props (e.g., the System Branding block), because AiResponseValidator::validateComponentStructure() will throw errors like:

Component validation errors: components.0.[block.system_branding_block].props.: 'label' is a required key. components.0.[block.system_branding_block].props.: 'label_display' is a required key. components.0.[block.system_branding_block].props.: 'use_site_logo' is a required key. components.0.[block.system_branding_block].props.: 'use_site_name' is a required key. components.0.[block.system_branding_block].props.: 'use_site_slogan' is a required key

Proposed resolution

Expose the props of blocks to the agent.

Currently, _addNewComponentToLayout in layoutModelSlice.ts only sets field values for components that have the propSources property . Block components do not have this property.

    const buildInitialData = (component: CanvasComponent): ComponentModel => {
      if (isPropSourceComponent(component)) {  // Block components return false for this check.
        const initialData: EvaluatedComponentModel = {
          resolved: {},
          source: {},
        };
        Object.keys(component.propSources).forEach((propName) => {
          const prop = component.propSources[propName];
          // These will be needed when we support client-side preview updates.
          initialData.resolved[propName] = prop.default_values?.resolved || [];
          // These are the values the server needs.
          // @todo Reduce the verbosity of this in https://drupal.org/i/3463996
          //   and https://drupal.org/i/3528043 to send less data.
          initialData.source[propName] = {
            expression: prop.expression,
            sourceType: prop.sourceType,
            value: prop.default_values?.source || [],
            sourceTypeSettings: prop.sourceTypeSettings || undefined,
          };
        });
        return initialData;
      }
      return {
        resolved: {},
      };

This means it is not possible to place a block component with specific configuration values. For example, when the AI agent tries to place a Site Branding block with values like:

  {                                                                                                                      
    "use_site_logo": true,                                                                                               
    "use_site_name": true                                                                                                
  }

these values are ignored because block components lack propSources. As a result, block components are always placed with their default configuration, regardless of what values the AI specifies.

User interface changes