Apparently, this is the standard behavior of the library on which the ResizableBox component is based: https://github.com/bokuweb/re-resizable/issues/727 To fix my issue I had to add the following code to my block: import {useRef} from ‘@wordpress/element’; // Refs used to retain block’s scroll position while dragging the resize handle. const parentScrollOffsetX = useRef(0) const parentScrollOffsetY = … Read more
Gutenberg Dev – React Context.Provider returns undefined
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
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
import { store as editPostStore } from ‘@wordpress/edit-post’; Is not the same as const { editPostStore } = wp.editPost.store; In the first line store is editPostStore, but in your second line editPostStore is a property of store, but it doesn’t exist. The correct syntax is const editPostStore = wp.editPost.store; Or const { store: editPostStore } … Read more
There is no dedicated hook or event for this to listen for. Instead use the same data core uses to figure this out: select( ‘core/editor’ ).getDeviceType() e.g. in a react component: const { deviceType } = useSelect( ( select ) => select( ‘core/editor’ ).getDeviceType(), [] ); return <h1>{ deviceType }</h1>; Then you can declare deviceType … Read more
For some reason npm run plugin-zip only ZIP the build file and that’s not enough for a plugin. I created my ZIP file manually by moving the build folder and index.php to a new folder and zip them. And that fixed the issue.
Is the element referenced in useRef somehow not an actual HTMLElement instance? No, it is. But (as you’ve already known it), Mapbox GL JS (v2.15.0) requires that the container, when supplied as an element, be an instance of window.HTMLElement. ( note the window. which means the parent window ) And the thing is, on the … Read more
How to dynamically add style tags to Gutenberg editor in react
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