react - Read For Learn

Force post update with React

move useState variable from edit.js to save.js. How do I do that?

I want to move the useState variable selectedValue once it’s defined in edit.js and import it into save.js. In edit. js the code looks like this This is impossible and not how save components work. A save component takes a set of block attributes, and generates static HTML to be saved in the database. It’s … Read more

wp_add_inline_script vs wordpress fetch api

Unable to trigger a frontend @wordpress/hooks action

How can i extend the existing Block Inspector Tabs in WordPress Gutenberg Editor?

The Core script has no API surface to modify those tabs. The tabs are rendered by InspectorControlsTabs: export default function InspectorControlsTabs( { blockName, clientId, hasBlockStyles, tabs, } ) { // The tabs panel will mount before fills are rendered to the list view // slot. This means the list view tab isn’t initially included in … Read more

Implementation of React-Datepicker component with Gutenberg in WordPress

Event when Modal is opened/visible

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

Gutenberg Dev – React Context.Provider returns undefined

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

+ More