Questions tagged [react]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0 votes
0 answers
12 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
47 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,806
0 votes
0 answers
10 views

Set form inside <Placeholder> for new Gutenberg Block

I am looking for a way to get the same result as the Standard Gutenberg block "Table" for my new custom Gutenberg block. I want that inside the fields are seen as inside a form and that ...
Matteo Feduzi's user avatar
1 vote
0 answers
24 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,806
0 votes
0 answers
23 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,806
1 vote
1 answer
299 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
  • 169
0 votes
0 answers
25 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,806
0 votes
1 answer
28 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
58 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
93 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
31 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
  • 189
0 votes
1 answer
50 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
  • 189
0 votes
1 answer
161 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,806
0 votes
0 answers
297 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
208 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
40 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
24 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
85 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
1 vote
0 answers
33 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
1 vote
0 answers
334 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
57 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
128 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,806
0 votes
1 answer
54 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
47 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
101 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,806
0 votes
1 answer
490 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
3k 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
0 votes
1 answer
242 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
  • 105
2 votes
1 answer
441 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: ...
75th Trombone's user avatar
0 votes
0 answers
89 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
93 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
  • 169
1 vote
0 answers
100 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
0 votes
1 answer
165 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
  • 25
1 vote
1 answer
393 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
558 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
1 vote
3 answers
469 views

React Material UI and WordPress Admin Area

I am creating a plugin that uses a React App to run inside the admin section of WordPress, and this app uses React Material UI (MUI) as well. Everything is great, until I started to use "form&...
Greeso's user avatar
  • 2,116
0 votes
1 answer
400 views

Renaming the 'build' directory generated by @wordpress/scripts for React development

When using @wordpress/scripts to create a React app for WordPress, the default configuration to build the app is via running one of the following two scripts wp-scripts build or wp-scripts start (both ...
Greeso's user avatar
  • 2,116