Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

StackOverflow Point

StackOverflow Point Navigation

  • Web Stories
  • Badges
  • Tags
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Web Stories
  • Badges
  • Tags
Home/ Questions/Q 2892
Alex Hales
  • 0
Alex HalesTeacher
Asked: June 1, 20222022-06-01T18:01:20+00:00 2022-06-01T18:01:20+00:00

javascript – WordPress custom dynamic block with nested inner block error

  • 0

[ad_1]

There’s probably just some little hickup I couldn’t find out, but it just won’t work.
I’m trying to create in WordPress a custom dynamic block with nested inner block. Right now, it seems to work in the Gutenberg edit section, but no further. When I click Update page and refresh, it’s not saved.
I really don’t know anymore, any help would truly be appreciated.

Just download the plugin from wetransfer.com here: wetransfer.link and drop it unzipped into wordpress/wp-content/plugins.
Or you can create theme like this: In the WordPress plugins folder, create a folder named “block_dynamic_newtype” and add these files:

block.json:

  {
      "apiVersion": 2,
      "title": "Block - dynamic - newtype",
      "name": "blockexample/block-dynamic-newtype",
      "category": "custom-fno-category",
      "icon": "star-filled",
      "editorScript": "file:./block.js"
    }

block.asset.php:

<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-i18n' ), 'version' => 'a35cc1c098b69994c9c6d6dc1416bb90');

index.php:

<?php
/**
 * Plugin Name: Block - dynamic - newtype
 */
 
function block_dynamic_newtype_register_render_callback( $attr, $content ) {
  //var_dump($attr);
  //var_dump($content);
  return '<div style="border: 1px solid black;">This is content of dynamic block: '.$attr['content'].'
      place for other blocks:<br>
      <div>'.$content.'</div>
    </div>';
}
 
function block_dynamic_newtype_register() {
  // automatically load dependencies and version
  $asset_file = include( plugin_dir_path( __FILE__ ) . 'block.asset.php');
 
  wp_register_script(
    'block-dynamic-newtype',
    plugins_url( 'block.js', __FILE__ ),
    $asset_file['dependencies'],
    $asset_file['version']
  );
 
  register_block_type( 'blockexample/block-dynamic-newtype', array(
    'api_version' => 2,
    'editor_script' => 'block-dynamic-newtype',
    'render_callback' => 'block_dynamic_newtype_register_render_callback'
  ));
 
}
add_action( 'init', 'block_dynamic_newtype_register' );
?>

block.js:

console.log('block dynamic newtype loaded');
( function ( blocks, blockEditor, data, element ) {
  var el = element.createElement;
  var RichText = blockEditor.RichText;
  var InnerBlocks = blockEditor.InnerBlocks;
  var useBlockProps = blockEditor.useBlockProps;

  blocks.registerBlockType( 'blockexample/block-dynamic-newtype', {
    apiVersion: 2,
    title: 'Block - dynamic - newtype',
    icon: 'star-filled',
    category: 'custom-fno-category',
    attributes: {
      content: {
        type: 'string'
      },
    },
    edit: function (props) {
      var blockProps = useBlockProps();
      var content = props.attributes.content;
      function onChangeContent( newContent ) {
        props.setAttributes( { content: newContent } );
      }

      //return el( 'div', blockProps, el( InnerBlocks ) );
      return el(
        "div",
        blockProps,
        el("div", {class: 'fno_block_editor'},
          el("h3", null, "Blok - dynamický - newtype"),
          el("div", {class: 'block_space'},
            el( InnerBlocks )
          ),
        )
      );
      /*return el(
        RichText,
        Object.assign( blockProps, {
          tagName: 'div',
          class: 'testclas',
          onChange: onChangeContent,
          value: content,
        }),
      );*/
    },
    save: function( props ) {
      return (InnerBlocks.Content);
    },
  } );
} )( window.wp.blocks, window.wp.blockEditor, window.wp.data, window.wp.element );

WordPress version is 6

[ad_2]

  • 0 0 Answers
  • 2 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report
Leave an answer

Leave an answer
Cancel reply

Browse

Sidebar

Ask A Question

Related Questions

  • xcode - Can you build dynamic libraries for iOS and ...

    • 0 Answers
  • bash - How to check if a process id (PID) ...

    • 9 Answers
  • database - Oracle: Changing VARCHAR2 column to CLOB

    • 11 Answers
  • What's the difference between HEAD, working tree and index, in ...

    • 10 Answers
  • Amazon EC2 Free tier - how many instances can I ...

    • 0 Answers

Stats

  • Questions : 43k

Subscribe

Login

Forgot Password?

Footer

Follow

© 2022 Stackoverflow Point. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.