在Gutenberg块中增加类名称-Wordpress / Gutenberg + Timber + ACF

Question

对于一个项目，我使用Timber + ACF + Wordpress Gutenberg界面

[我用ACF创建了一个用于古腾堡界面的块来显示活动簿。

要显示多个活动簿，我需要将我的古腾堡块链接到唯一的jQuery函数。

要使用jQuery flipbook插件创建活动簿，我在footer.twig中编写了此代码，以便能够注入pdf的网址：

$('.flipbook').flipBook({
    pdfUrl: "assets/pdf/link-to-unique-file.pdf"
});

对于我的古腾堡街区，我在block-flipbook.twig中写了这段代码：

<article class="bloc">
     <div class="flipbook"></div>
</article>

但是使用Gutenberg，用户可以创建多个活页簿块

我想要这样的东西：

$('.flipbook-1').flipBook({
        pdfUrl: "assets/pdf/link-to-unique-file-1.pdf"
    });

$('.flipbook-2').flipBook({
        pdfUrl: "assets/pdf/link-to-unique-file-2.pdf"
    });

我想在我的html文件中添加类似内容：

<article class="bloc">
      <div class="flipbook-1"></div>
</article>

<article class="bloc">
      <div class="flipbook-2"></div>
</article>

如何在我的古腾堡块中增加flipbook类？

Answer 1

获取块的索引可能是您要考虑的第一件事，但是您也可以以不同的方式解决此问题。

我假设您保存了应在ACF字段之一中显示的PDF文件。在这种情况下，您可以在data-pdf属性中添加PDF src。

<article class="bloc">
     <div class="flipbook" data-pdf="{{ file.src }}"></div>
</article>

然后，您可以编写一个jQuery函数来查找活动簿并创建它们。

var flipbooks = $('.flipbook');

if (flipbooks.length > 0) {
  flipbooks.each(function(i, el) {
    var src = el.attr('data-pdf');

    el.flipBook({
      pdfUrl: src
    })
  });
}