ACF Repeater for registering Gutenberg Blocks

I am working on a template where I want to make a function that I can use the repeater field from ACF to combine that with the acf_register_block_type();.

What I have is the following:

 <?php          $  rows = get_field('register_block');     if( $  rows ) {         foreach( $  rows as $  row ) {           $  register_block_name_function = $  row['register_block_name'];           $  register_block_name = $  row['register_block_name'];             function $  register_block_name_function() {                      acf_register_block_type(array(                     'name' => $  register_block_name,                     'title' => __('3 Columns'),                     'render_template' => '/acf/blocks/gutenberg/columns-3.php',                     'category' => 'blocks',                     'mode' => 'auto',                     'supports' => array(                         'align' => true,                         'mode' => true,                         'anchor' => true,                     ),                     'icon' => array(                       // Specifying a background color to appear with the icon e.g.: in the inserter.                       'background' => '#B53A73',                       // Specifying a color for the icon (optional: if not set, a readable color will be automatically defined)                       'foreground' => '#FFF',                       // Specifying a dashicon for the block                       'src' => 'align-left',                     ),                 ));                  }                  // Check if function exists and hook into setup             if (function_exists('acf_register_block_type')) {                 add_action('acf/init', $  register_block_name_function);             }              }     }   ?> 

Is there a way that I can use 1 ACF Repeater to create multiple Gutenberg bocks by just adding a name.

Why doesn’t the Gutenberg code editor allow code to be nested in sections?

I’m trying to add my own HTML code in the Gutenberg code editor, but unfortunately when trying to save the editor automatically moves the closing tag </section> to the end of the first line. What is this about ? Why can’t I nest my code this way normally ? To illustrate the problem I attach a picture.

enter image description here

I would like the section closing tag to be at the end of all code.

Gutenberg block previews suddenly not working

I have an issue with the Gutenberg block previews suddenly not showing at all when hovering over available blocks in the side panel. I have tried:

  • Commenting out custom code in the functions.php, including removing any enqueued JavaScript and CSS from the admin
  • Deactivating plugins (such as Advanced Custom Fields)

But the preview popup is still not showing. It worked initially, but right now it’s not working at all. I can’t see any errors in the JavaScript console or by enabling debug in the wp-config.php.

The expected behaviour would be for each block to show a preview and a description of the block that you’re hovering, but that popup is not showing as it is now. See this image for how it should look like:

enter image description here

I’ve tried searching for this on Google, but I can’t find anyone else having this problem. Has anyone here had this problem and knows what was causing it? Or is it a problem occurring because of a bug in WordPress itself?

How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?

I am using $ wpdb to do a mysql query and get the data from a php file.

$  results = $  wpdb->get_results("SELECT * FROM table_name");  

Now, I have registered a Gutenberg block with the wordpress api..

the component is a .js file, which uses (WordPress React) under the hood:

import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import edit from "./pruefungenEdit";  registerBlockType("mytheme-blocks/pruefungen", {     title: __("Pruefungen Block", "mytheme-blocks"),     description: __("Display a Table of exams", "mytheme-blocks"),     category: "mytheme-category",     icon: {         background: "#f03",         foreground: "#fff",         src: "dashicons-database",     },     keywords: [__("pruefungenBlock", "mytheme-blocks")],     edit: edit,     save: () => {         return <p>Test</p>;     }, }); 

This is my React component that I use for above edit() function:

import { Component } from "@wordpress/element"; import { withSelect } from "@wordpress/data"; import { __ } from "@wordpress/i18n";  class PruefungenEdit extends Component {      render() {         //where to get the data from the query in .php file??         return <div>Data...</div>;     } }  export default PruefungenEdit; 

I can’t use php code obviously inside my .js react file.. I thought about setting up a small nodejs server that queries my localhost mysql table, and send that data via custom api route. THen I query that route on my react frontend and display the data… but that looks like too much workaround to me, I mean php is itself some kind of backend, does WordPress not offer that possibility to query mysql data and send it to the frontend somehow?

My question now is, how do I get the data from the php file into my gutenberg Block that I registered for the block editor frontend?

Custom Post Type and Custom REST API Endpoint result in Gutenberg editor not working

I have a custom post type (article) and have implemented a custom REST API endpoint for that post type. I can retrieve single and multiple articles via the custom endpoint without any issues.

However, when I try to add a new or edit an existing article post within WP Admin, I just get a white screen. The web console shows an error that the rest route does not exist but it is using the standard WP REST Route "No route was found matching the URL and request method." The GET call is to /wp-json/wp/v2/article. The route should be /wp-json/kbs/v1/articles – and that route works. When registering the post type I have the following args…

'show_in_rest'          => true, 'rest_base'             => 'articles', 'rest_controller_class' => 'KBS_Articles_API' 

How can I ensure that WP uses the correct route when loading the block editor? Editing with the classic editor works fine.

Tidy HTML formatting in Gutenberg HTML blocks

When forming my own HTML blocks, trying to keep my HTML tidy for easy debugging purposes is a pain because tab spacing cannot be used, and therefore multiples of 4 spaces or more has to be used for each indentation level. Having to count 1,2,3,4…1,2,3,4…1,2,3,4 for example to keep everything in line slows down page production too.

Is there a way of allowing tab spacing to be used within Gutenberg blocks?

wp_schedule_single_event issue with save_post hook in gutenberg

I am using the "save_post" hook to call wp_schedule_single_event. Everything works as expected with the classic editor, however when I try a post in gutenberg there isn’t actually a cron entry that is getting created. I know it’s still calling the hook since it’s updating some post meta values. Any ideas why the cron entry is not saving with the wp_schedule_single_event call?