Questions tagged [wordpress-gutenberg]

2

votes
0

answer
10

Views

Stop wpautop from running in Gutenberg custom html blocks

I am frontend developer and Wordpress is having its way with me. I have tried every solution I've found on every marginally-related post from Stack Exchange to Quora and back and I've accomplished nothing. Please help me, I'm one failed attempt away from turning to black magic for a solution. Maybe...
Orion
0

votes
0

answer
5

Views

How to make a JavaScript validation on WordPress Gutenberg Editor Metabox

I am creating a custom taxonomy 'date' for a custom post type 'announcement' on the new version of WordPress with Gutenberg. I need this taxonomy to be a mandatory field to publish the post, and I already tried with and it did not work, now I am struggling to validate that input with class 'require...
Rayner Fernández
1

votes
4

answer
442

Views

Wordpress 5.0.3 - “Updating failed” and “Publishing failed”. Console log shows a 404 on /blog/wp-json/wp/v2/posts/1177/autosaves?_locale=user

I updated Wordpress to the latest version (5.0.3). Now, any time I try to post I get a red message that says 'Publishing failed'. If I try to save a draft I get 'Updating failed'. In console, I'm seeing https://mydomain/com/blog/wp-json/wp/v2/posts/1177/autosaves?_locale=user 404 When I test the UR...
Front_End_Dev
1

votes
2

answer
657

Views

How do I use a Font Awesome icon for a custom Gutenberg block?

I am following a tutorial by Zac Gordon regarding how to use the SVG path for a custom icon of a Gutenberg block. I'm looking to use the Info Circle from Font Awesome. I have the following defined for the icon element but the icon space is empty: const iconEl = el('svg', { width: 20, height: 20 }, e...
epierpont
0

votes
0

answer
19

Views

React : how to prevent escaping in data-attribute

I have a JSON that looks like that { 'id':'xyz', 'height':1024, 'width':1024 } that I would like to have in a data attribute like so : but when I use react It escape the string like so : I use this code to generate the element React.createElement('div', { 'data-command' : JSON.stringify({ 'id':'xyz...
fred_
1

votes
1

answer
80

Views

Wordpress Gutenberg React – render variable with HTML

I have this code in a custom WordPress Gutenberg block let whole = Math.floor(stars_client); let fraction = stars_client - whole; let stars_data = ''; for (var i = 0; i < whole; i ++) { stars_data = stars_data + ''; } if (fraction > 0) { stars_data = stars_data + ''; } return ( { testimon...
Crerem
0

votes
0

answer
4

Views

Pass Json img src to front-end

I am able to select multiple images on the back-end of WordPress and list on the Json format at the console. However I can't manage to show and display them on the front-end, how do I parse the format ? (...) const imagesList = img.map( ( img ) => { return { imgID: img.url, }; }); props.setAttribu...
1

votes
2

answer
495

Views

Wordpress Gutenberg: React components on front end

Gutenberg is still pretty new, but I'm still hoping someone has encountered this issue and found a solution. I've used create-guten-block to boilerplate a project and created a test block. The problem I'm running into is that when I try to use a React component to modify state on the front-end, noth...
iskotaa
0

votes
0

answer
14

Views

Wordpress Custom Page requires clicking submit twice - why?

I'm working with a childtheme and before the gutenburg project was released, my page/form was working. The page would post to itself and if the criteria was all met, it'd hide the form and display a success message. Now you have to click the submit button, the form's opacity changes (best way I can...
HPWD
1

votes
0

answer
10

Views

WordPress Gutenberg Block Editor Register Styles, Scripts & Blocks

I have created some custom blocks for the editor, the blocks are working but I am having an issue with the CSS. blocks.editor.build.css loads in the editor and the frontend, it should only load in the editor. blocks.style.build.css should load in both spots but doesn't load anywhere. Also, is ther...
Jon
2

votes
5

answer
639

Views

Remove Gutenberg CSS

I have Gutenberg plugin installed in WordPress v4.9.8 and am trying to remove the CSS that comes with it so I can supply my own. This is the sheet that gets included: I have tried the following: add_action( 'wp_print_styles', 'wps_deregister_styles', 100 ); function wps_deregister_styles() { wp_deq...
Matt Saunders
7

votes
4

answer
476

Views

Gutenberg editor content in JavaScript (WordPress)

Back in TMCE days, we could easily get editor content with editor.getContent(). However in new Gutenberg editor, I can't find a method to do that. I need all editor content as HTML (the way it will be saved in database). I found wp.block.serialize() method which sounds promising. But seems to need b...
shramee
3

votes
0

answer
573

Views

Gutenberg - Multiple InnerBlocks in one block-type

I am trying to make custom columns block since the wordpress default used by gutenberg is not what I need. So i have looked up how it works, its uses InnerBlocks block with a layout definition, but there is no way to specify the html tag and the class for the columns so it's useless for me. Then I...
Erik Kubica
3

votes
0

answer
47

Views

How to disable default title block in Gutenberg with Javascript

Is there a way to disable the default title block in the Gutenberg editor with JavaScript? Couldn't find anything in the official API. Something like a property in the settings object that you pass when setting up the Gutenberg. Currently, I do like so (with the title): const window = this.iframe.co...
nikitahl
1

votes
2

answer
451

Views
1

votes
1

answer
521

Views

Gutenberg: Allow additional formatting in RichText

I have created a fairly simple accordion block, and it works great for basic text. The problem is that the control I am using for the accordion content is the RichText, which only allows for basic formatting such as bold. What if I wanted to create an Unordered List as well as basic text? I am curre...
Harmonic
2

votes
1

answer
120

Views

Gutenberg block: How to add RichText an to un-ordered list

I am trying to create a custom Gutenberg block that would have an un ordered list of multiple RichText components. The end result would be something like: First item Second item I have been playing around with the Recipe card example from this WordPress tutorial I can see how the RichText component...
chris
2

votes
1

answer
246

Views

Gutenberg custom block with responsive images

I followed this tutorial on how to build a custom WordPress Gutenberg Block: https://neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/ This first block is nice, but I would like to use a custom images size in this block. This image size should the also be responsive, that means on...
Luke
2

votes
0

answer
49

Views

How to fix Gutenberg's Convert to Blocks?

When I update something in my Gutenberg's JS code and save it, that block is broken in all of my posts wherever it is used and following error is being displayed: Can you please let me know how to fix this error (without removing and re-adding block as a fix because I might have 100+ posts!)
Rushda F
2

votes
1

answer
96

Views

Gutenberg media upload in Inspect Controls

I am trying to upload the file via Media Library from Inspect Control in Gutenberg. I am using this code currently in JS : var el = wp.element.createElement, registerBlockType = wp.blocks.registerBlockType, ServerSideRender = wp.components.ServerSideRender, TextControl = wp.components.TextControl, T...
daniyalahmad
0

votes
0

answer
2

Views

Wordpress Gutenberg withSelect get list of post types

I am using Gutenberg's withSelect package to try to get all of the post types belonging to the site. Here is my code: export default withSelect( select => { // shorthand const { getEntityRecords } = select( 'core' ); return { typesList: getEntityRecords( 'types', '' ), }; } )( SearchEdit ); But I am...
rhysclay