Gallery field broken for blocks

• reformatco

• October 3, 2022 at 12:40 pm

Really enjoying using ACF blocks now it’s been improved a lot but Ive noticed the Gallery field layout doesn’t work properly when editing from the sidebar in the block editor.

The close button goes wonky and when you click an item the layout breaks completely. I have looked through the plugin code and found it’s due to the field animating the layout with hard coded values within the openSidebar method of the Gallery model.

See Ln 728 – 740 on /assets/build/js/pro/acf-pro-input.js

var width = this.$control().width() / 3;
      width = parseInt(width);
      width = Math.max(width, 350); // animate

      this.$('.acf-gallery-side-inner').css({
        width: width - 1
      });
      this.$side().animate({
        width: width - 1
      }, 250);
      this.$main().animate({
        right: width
      }, 250);

Earlier on the -open class is toggled so all this transition stuff could be done with CSS now.

I have been trying to replace the openSidebar and closeSidebar methods with acf.models.GalleryField.extend but with no luck. Is it possible to replace methods on existing models?

• John Huebner

• October 4, 2022 at 9:50 am

Please submit bug reports here https://www.advancedcustomfields.com/contact/

• reformatco

• October 4, 2022 at 10:14 am

Righty ho