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

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.

Create Youtube embed block with createBlock

Perhaps the name you’re using is incorrect? At least in /block-library/src/embed/core-embeds.js the different embed types seem to follow core-embed/{source} pattern on their names – e.g. core-embed/youtube. And the embed block itself has core/embed as its name.

Using a form to pass GET parameters and create an array of posts accordingly

Figured it out, the issue was the beginning of the url, /wp-admin/admin-post.php?action=insert_event_posts instead of: /wp-admin/edit.php?post_type=event&action=insert_event_posts Thanks for the help!

Working with a non-React external library in a custom block

The problem is here: useEffect( () => { if ( ref.current ) { var panzoom = Panzoom(ref.current, { minScale: 1.1, maxScale: 5, startScale: 1.1, animate: true, duration: 1000, origin: ‘50% 0’ }); } }, []); useEffect runs again when the dependencies parameter changes, but by providing none it will only run once. If you want … Read more

Access jQuery tabs from primary menu while adding/removing class on tab container elements (accessing diff. tabs/tab content via primary menu items)

+ More