react

Avoid automatic scroll jump when dragging a resize handle in a Gutenberg block

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

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

Removing Default Panels From Gutenberg Document Setting Panel (sidebar)

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

Hook into viewport change?

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

+ More