javascript - Read For Learn

How to import the imagesLoaded and Masonry libs that come with WP in a Gutenberg block?

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 … Read more

How to change the selected Template using javascript?

You are already using the correct action, i.e. wp.data.dispatch( ‘core/editor’ ).editPost(), however, you should instead change the property named template. I.e. wp.data.dispatch( ‘core/editor’ ).editPost( { template: ‘article.php’ } ) Yes, _wp_page_template is the meta key in the database, but in the REST API, a property named template exists in place of direct access on that … Read more

Masonry gallery block is working in the block editor but not the template editor

Your code isn’t at fault. The Masonry library doesn’t support this cross frame scenario. I can think of three ways you might get past this: Inject the masonry script into the iframe so it could be used from within the iframe Patch the masonry script and ship that version with your plugin Find an alternative … Read more

How to add a css class to postTitleWrapper in Gutenberg?

It’s probably related to how you’re loading that JS file, which causes it to run before the element is available (despite domReady). You didn’t show how you’re loading the file etc, but your code works for me in a standard Gutenberg block edit.js: export default function Edit() { domReady( function () { const postTitleWrapper = … Read more

How to use webpack in WordPress theme? I want some scripts to load in the footer, some in the header and some with script parameters

What is the right and clean way to load these files in WordPress? The same way as you’ve always done it, wp_enqueue_script. WordPress is unaware that webpack created the javascript file, and it is just that, a javascript file. This is true wether it contains jquery, was written by hand, or was created by a … Read more

Manipulating the allowed inner blocks of a core-gutenberg-block?

WARNING: There be dragons ahead Changing the allowed innerblocks of the core/buttons block can be done, but it will make your life harder and introduce lots of new problems. Note that it would be faster, easier, and safer to implement a new buttons block that only accepts your custom block. To do this you would … Read more

How to move custom gutenberg block controls from settings to styles tab?

Set the group property of InspectorControls to styles: <InspectorControls group=”styles”> // etc. </InspectorControls> The other possible groups are described in this article.

Javascript function defined in view.js not reachable from save.js

To achieve your goal: All of your React logic will need to be in your edit.js file and not your save.js file. The save.js file is only for viewing the final data on the WP Admin after you save a post or on the live post. The view.js file can only contain Vanilla JavaScript (from … Read more

Processing javascript on wordpress

The script tags are only there to contain the JavaScript that will be executed by the browser. You need to tell WordPress to ignore those tags so it doesn’t process them as HTML. One way to do this is to use the “esc_html” function. You’ll need to wrap the script tags in the following code: … Read more

How can I access custom data fetched from posts in a javascript script?

The best practice way would be to create a REST API endpoint using register_rest_route() hooked to rest_api_init that your Javascript can query.

+ More