src/index.js

   1 /**
   2  * Registers a new block provided a unique name and an object defining its behavior.
   3  *
   4  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
   5  */
   6 import { registerBlockType } from '@wordpress/blocks';
   7 import { AlignmentToolbar } from '@wordpress/block-editor';
   8
   9 /**
  10  * Retrieves the translation of text.
  11  *
  12  * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
  13  */
  14 import { __ } from '@wordpress/i18n';
  15
  16 /**
  17  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
  18  * All files containing `style` keyword are bundled together. The code used
  19  * gets applied both to the front of your site and to the editor.
  20  *
  21  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  22  */
  23 import './style.scss';
  24 import './editor.scss';
  25
  26 /**
  27  * Internal dependencies
  28  */
  29 import Edit from './edit';
  30 import save from './save';
  31
  32 /**
  33  * Every block starts by registering a new block type definition.
  34  *
  35  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  36  */
  37 registerBlockType( 'dnxvatar/danixland-gravatar', {
  38         /**
  39          * This is the display title for your block, which can be translated with `i18n` functions.
  40          * The block inserter will show this name.
  41          */
  42         title: __( 'Gravatar', 'dnxvatar' ),
  43
  44         /**
  45          * This is a short description for your block, can be translated with `i18n` functions.
  46          * It will be shown in the Block Tab in the Settings Sidebar.
  47          */
  48         description: __( 'Insert a gravatar inside a post or page.', 'dnxvatar' ),
  49
  50         attributes: {
  51                 email: {
  52                         type: 'string',
  53                         source: 'text',
  54                         selector: 'div',
  55                 },
  56                 size: {
  57                         type: 'string',
  58                         source: 'text',
  59                         selector: 'div',
  60                 },
  61                 alt: {
  62                         type: 'string',
  63                         source: 'text',
  64                         selector: 'div',
  65                 },
  66                 caption: {
  67                         type: 'string',
  68                         source: 'text',
  69                         selector: 'div',
  70                 },
  71                 alignment: {
  72                         type: 'string',
  73                         default: 'none',
  74                 },
  75         },
  76         example: {
  77                 attributes: {
  78                         email: 'danix@example.com',
  79                         alt: 'my profile photo',
  80                         caption: 'this is me',
  81                         size: '200',
  82                         alignment: 'right',
  83                 },
  84         },
  85
  86         /**
  87          * Blocks are grouped into categories to help users browse and discover them.
  88          * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
  89          */
  90         category: 'common',
  91
  92         /**
  93          * An icon property should be specified to make it easier to identify a block.
  94          * These can be any of WordPress’ Dashicons, or a custom svg element.
  95          */
  96         icon: 'businessman',
  97
  98         /**
  99          * Optional block extended support features.
 100          */
 101         supports: {
 102                 // Removes support for an HTML mode.
 103                 html: false,
 104                 align: [ 'left', 'right', 'center' ],
 105         },
 106
 107         /**
 108          * @see ./edit.js
 109          */
 110         edit: Edit,
 111
 112         /**
 113          * @see ./save.js
 114          */
 115         save,
 116 } );