Questions tagged [react]
The react tag has no usage guidance.
36
questions
2
votes
1
answer
415
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:
...
- 131
1
vote
1
answer
297
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 ...
- 169
1
vote
3
answers
445
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&...
- 2,116
1
vote
1
answer
95
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) => {
...
- 1,806
1
vote
1
answer
367
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 ...
- 383
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'
)...
- 1,806
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 ...
- 1,806
1
vote
0
answers
30
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/...
1
vote
0
answers
309
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 ...
- 11
1
vote
0
answers
96
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 (
<>
...
- 692
0
votes
2
answers
198
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: '...
- 126
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. ('...
- 189
0
votes
1
answer
216
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 ...
- 105
0
votes
1
answer
28
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 ...
- 189
0
votes
1
answer
153
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);
...
- 1,806
0
votes
1
answer
117
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;
...
- 1,806
0
votes
1
answer
158
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 ...
- 25
0
votes
1
answer
388
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 ...
- 2,116
0
votes
0
answers
9
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 ...
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 ...
- 1,806
0
votes
0
answers
20
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',
...
- 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 ...
- 1
0
votes
0
answers
54
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 ...
- 1
0
votes
1
answer
84
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 ...
- 194
0
votes
0
answers
267
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 ...
- 1
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 ...
- 71
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.
0
votes
0
answers
69
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/...
0
votes
0
answers
54
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/...
0
votes
1
answer
49
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 ...
- 287
0
votes
0
answers
46
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?
0
votes
1
answer
456
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 [...
- 111
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....
- 37
0
votes
0
answers
87
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 ...
0
votes
2
answers
91
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/...
- 169
0
votes
0
answers
545
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 ...
- 101