Making a Block

Blocks are provided in the CMS plugin module. Therefore, we continue the plugin module test-cmspluginhello we created earlier, and make a block in it

How to make a plugin, please refer to: Development - Making a Plugin

1. Reference Blocks and Schemas

Reference Blocks and Schemas in the meta of the module

src/module/test-cmspluginhello/backend/src/meta.js

const blocks = require('./config/blocks.js');

module.exports = app => {
  const schemas = require('./config/validation/schemas.js')(app);
  const meta = {
    ...
    validation: {
      validators: {
        blockIFrame: {
          schemas: 'blockIFrame',
        },
      },
      keywords: {},
      schemas: {
        blockIFrame: schemas.blockIFrame,
      },
    },
    cms: {
      plugin: {
        blocks,
      },
    },
  };
  return meta;
};

Name	Description
cms.plugin.blocks	Block list provided by this module
validation.validators.blockIFrame	Validator corresponding to block
validation.schemas.blockIFrame	Schema corresponding to block

2. Definition of Blocks

src/module/test-cmspluginhello/backend/src/config/blocks.js

const iframe = require('./block/iframe.js');

module.exports = {
  iframe,
};

src/module/test-cmspluginhello/backend/src/config/block/iframe.js

module.exports = {
  meta: {
    name: 'iframe',
    title: 'Embed Page',
    validator: 'blockIFrame',
  },
  data: {
    default: {
      url: '',
      width: '',
      height: '',
    },
  },
  render({ md, options, block, token, index, content }) {
    const url = md.utils.escapeHtml(content.url);
    const width = md.utils.escapeHtml(content.width || '100%');
    const height = md.utils.escapeHtml(content.height || '300px');
    return `<div class="block block-iframe" style="width:${width};height:${height};"><iframe width="100%" height="100%" scrolling="auto" frameborder="0" src="${url}"></iframe></div>\n`;
  },
};

Name	Description
meta	Block’s meta infomation
meta.name	Block’s Name
meta.title	Block’s Title
meta.validator	Validator
data.default	Default value of block’s content
render	Block’s rendering method

• Parameters of render

Name	Description
md	MarkdownIt instance, refer to: MarkdownIt
md.utils.escapeHtml	In particular, it is often necessary to escape the user’s input content safely by this method, so as to avoid the occurrence of injection vulnerability
options	Extend options
options.utils.text	Get the i18n locale string by this method
options.blocks	All of Blocks
block	Definition of this Block
token	MarkdownIt Rendering Parameters
index	MarkdownIt Rendering Parameters
content	User’s input content

3. Definition of Schema

JSON schema is used to verify whether the data entered by the user meets the expectation. If it does not meet the expectation, there will be a striking prompt

About JSON Schema, please refer to: Form Validation

src/module/test-cmspluginhello/backend/src/config/validation/schemas.js

module.exports = app => {
  const schemas = { };
  // block iframe
  schemas.blockIFrame = {
    type: 'object',
    properties: {
      url: {
        type: 'string',
        ebType: 'text',
        ebTitle: 'URL',
        format: 'uri',
        notEmpty: true,
      },
      width: {
        type: 'string',
        ebType: 'text',
        ebTitle: 'Width',
      },
      height: {
        type: 'string',
        ebType: 'text',
        ebTitle: 'Height',
      },
    },
  };

  return schemas;
};