fix(FeatureFlexibleContentExtension): resolve compatibility issues with ACF Pro 6.5.0

[timohubois]

No description provided.

[aaronmeder]

@timohubois 👍🏻 I like it - works well for my tests.

Visually it might get a bit untidy with the renamed labels in front of the screenshot for some of the components, but let's see how often that would be used anyways.

[timohubois]

@aaronmeder and @harunbleech made some minor style improvements: adjusted the spacing inside the pop-up for better readability and ensured that the "no results" state no longer causes layout jumps. Screenshots now overlap again.

For the new ACF rename feature, only the renamed title is displayed. This feels more natural and closer to the previous behavior, even though the implementation is a bit hacky and doesn’t fully uses the native ACF behavior.

Let me know what you think!

[TheChriZZoW]

@timohubois Maybe you can include the opacity styles here if a component is disabled, from #608.

  .layout[data-enabled="0"] {
    opacity: 0.4;

    &:hover {
      .acf-layout-disabled {
        opacity: 1;
      }
    }
  }

  .layout.active-layout {
    &[data-enabled="0"] {
      opacity: 1;
    }
  }

[aaronmeder]

@timohubois I like the slightly updated look and rename title behaviour - feels good for me! 👍🏻

[arnespremberg]

Hi all, 6.5.1. breaks this again unfortunately. We fixed it on our end by removing some CSS, not sure if this breaks other intended functionality. Looks slightly different because we don't use SCSS in our themes but moved everything to regular css with tailwind.

Please find a screenshot of the diff attached, lmk if I should open a separate PR...

[TheChriZZoW]

I can also confirm that the 6.5.1 update broke the changes again because the ACF tooltip element is no longer a child of the .acf-flexible-content element. To fix this, you have to change the position of a[data-layout]:has(.flyntComponentScreenshot-imageWrapper) in the _screenshot.scss file so it's not a child of .acf-flexible-content anymore.

For _search.scss, the easiest way is to just remove the .acf-flexible-content wrapper entirely, as @arnespremberg
already suggested.

[timohubois]

Made some smaller changes again. @arnespremberg and @TheChriZZoW does they work for you as well?

[TheChriZZoW]

@timohubois Yes, they work for me. But I don't think the improvements were really necessary.