1

I am learning how to develop a plugin for wordpress. I am running into some issue. The plugin that I am developing is a custom block. I am able to successfully activate the plugin but when I go to my block editor, the custom block is not there. Could I have some one take a look at what I have to make sure there are no mistakes?

PHP File:

<?php

/**
 * Plugin name: Animation fade custom block
 * Descritption: Plugin used to implement fade-in/out effects
 */

 function midstory_fade_animation_script_register()
 {
    // Script name, script location, related js name, array of dependecies, Word press refresh?, in footer boolean
    wp_enqueue_script('midstory-animation-fade-block', plugin_dir_url(__FILE__).'midstory_animation_fade.js', array('wp-blocks', 'wp-i18n', 'wp-editor'), true, false);
 }

 add_action('enqueue_block_editor_assets', 'midstory_fade_animation_script_register');

?>

Javascript:

wp.blocks.registerBlockType('midstory/custom-block',{
    title: 'Animation Fade Block',
    icon: 'hammer', // Go to https://developer.wordpress.org/resource/dashicons/#minus for dash icons
    category: 'design',
    attributes: {
        fadeInLength: {type: 'string'},
        fadeOutLength: {type: 'string'},
        Picture: {type: 'string'} // Location of Picture
    },
    edit: function(props){// All properties pulled from WP blocks
        return React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Fade In Time"), /*#__PURE__*/React.createElement("input", {
          type: "text",
          value: props.attributes.fadeInLength,
          placeholder: "0"
        }), /*#__PURE__*/React.createElement("label", null, "Fade out Time"), /*#__PURE__*/React.createElement("input", {
          type: "text",
          value: props.attributes.fadeOutLength,
          placeholder: "0"
        }), /*#__PURE__*/React.createElement("label", null, "Image"), /*#__PURE__*/React.createElement("input", {
          type: "text",
          value: props.attributes.Picture,
          placeholder: "/example/location"
        }));
    },
    save:function(props){
        return null;
    }




})
1
  • In the browser's developer tools can you see your script loading? Is the URL correct? If so, are there any JavaScript errors in the console? Aug 18 at 16:28

1 Answer 1

2

A few parameters need tweaking in midstory_fade_animation_script_register():

function midstory_fade_animation_script_register() {
    // Handle, script location, dependecies, version, in footer boolean
    wp_enqueue_script( 'midstory-animation-fade-block', plugin_dir_url( __FILE__ ) . '/midstory_animation_fade.js', array( 'wp-blocks', 'wp-i18n', 'wp-editor' ), '1.0.1', false );
}
  • The script location needs a slash between the plugin folder and the filename.
  • What you were calling "WordPress refresh?" is for a version number.

That will get your block showing up as an option to add in the Editor. Beyond that, you should look into wordpress/element rather than calling React directly as WordPress has built wrappers around its functionality.

1
  • 1
    Yes! This is the correct answer. Thank you so much. It is now appearing in the editor as intended! I would upvote but my rep is too low Aug 18 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.