Skip to main content
Share Your Experience: Take the 2024 Developer Survey

Questions tagged [react]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0 votes
1 answer
17 views

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

With <InspectorControls> i'm able to extend the WP Gutenberg Sidebar but i want to extend the default tabs like in this picture: How can i create my own sidebar tabs?
Sam Weiss-Gamtschi's user avatar
1 vote
1 answer
58 views

Gutenberg Static blocks: viewScript doesn't import css for frontend?

I am building static block slider (Swiper JS). Used wordpress/create-block https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/. Besides importing the JS & ...
Ion T's user avatar
  • 25
0 votes
1 answer
22 views

How can I use the zip of my plugin in another website?

I created a new plugin for a WordPress project using @wordpress/scripts in my local environment. After I finished and ran the command npm run plugin-zip it generated the zip file but couldn't be ...
Moussa Saidi's user avatar
0 votes
0 answers
11 views

Unable to trigger a frontend @wordpress/hooks action

I’m trying to implement a frontend WC block hook, but unfortunately I’m not able to trigger it. I’m using a fresh 8.7.0 install, and blocks are definitely enabled. I’ve tried following the ...
Dylan Pierce's user avatar
0 votes
1 answer
32 views

Hook into viewport change?

i have create a component that will update the viewport "Mobile, Tablet, Desktop" above. Of course, the user could also change the viewport on the top, but than my settings not synchron to ...
Sam Weiss-Gamtschi's user avatar
2 votes
2 answers
46 views

How to I serve the static HTML file at the root directory in a wordpress site?

I am trying to use wordpress as a headless CMS for my react frontend. The build version is completely functional connecting to the wordpress api https://www.example.com/wp-json/wp/v2. The react ...
Rifky Niyas's user avatar
0 votes
1 answer
43 views

How to detect changes in WooCommerce store (react)?

Since WooCommerce merged blocks in the plugin, the cart is now completely 'reactified'. Meaning I update the quantity on my cart, I see a network call to an endpoint, thigs update without reloading, ...
dingo_d's user avatar
  • 1,950
1 vote
2 answers
202 views

How to re-render Gutenberg component when object instance is available

I'm working on a Gutenberg component that displays a grid of images using the core Masonry library (some code omitted for brevity): const containerMasonryRef = useRefEffect((element) => { var ...
leemon's user avatar
  • 1,918
1 vote
1 answer
38 views

Can you nest columns/column in a gutenberg custom template?

I am trying to nest a core columns within a core/columns /core/column template. I keep getting an error that block can't render. However looking at my code it looks fine. [I've simplified the code] So,...
Dave B's user avatar
  • 25
0 votes
0 answers
45 views

wp_add_inline_script vs wordpress fetch api

Inorder to pass some data from PHP to the javascript files, we can use either wp_add_inline_script or fetch api. Is there any condition, where each one of them is preferred over the other ? I have ...
Shadow's user avatar
  • 57
2 votes
1 answer
286 views

How to add an additional dependency to a block index.asset.php file

I have a plugin that registers four different Gutenberg blocks. I build them using the build script from the wp-scripts package. As you all surely know, this script automatically generates an index....
leemon's user avatar
  • 1,918
0 votes
1 answer
50 views

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 import { __ } from '@wordpress/i18n'; import { ...
Dave B's user avatar
  • 25
0 votes
0 answers
17 views

Force post update with React

I'm creating a plugin and I have added a custom settings panel in the editor sidebar. In my settings panel I have a couple of text inputs and a custom button that calls an endpoint to pass some data ...
TsvetkoKrastev's user avatar
1 vote
0 answers
30 views

Core/Image access caption in render_template and in wp.hooks

I am making an override to core/image block -disabling styles, changing markup and such. I have managed to solve some things, but struggle with some others. Here is my code: filters.php <?php use ...
Sam Tyurenkov's user avatar
1 vote
1 answer
101 views

useSelect() plus resolver result is serving cached data incorrectly

Well ok, it's probably not incorrect that the data is cached, but it's not what I want to happen. But I am stuck on how to correctly set up my custom data store the way I need. I'm trying to set up a ...
helgatheviking's user avatar
0 votes
0 answers
12 views

How to add a react element into the DOM node (only on the user-interaction like on click) without using the state?

I'm working on a WP plugin project that requires a react element to take the position of the main DOM node(main component) content when the button is clicked, but without the use of state in the main ...
Shashikant Yadav - Kantbtrue's user avatar
1 vote
0 answers
57 views

Custom plugin translation not working

I made a plugin that contains 2 custom gutenberg blocks created with react and jQuery (for some front-end stuff) and I'm having troubles translating them. There are no translation strings inside the ...
tsvetko.krastev's user avatar
1 vote
1 answer
69 views

Gutenberg DatePicker component with time set to zero

I'm using the following code to get and set a date meta value for a CPT in Gutenberg (some code omitted for brevity): const [meta, setMeta] = useEntityProp( 'postType', 'activity', 'meta' )...
leemon's user avatar
  • 1,918
1 vote
1 answer
59 views

How to build BOTH non-block components and blocks present in the /src directory using @wordpress/scripts

I regularly use @wordpress/scripts for building both blocks and non-block components. Recently, I started working in a new plugin that registers both some blocks and non-block components that add ...
leemon's user avatar
  • 1,918
0 votes
0 answers
30 views

Separate typography controls for titles and meta in a custom block?

I'm building a simple dynamic custom block that shows a list of posts of a custom post type. JS: import metadata from './block.json'; import './style.scss'; const { name } = metadata; export const ...
leemon's user avatar
  • 1,918
1 vote
1 answer
424 views

Why is the Gutenberg editor not recognizing my updates?

I'm currently working on a Gutenberg block that includes a toggle control to hide or show content. I'm following the WordPress developer documentation, and the block behaves correctly when I toggle ...
JayDev95's user avatar
  • 179
0 votes
0 answers
115 views

Embedded data and the _fields parameter in getEntityRecords

I'm using the following code to retrieve a list of post of a custom post type named movie: const { posts, hasPostsResolved } = useSelect(select => { const query = { order: 'desc', ...
leemon's user avatar
  • 1,918
0 votes
1 answer
39 views

Image size not showing up in 'wp/v2/media'

I'm trying to get the URL of a specific image size, and I'm using apiFetch: const response = await apiFetch({ path: `wp/v2/media/${id}`, method: "GET", }); The ...
Vincent's user avatar
0 votes
0 answers
118 views

Get realtime title and featured image value in Wordpress block

I'm building a WordPress block in React, and I need the title and featured image to be displayed in the block. So I need a way to get the title value and the featured img URL in real time, so it ...
Michael's user avatar
0 votes
1 answer
292 views

How to get block editor block inspector attribute value in my react block

I have used the scaffolding to create a block that is react on the front end. The code is below. As you can see I have added two fields to the block but I do not know how to get the values entered in ...
brothman01's user avatar
0 votes
1 answer
149 views

Removing Default Panels From Gutenberg Document Setting Panel (sidebar)

Here's a second question in my quest to understand the Gutenberg Document Settings Panel sidebar and customize it. (See my first question here.) I have the following jsx code working for the edit ...
Andrew's user avatar
  • 199
1 vote
1 answer
150 views

Problems with the PluginDocumentSettingPanel SlotFill in Gutenberg

I'm trying to figure out Gutenberg's SlotFills in WordPress. Specifically, trying to explore what is and isn't possible out of the box for customization of the post editing interface sidebar. ('...
Andrew's user avatar
  • 199
0 votes
1 answer
256 views

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

I'm building a custom Masonry (non-jQuery version) gallery block and I managed to make it work in the block editor. I'm using WP 6.3. This is roughly the code: JS: const containerRef = useRef(null); ...
leemon's user avatar
  • 1,918
0 votes
0 answers
760 views

Gutenberg block: add a multi-select for posts

I created a custom Gutenberg block with @wordpress/create-block. I now have a dropdown where you can select a post, but I would like this to be a multi-select where you can select multiple posts. How ...
azrac's user avatar
  • 1
0 votes
2 answers
357 views

How to implement Mapbox GL JS with a custom Gutenberg block in FSE?

I'm working on a custom Gutenberg block that uses the Mapbox GL JS API for displaying a map. To create the map I have to call the following constructor. const map = new mapboxgl.Map({ container: '...
Emiel Zuurbier's user avatar
0 votes
0 answers
95 views

Force-update the meta variable first set using `var [ meta, setMeta = useEntityProp( 'postType', postType, 'meta' );`

Context: I've got a plugin that triggers some actions when a post is saved, like contact an external API and save the result as a custom field. All of this happens in the background, using PHP and the ...
Jan Boddez's user avatar
0 votes
0 answers
25 views

How to access WP header from Appearance > Header using WP Rest api (React)

Need to use the WordPress Header Section in react js. No plugin is used for plugin it is by default.
Anand Kumar's user avatar
0 votes
0 answers
213 views

WP Rest-API response is unauthorized (React)

I am using trying to fetch data from wp to react via rest api. There are two API's I am working upon. First one is wp/v2/pages is working fine (With credentials it is authorized) but, Second api wp/v2/...
Anand Kumar's user avatar
2 votes
0 answers
40 views

configure additonal build files in the @wordpress/create-block

I'm using the @wordpress/create-block package to create my block plugin. It comes with preconfigured webpack settings to build all the assets. By default as js in the src/ folder is built in the build/...
Will Honeywill's user avatar
2 votes
1 answer
608 views

useBlockProps() nests wrapper with class name inside block wrapper in the editor

I'm trying to add a tailwind class to the block wrapper of a custom block I'm developing. However, useBlockProps({className: 'h-full'}) generates an additional wrapper with the tailwind class name ...
Gayle F.'s user avatar
0 votes
0 answers
94 views

Cannot call a class as a function in block plugin react component

I'm developing a block plugin and working with the React packages for WordPress. In my Save function I'm trying to load a slider component from the package ['react-slick'] (https://github.com/akiran/...
Will Honeywill's user avatar
0 votes
1 answer
193 views

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

I'm trying to develop a Gutenberg block that needs the Masonry lib to work: const containerRef = useRef(null); const { attributes: { images, column_width, gap }, setAttributes, } = props; ...
leemon's user avatar
  • 1,918
0 votes
1 answer
87 views

Detecting whenever a user types - in the Gutenberg editor, and checking if there is a preceding or succeeding - then converting both to an em dash

I'm having quite a lot of trouble trying to hook an event listener to WordPress's Gutenberg Editor. There is very little documentation on this, and ChatGPT doesn't give very good answers too. What I ...
John Doe's user avatar
  • 287
0 votes
0 answers
62 views

How to dynamically add style tags to Gutenberg editor in react

Is there any way to add a dynamic style tag to the editor content area by react. The inner content will change by editing. Is any component or hook can use?
wewe_loohotmailcom's user avatar
1 vote
1 answer
142 views

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

I'm using the following code to be able to use the Panzoom JS lib in a custom block. This is a non-React library for panning and zooming elements using CSS transforms: edit: (props) => { ...
leemon's user avatar
  • 1,918
0 votes
1 answer
1k views

How can I include React useState in a custom gutenberg block plugin?

The block code is as such: wp.blocks.registerBlockType('myblocks/gallery', { title: 'Gallery', icon: 'my-gallery', category: 'common', attributes: { }, edit: props => { const [...
budgiebeaks's user avatar
0 votes
2 answers
5k views

'useSate' error when using React on the frontend in custom block plugin

I keep getting this error with React on the frontend Uncaught TypeError: Cannot read properties of null (reading 'useState') I'm trying to use this hamburger component (https://hamburger-react....
Shelaine's user avatar
1 vote
1 answer
453 views

Creating my own "recent blog posts" static Gutenberg block, can't use react hooks in the frontend

so I was trying to learn more about Gutenberg Blocks and I wanted to make a block that shows the last three blog posts - something that could be used at the bottom of each page of my Wordpress site. I ...
Mike Sav's user avatar
  • 127
2 votes
1 answer
810 views

How can I render a built-in Gutenberg block with InnerBlocks outside of the block editor?

I want to show my custom styling for some built-in blocks in my project's Storybook instance. I have it working great for simple blocks. To show the Paragraph block, I do this: Paragraph.stories.jsx: ...
Lanny Heidbreder's user avatar
0 votes
0 answers
103 views

How do i fix type error

i an getting an error in my react build online, even though it seems to be working fine locally. react-dom.production.min.js:189 TypeError: Cannot read properties of undefined (reading 'length') at VK ...
Mad Crowe's user avatar
0 votes
2 answers
115 views

Why is my Toggle field not showing in Gutenberg?

I am adding a PluginSidebar to Gutenberg and it works until I try to add a meta field to the sidebar. Then it doesn't work. I'm not sure why though. import { registerPlugin } from "@wordpress/...
JayDev95's user avatar
  • 179
1 vote
0 answers
120 views

How to add more elements to an already existing <PanelBody> section in Gutenberg

I am filtering core blocks to add more functionality and I know how I can create a new section in the sidebar that is opened by default like this: return ( <> ...
NextGenThemes's user avatar
1 vote
1 answer
268 views

React Plugin Settings Page Localization

I'm learning how to make plugins, and Thanks to Sally CJ managed to get translation working on the PHP files, and the Gutenberg Block... (If any need help on this check here ) But, I can't make it ...
Jorge's user avatar
  • 35
1 vote
1 answer
687 views

What is the standard way to use the version of React that ships with Gutenberg on the front end?

I want to create a Gutenberg block that uses React on the client rendered page (not the admin pages). Is React code split from the rest of Gutenberg? If so, how can I enqueue that specific bundled ...
lookyhooky's user avatar
0 votes
0 answers
811 views

What is the proper way of using React Hooks in Gutenberg on frontend?

I'm mostly interested in useState. It works fine in edit.js, but in save.js it just breaks and it throws the minified React error, see below: I tried creating a separate .jsx component file but it ...
Kerox's user avatar
  • 101