Problem/Motivation

So I am testing UI Patterns 2 with UI Styles for #3464894: [2.0.0-beta2] Drag & drop support in layout builder.

When adding styles in Layout Builder, I obtained the following fatal error:

TypeError: Drupal\ui_styles\Render\TrustedCallbackWrapper::doTrustedCallback(): Argument #1 ($callback) must be of type callable, string given, called in /project/app/modules/contrib/ui_styles/src/Render/Element.php on line 268 in Drupal\ui_styles\Render\TrustedCallbackWrapper->doTrustedCallback() (line 57 of core/lib/Drupal/Core/Security/DoTrustedCallbackTrait.php).
Drupal\ui_styles\Render\Element::doCallback('#pre_render', 'ui_patterns_library.component_element_alter:alter', Array) (Line: 196)
Drupal\ui_styles\Render\Element::isRenderElementAcceptingAttributes(Array) (Line: 135)
Drupal\ui_styles\Render\Element::isAcceptingAttributes(Array) (Line: 88)
Drupal\ui_styles\Render\Element::wrapElementIfNotAcceptingAttributes(Array) (Line: 326)
Drupal\ui_styles\StylePluginManager->addClasses(Array, Array, Array) (Line: 115)
Drupal\ui_styles_layout_builder\HookHandler\EntityViewAlter->addStylesToSection(Array, Object, 0) (Line: 96)
Drupal\ui_styles_layout_builder\HookHandler\EntityViewAlter->alter(Array, Object, Object) (Line: 36)
ui_styles_layout_builder_entity_view_alter(Array, Object, Object) (Line: 552)
Drupal\Core\Extension\ModuleHandler->alter('node_view', Array, Object, Object) (Line: 305)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 239)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 113)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 870)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 432)

Steps to reproduce

Proposed resolution

Transform pre_render insertion into proper callable syntax.

Remaining tasks

Issue fork ui_patterns-3465497

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Issue fork ui_styles-3465497

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Grimreaper created an issue. See original summary.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

If a service is injected then, there is a serialization problem.

Can the alter method of modules/ui_patterns_library/src/Element/ComponentElementAlter.php be transformed into static. Then I guess no more need that it to be a service.

pdureau’s picture

pdureau commented

Christian is the one who built the ComponentElementAlter architecture:

So, let's check with him what can be done, and it would be better to keep the 3 with similar structure & mechanisms .

By the way, it is OK to modify modules/ui_patterns_library/src/Element/ComponentElementAlter.php because it is stable, but most of the ui_patterns_library will be totally revamped for beta2.

pdureau’s picture

pdureau commented
Assigned: Unassigned » christian.wiedemann

Christian, can you answer to Florent?

pdureau’s picture

pdureau commented
Title: UI Styles: Type error with callback » [2.O.O-beta1] UI Styles: Type error with callback
pdureau’s picture

pdureau commented
Title: [2.O.O-beta1] UI Styles: Type error with callback » [2.0.0-beta1] UI Styles: Type error with callback
pdureau’s picture

pdureau commented
Title: [2.0.0-beta1] UI Styles: Type error with callback » [2.0.0-beta2] UI Styles: Type error with callback
pdureau’s picture

pdureau commented
Priority: Normal » Major
pdureau’s picture

pdureau commented
Assigned: christian.wiedemann » grimreaper

One month after Florent has created this ticket, I am doing the same tests.

I don't meet the TypeError: Argument #1 ($callback) must be of type callable, string given or any other fatal error.
But the styles are not applied.

For example, if I create a section with Bootstrap alert component as a layout and I apply the bg-danger style utility to the heading slot, I see the style inside the region (so a temporary place sued by the layout PAI) and not inside the component slot (what will be rendered using SDC):

array:9 [
  "#type" => "component"
  "#component" => "ui_suite_bootstrap:alert"
  "#layout" => Drupal\ui_patterns_layouts\Plugin\Layout\ComponentLayout {#6647
    #pluginId: "ui_patterns:ui_suite_bootstrap:alert"
    ...
  }
  "#slots" => array:1 [
    "heading" => array:1 [
      "7562fca6-6168-41e6-aaa1-ee490bdff420" => array:10 [
        "#theme" => "block"
        "#plugin_id" => "field_block:node:article:title"
        "content" => array:2 [...]
        "#attributes" => []
      ]
    ]
  ]
  "heading" => array:2 [
    "7562fca6-6168-41e6-aaa1-ee490bdff420" => array:10 [
      "#theme" => "block"
      "content" => array:2 [...]
      "#attributes" => []
    ]
    "#attributes" => array:1 [
      "class" => array:1 [
        "colors_background_color" => "bg-danger"
      ]
    ]
  ]
  "message" => array:1 []
]

But this fix (which is the same #3464894: [2.0.0-beta2] Drag & drop support in layout builder, with only one line more) seems to work:

--- a/modules/ui_patterns_layouts/src/Element/ComponentAlterer.php
+++ b/modules/ui_patterns_layouts/src/Element/ComponentAlterer.php
@@ -39,8 +39,14 @@ class ComponentAlterer implements TrustedCallbackInterface {
       foreach (Element::children($element[$region_id]) as $block_id) {
         $element["#slots"][$region_id][$block_id] = $element[$region_id][$block_id];
       }
-      if (isset($element[$region_id]['#attributes'])) {
+      if (isset($element[$region_id]['#attributes']) && isset($element["#slots"][$region_id])) {
         $element['#region_attributes'][$region_id] = new Attribute($element[$region_id]['#attributes']);
+        $element["#slots"][$region_id] = [
+          "#type" => "html_tag",
+          "#tag" => "div",
+          "#attributes" => $element[$region_id]['#attributes'],
+          "content" => $element["#slots"][$region_id],
+        ];
       }
       unset($element[$region_id]);
     }

Florent, I give the ticket back to you to check my analysis.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » pdureau

Hello,

As seen together, I still reproduce the problem on my env with Core 10.3.3 and latest dev version of UI Patterns 2.

pdureau’s picture

pdureau commented

I am not reproducing with drupal 11.0

I will test with drupal 10.3

pdureau’s picture

pdureau commented
Assigned: pdureau » grimreaper

I am still not reproducing.

Here is my 10.2 install

$ vendor/bin/drush st
Drupal version   : 10.3.3                                                        
Site URI         : http://default                                                
DB driver        : sqlite                                                        
DB port          :                                                               
DB username      :                                                               
DB name          : db.sqlite                                                     
Database         : Connected                                                     
Drupal bootstrap : Successful                                                    
Default theme    : ui_suite_bootstrap                                            
Admin theme      : claro                                                         
PHP binary       : /usr/bin/php                                                  
PHP config       : /etc/php.ini                                                  
PHP OS           : Linux                                                         
PHP version      : 8.3.11                                                        
Drush script     : /home/pierre/Projects/Drupal/d10/vendor/bin/drush             
Drush version    : 12.5.3.0                                                      
Drush temp       : /tmp                                                          
Drush configs    : /home/pierre/Projects/Drupal/d10/vendor/drush/drush/drush.yml 
Install profile  : standard                                                      
Drupal root      : /home/pierre/Projects/Drupal/d10/web                          
Site path        : sites/default                                                 
Files, Public    : sites/default/files                                           
Files, Temp      : /tmp

With up-to-date UI Patterns 2 

commit 701bb9b423c19ea8ceaa838b0376cfb70db3fa31 (HEAD -> 2.0.x, origin/2.0.x)
Author: christian.wiedemann <7688-Christian.wiedemann@users.noreply.drupalcode.org>
Date:   Fri Sep 6 19:53:45 2024 +0000

    Issue #3469814 by christian.wiedemann, just_like_good_vibes: [2.0.0-beta2] Kernel Source Tests
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: [2.0.0-beta2] UI Styles: Type error with callback » Type error with callback
Project: UI Patterns (SDC in Drupal UI) » UI Styles
Version: 2.0.x-dev » 8.x-1.x-dev
Component: UI Patterns Library » Code

We investigated with @pdureau.

Core is calling pre_renders with special handling which make it work.

The light way UI Styles is using to trigger pre_renders should reproduce this handling or call directly Core services/methods.

grimreaper opened merge request !62

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented 
TypeError: Drupal\Core\Render\Element\ComponentElement::generateComponentTemplate(): Argument #3 ($slots_alter_callbacks) must be of type array, null given, called in /project/app/core/lib/Drupal/Core/Render/Element/ComponentElement.php on line 66 in Drupal\Core\Render\Element\ComponentElement->generateComponentTemplate() (line 98 of core/lib/Drupal/Core/Render/Element/ComponentElement.php).
Drupal\Core\Render\Element\ComponentElement->preRenderComponent(Array)
call_user_func_array(Array, Array) (Line: 113)
Drupal\ui_styles\Render\TrustedCallbackWrapper->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 395)

grimreaper opened merge request !208

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Active » Needs review

Merged for UI Styles, I will do a release.

In needs review for UI Patterns.

  • grimreaper committed 6f6bc5ed on 8.x-1.x 
    Issue #3465497 by grimreaper, pdureau: Type error with callback
pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
pdureau’s picture

pdureau commented
Assigned: pdureau » grimreaper
Status: Needs review » Reviewed & tested by the community

UI Patterns MR is OK: https://git.drupalcode.org/project/ui_patterns/-/merge_requests/208/diffs

    $element = $this->buildProps($element, $component, $configuration, $contexts);
    $element = $this->buildSlots($element, $component, $configuration, $contexts);
    $element['#propsAlter'] = [];
    $element['#slotsAlter'] = [];
    return $element;
  }
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.