0

I'm trying to develop a Gutenberg block that needs the Masonry lib to work:

const containerRef = useRef(null);
const {
    attributes: { images, column_width, gap },
    setAttributes,
} = props;

useEffect(() => {

    imagesLoaded(containerRef.current, function () {
        var msnry = new Masonry(containerRef.current, {
            itemSelector: '.masonry-item',
            columnWidth: column_width,
            gutter: gap,
        });
    });

}, [images, column_width, gap]);

But I don't know how to import/use the imagesLoaded and Masonry libs (non-jQuery version) that come with WP in this situation.

Can I do something like:

import { imagesLoaded } from '@wordpress/....';
import { Masonry } from '@wordpress/....';

Thanks

2
  • where is gutenberg using it? Are you sure it does? I can find no references to a Masonry library in JS files in the gutenberg github repo, likewise a search for imagesLoaded gives zero results
    – Tom J Nowell
    Commented Jun 14, 2023 at 19:59
  • No, they are not used anywhere in the Gutenberg code. So, it's not possible to use any JS libs bundled in WP core in Gutenberg?
    – leemon
    Commented Jun 14, 2023 at 20:04

1 Answer 1

1

When developing a block with @wordpress/scripts, wp-scripts uses @wordpress/dependency-extraction-webpack-plugin to allow you to import dependencies from WordPress by replacing the import statements with references to the global variables loaded by the enqueued scripts.

For example, this:

import { useEffect } from '@wordpress/element'

Will become:

const { useEffect } = wp.element;

And wp-element will be added as a dependency to the enqueued script to ensure that wp.element is available.

This process works when importing the modules listed in the documentation for the dependency extraction plugin:

  • @wordpress/*
  • jquery
  • lodash-es
  • lodash
  • moment
  • react-dom
  • react

For any other bundled libraries you would need to enqueue them as a dependency manually and reference the global variable as you would if you were using the library anywhere else.

3
  • Thanks for the info! Is there a way to specify the imagesLoaded and Masonry libs deps for the editorScript prop in the block.json file? Or do I need to use the enqueue_block_assets hook?
    – leemon
    Commented Jun 15, 2023 at 10:13
  • 1
    @leemon at that point there's no difference between what you're doing and how it would work if I created myjquerycode.js and used wp_enqueue_script on it, the needed variables would be in exactly the same place for both situations, the import syntax would be completely irrelevant. There's no way to specify the additional dependencies via block.json though
    – Tom J Nowell
    Commented Jun 15, 2023 at 11:43
  • 1
    @leemon In the script, viewScript etc. properties in block.json you can pass an array of values, and if you include the registered handle of a script it will also enqueue that script. There's an example in the docs here: developer.wordpress.org/block-editor/reference-guides/block-api/… So you absolutely can declare script dependencies in block.json. Commented Jun 15, 2023 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.