Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Conflict with Yoast #857

Closed
filipac opened this issue Feb 28, 2020 · 5 comments · Fixed by #882 · May be fixed by #866
Closed

Conflict with Yoast #857

filipac opened this issue Feb 28, 2020 · 5 comments · Fixed by #882 · May be fixed by #866

Comments

@filipac
Copy link

filipac commented Feb 28, 2020

Version

  • Carbon Fields: 3.1.14
  • WordPress: 5.3.2
  • PHP: 7.3

Expected Behavior

When Yoast seo plugin is active, I should be able to delete, close or duplicate a complex section.

Actual Behavior

When clicking any button, for example the duplicate button on the section, you get an JS error.

react-dom.js?ver=16.9.0:481 Uncaught TypeError: Cannot read property 'fields' of undefined
    at getFieldsFromFieldsHolder (index.js:43)

Container definition

Container::make('post_meta', __('Page Builder', 'crb'))
            ->where('post_type', '=', 'page')

            ->add_fields(array(
                Field::make('complex', 'crb_sections', 'Builder')
                    //bootstrap rows and columns
                    ->add_fields(
                        'rich_text_section',
                        'Text Section',
                        array(
                            Field::make('complex', 'row_type', 'Section')
                                ->add_fields('text1col', '1 Column Row', array(
                                    Field::make('rich_text', 'text', 'Text')
                                ))
                                ->add_fields('text2col', '2 Column Row', array(
                                    Field::make('rich_text', 'text_col1', 'Text Column 1')->set_width(50),
                                    Field::make('rich_text', 'text_col2', 'Text Column 2')->set_width(50)
                                ))
                                ->add_fields('text3col', '3 Column Row', array(
                                    Field::make('rich_text', 'text_col1', 'Text Column 1')->set_width(30),
                                    Field::make('rich_text', 'text_col2', 'Text Column 2')->set_width(30),
                                    Field::make('rich_text', 'text_col3', 'Text Column 3')->set_width(30)
                                )),
                            Field::make('radio', 'breakpoint', 'Breakpoint')
                                ->add_options(array(
                                    '0' => 'md',
                                    '1' => 'lg',
                                ))->set_width(50),
                        )
                    )
                    // Manually selected posts in a grid

                    ->add_fields('statistics', 'Statistics section', array(
                        Field::make('complex', 'row_type', 'Section')
                            ->add_fields('text1col', 'Statistic', array(
                                Field::make('text', 'text_1', 'Value'),
                                Field::make('text', 'header_1', 'Title')
                            ))->set_max(4)->set_min(1)
                    ))
                    //Contact Us Section with custom heading
                    ->add_fields('contact', 'Contact Us Section', array(
                        Field::make('image', 'image_text_image', 'Image')
                            ->set_value_type('url')
                            ->set_width(50),

                        Field::make('radio', 'image_animations', 'Image Animations')
                            ->add_options(array(
                                '0' => 'Disabled',
                                '1' => 'Enabled',
                            ))->set_width(50),
                        Field::make('text', 'contact_title', 'Title'),
                        Field::make('text', 'contact_brand', 'Heading'),
                        Field::make('rich_text', 'contact_details', 'Text')
                            ->set_value('[TEL]: 905-641-0309<br/>[FAX]: 905-641-1343'),
                        Field::make('select', 'contact_type', 'Contact Form')
                            ->add_options($cf7array)->set_width(50),


                    ))

                    //Simple CTA Section with custom heading
                    ->add_fields('simple_cta', 'Simple CTA Section', array(
                        $colors,
                        Field::make('radio', 'border_top', 'Border Top')
                            ->add_options(array(
                                '0' => 'Disabled',
                                '1' => 'Enabled',
                            ))->set_width(50),

                        Field::make('text', 'heading', 'Heading'),
                        Field::make('text', 'text', 'Text'),
                        $buttons
                    ))

                    //Simple BANNER Section with custom text and logo
                    ->add_fields('simple_banner', 'Simple BANNER Section', array(
                        $colors,
                        Field::make('image', 'image_text_image', 'Image')
                            ->set_value_type('url')
                            ->set_width(50),
                        Field::make('text', 'text', 'Text')->set_value('THE WELLAND CANAL WILL CREATE <span class="text-yellow">85,000 JOBS</span> THROUGH REAL ESTATE SERVICES AVAILABLE'),
                        $buttons
                    ))

                    //HERO Section with custom text and image
                    ->add_fields('hero', 'Hero Section', array(
                        Field::make('image', 'image_text_image', 'Background Image')
                            ->set_value_type('url')
                            ->set_width(50),
                        Field::make('image', 'image_main_image', 'Foreground Image')
                            ->set_value_type('url')
                            ->set_width(50),
                        Field::make('text', 'text_1', 'Heading'),
                        Field::make('textarea', 'text_2', 'Subtitle'),

                        Field::make('radio', 'text_location', 'Text Location')
                            ->add_options(array(
                                '0' => 'Bottom Left (Default)',
                                '1' => 'Bottom Right',
                                '2' => 'Top Left',
                                '3' => 'Top Right',
                                '4' => 'Center',
                                '5' => 'Top Center',
                                '6' => 'Bottom Center',
                            )),
                    ))

                    //Image and Text with CTA
                    ->add_fields('image_text_cta', 'Image/Text CTA', array(
                        Field::make('image', 'image_text_image', 'Image')
                            ->set_value_type('url')
                            ->set_width(50),
                        Field::make('file', 'image_p_image', 'Paragraph image')
                            ->set_value_type('url')
                            ->set_width(50),
                        Field::make('radio', 'image_text_image_alignment', 'Image Position')
                            ->add_options(array(
                                'left' => 'Left',
                                'right' => 'Right',
                            ))->set_width(50),
                        Field::make('radio', 'image_reduced_size', 'Reduce image size on mobile')
                            ->add_options(array(
                                '0' => 'Disabled',
                                '1' => 'Enabled',
                            ))->set_width(50),
                        Field::make('radio', 'image_animations', 'Image Animations')
                            ->add_options(array(
                                '0' => 'Disabled',
                                '1' => 'Enabled',
                            ))->set_width(50),


                        Field::make('text', 'image_text_heading', 'Heading'),
                        Field::make('rich_text', 'image_text_content', 'Content'),
                        $buttons
                    ))->set_width(50)
                    //Image and Text with CTA
                    ->add_fields('image_text_cta_big', 'Image/Text CTA BIG', array(
                        Field::make('image', 'image_text_image', 'Image')
                            ->set_value_type('url')
                            ->set_width(50),
                        Field::make('text', 'image_text_heading', 'Heading'),
                        Field::make('text', 'image_text_heading-2', 'Heading 2'),
                        Field::make('text', 'image_text_heading-3', 'Subheading'),
                        Field::make('rich_text', 'image_text_content', 'Content'),
                        Field::make('radio', 'image_animations', 'Image Animations')
                            ->add_options(array(
                                '0' => 'Disabled',
                                '1' => 'Enabled',
                            ))->set_width(50),
                        $buttons
                    ))->set_width(50)
            ));

Steps to Reproduce the Problem

  1. Install Yoast Wordpress-seo plugin
  2. Copy the container code above
  3. Try to duplicate a section
    image

Comments

Disabling Yoast seo fixes the bug.
@filipac
Copy link
Author

filipac commented Feb 28, 2020

Actually nothing seems to work. For example deleting a page from the relation field or adding a new one.
image

@joeyblake
Copy link
Contributor

I'm having numerous additional issues when yoast is activated. Reorder, etc It seems like maybe a lodash conflict?

@joeyblake
Copy link
Contributor

Update. If yoast is activated, carbonfields loads the gutenberg javascripts, and not the classic javascripts.

@joeyblake
Copy link
Contributor

Carbonfields is using wp_script_is('wp-element') to check if it is being loaded in the gutenberg context or the classic editor context. Yoast is enqueueing wp-element for its own use, so carbonfields is loading javascripts for the incorrect context.

@joeyblake joeyblake mentioned this issue Mar 24, 2020
Open
@joeyblake
Copy link
Contributor

@filipac this patch fixed my issues, perhaps it will help you?

@lstoyanoff lstoyanoff mentioned this issue Apr 22, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@joeyblake @filipac