plugins - Wordpress Gutenberg Custom Block the viewScript does not get loaded on the frontend when my block is inserted

admin管理员组

文章数量:1122846

I recently developed a custom Gutenberg block by utilizing the @wordpress/create-block package, which effectively generated a full plugin framework. I simply needed to tweak some existing files to get the core functionalities working.

This block is a hero/visual type where users can choose images and add titles for each slide. The block displays correctly on the front end, showcasing all selected images and titles.

My current task is implementing JavaScript to enable carousel functionality. However, I'm encountering an issue where my viewScript (specified as "file:./view.js") isn't loading in the front end. By not loading, I mean that the script doesn't appear in the HTML markup or the network tab.

Here's the content of my block.json located in the build folder:

{
  "$schema": ".json",
  "apiVersion": 3,
  "name": "custom-block/hero",
  "version": "0.1.0",
  "title": "Hero",
  "category": "widgets",
  "icon": "smiley",
  "description": "Custom hero block",
  "attributes": {
    "images": {
      "type": "array",
      "source": "query",
      "default": [],
      "selector": "img",
      "query": {
        "url": {
          "type": "string",
          "source": "attribute",
          "attribute": "src"
        },
        "alt": {
          "type": "string",
          "source": "attribute",
          "attribute": "alt"
        },
        "caption": {
          "type": "string",
          "source": "attribute",
          "attribute": "data-caption"
        }
      }
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "hero",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js",
  "viewStyle": "file:./view.css"
}

You can verify the presence of view.js in the build folder of my plugin right here in the actual repository.

The plugin's main file, hero.php, does not utilize the render_callback function, hence I assumed there's no need for manual script enqueueing. Here’s how it looks:

/**
 * Plugin Name:       Hero
 * Description:       Custom hero block.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Daniel
 * License:           GPL-2.0-or-later
 * License URI:       .0.html
 * Text Domain:       hero
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}

function create_block_hero_block_init() {
  register_block_type( __DIR__ . '/build' );
}

add_action( 'init', 'create_block_hero_block_init' );

Despite correctly adding the block and saving the page, the view.js script remains undetected on the frontend. I've scoured the internet for solutions, but it seems to work for others. Could I be missing an important step?

Thanks in advance for any guidance.

I recently developed a custom Gutenberg block by utilizing the @wordpress/create-block package, which effectively generated a full plugin framework. I simply needed to tweak some existing files to get the core functionalities working.

This block is a hero/visual type where users can choose images and add titles for each slide. The block displays correctly on the front end, showcasing all selected images and titles.

My current task is implementing JavaScript to enable carousel functionality. However, I'm encountering an issue where my viewScript (specified as "file:./view.js") isn't loading in the front end. By not loading, I mean that the script doesn't appear in the HTML markup or the network tab.

Here's the content of my block.json located in the build folder:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "custom-block/hero",
  "version": "0.1.0",
  "title": "Hero",
  "category": "widgets",
  "icon": "smiley",
  "description": "Custom hero block",
  "attributes": {
    "images": {
      "type": "array",
      "source": "query",
      "default": [],
      "selector": "img",
      "query": {
        "url": {
          "type": "string",
          "source": "attribute",
          "attribute": "src"
        },
        "alt": {
          "type": "string",
          "source": "attribute",
          "attribute": "alt"
        },
        "caption": {
          "type": "string",
          "source": "attribute",
          "attribute": "data-caption"
        }
      }
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "hero",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js",
  "viewStyle": "file:./view.css"
}

You can verify the presence of view.js in the build folder of my plugin right here in the actual repository.

The plugin's main file, hero.php, does not utilize the render_callback function, hence I assumed there's no need for manual script enqueueing. Here’s how it looks:

/**
 * Plugin Name:       Hero
 * Description:       Custom hero block.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Daniel
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       hero
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}

function create_block_hero_block_init() {
  register_block_type( __DIR__ . '/build' );
}

add_action( 'init', 'create_block_hero_block_init' );

Despite correctly adding the block and saving the page, the view.js script remains undetected on the frontend. I've scoured the internet for solutions, but it seems to work for others. Could I be missing an important step?

Thanks in advance for any guidance.

• plugins
• php
• javascript
• block-editor
• wp-enqueue-script

Share Improve this question asked May 3, 2024 at 4:25 Daniel V.Daniel V. 15144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

Problem solved. If there's anybody that has the same problem as me, go into the *.php file where you're trying to render the block. Make sure that you're using the_content() in order to render the page content and not get_the_content().

本文标签：