Flexible Content field inside a Component Not Working

[joeatduckpin]

So I am trying to create a single component that allows a user to create a series of rows of content that will be either 1, 2, or 3 columns. The idea is that a single component could have a layout like this:

=====

1 Column of WYSIWYG-driven text 2 Columns of WYSIWYG-driven text 1 Column of WYSIWYG-driven text

=====

Naturally, I immediately went to the Flexible Content field, because that's pretty much what that field is made for in ACF

When I add a field group for my component, like this:

function getACFLayout()
{
    return [
        'name' => 'blockColumns',
        'label' => 'Block: Multi-Column Layout',
        'sub_fields' => [
            [
                'label' => 'Columned Section',
            'name' => 'columned_section',
            'type' => 'flexible_content',
            'instructions' => 'Add a columned section.',
                 'button_label' => 'Add Section',
                 'layouts' => [
                    [
                        'name' => 'one_column',
                'label' => 'One Column Content',
                         'sub_fields' => [
                             [
                                 'label' => 'Content',
                    'name' => 'contentHTML',
                    'type' => 'wysiwyg',
                    'instructions' => 'Add content to this section.',
                                  'media_upload' => 0,
                    'delay' => 1,
                              ],
                         ]
                     ],
                     [
                         'name' => 'two_columns',
                'label' => 'Two Columns Content',
                         'sub_fields' => [
                             [
                                  'label' => 'Left Content',
                    'name' => 'left_contentHTML',
                    'type' => 'wysiwyg',
                    'instructions' => 'Add content to this section.',
                                 'media_upload' => 0,
                    'delay' => 1,
                                 'wrapper' =>  [
                                       'width' => '50',
                                ],
                           ],
                           [
                                'label' => 'Right Content',
                    'name' => 'right_contentHTML',
                    'type' => 'wysiwyg',
                    'instructions' => 'Add content to this section.',
                    'media_upload' => 0,
                    'delay' => 1,
                                  'wrapper' =>  [
                                     'width' => '50',
                                  ],
                             ],
                        ]
                      ],
                 ]
            ],
        ]
    ];
}

(Sorry for the weird code formatting)

When I add this to my component, I am able to add this component to a page, and the Flexible Content field functions great, as-expected, until I attempt to save the page. Upon save, I get the following error message:

Warning: Cannot get component: Component 'One_column' is not registered! in [my site's theme location]/lib/ComponentManager.php on line 94

The error message makes me think that the site thinks that the layouts in my Component's Flexible Content field are actual individual components in Flynt and is unable to find a Component folder and files for each layout.

Any thoughts on what might be happening here, and if there's a fix for this?

I've also attached the error stack as a screenshot

[joeatduckpin]

I've got an update to this. I can return the data on the front-end, the error/issue is only in the wp-admin when saving a page using my component.

In my component's .twig file, I can check the value of each row's acf_fc_layout, and use that value to retrieve the relevant fields for that layout.

[clementducerf]

Not sure this is related, but I had the same error because the folder containing my component wasn't nammed exactly like my component definition in functions.php

[domtra]

Hi @joeatduckpin, you are right. This issue seems to come from the fact that we kind of exclusively use flexible content field for components from the components folder. This is also why we have not run into that yet. If you do not call the renderComponents() function in twig, you should not have any issues in the frontend. The backend issue seems to come from the FeatureAdminComponentScreenshots. You could try to replace line 26 in its functions.php with $componentPathFull = $componentManager->getComponentDirPath($componentName);. And then additional return early if the path is empty.

Let me know if this helps.

[joeatduckpin]

Hi @domtra So I went to the FeatureAdminComponentScreenshots functions.php file, and line 26 is identical to what you asked me to replace it with. I then added a check to see if $componentPathFull had a value, and if so, then continue with the rest of the process, but that still returns the same error posted above in the wp-admin.

It looks like it might be related to the lib/ComponentManger.php file. The error message is tripping inside the check on line 90 that checks if the component exists / registered. If I comment out the trigger_error and the return false lines (lines 94 and 95) the error message does not display on-screen.

[webmisses]

Hi there, is there a solution in the meantime? I also tried to build Nested Flexible Content component - unfortunately it doesn't work....

[steffenbew]

@webmisses We haven't planned to implement support for nested flexible content components so far. If that's important to you and you figured out an approach or solution, I would be happy to take a look at it and taking into consideration for future releases!

[EvanOlsen]

I'm having the same issue. Adding Flexible Content in ACF via the front end (IE not a Component) triggers the error on the backend. A non-ideal workaround has been to comment out the error response on line 154 of ComponentManager.php "trigger_error("Cannot get component: Component '{$componentName}' is not registered!", E_USER_WARNING);"

I tried add a conditional statement on line 28 of FeatureFlexibleContentExtension.php as recommended above, but the previous line already registers the error as it's attempting to find a Component that's coming from ACF. "$componentPathFull = $componentManager->getComponentDirPath($componentName);"

This would be nice to have a proper work around as turning off errors isn't the best idea.