tdesero

<p>Use the function <code>add_fast_block</code> to add a block to your theme in PHP. The Plugin automatically creates an interface for your block inside the editor.<br />
Unlike the default block behaviour all blocks are rendered dynamically. This means changes inside the template are shown immediately without resaving the post or page.</p>
<h3>Example Usage</h3>
<p>Register your block:</p>
<pre><code>$options = [
  'name'      => 'some-slug/block-name',
  // template from theme-directory
  'template'  => '/blocks/test.php',
  'settings'  => [
    // same settings as the original "wp.registerBlockType" without attributes.
    'title'   => 'Plugin Block',
  ],
  'fields'    => [
    // define attributes and inputs/labels etc. that are needed.
    'headline'  => [
      'label'    => 'My Label',
      'type'     => 'string',
      'input'      => 'text',
      'default'  => 'default string',
      'width' => 0.5, // optional for all fields except repeater
      // optional selector: useful fallback if dynamic rendering does not work. Also good for WP SEO PLugins.
      'selector' => 'h2',
    ],
    'text'  => [
      'label'    => 'Some Text',
      'type'     => 'string',
      'input'      => 'richText',
      'default'  => 'default string',
    ],
    'image'   => [
      'label'   => 'Label for the Upload Button',
      'type'    => 'object',
      'input'   => 'image',
      'default' => [
        'url'   => 'image.jpeg',
        'alt'   => 'Alternative Text',
        'sizes' => []
      ]
    ],
    'bgColor' => [
      'label'   => 'Background',
      'type'    => 'string',
      'default' => 'light',
      'input'     => 'select',
      'options' => [
        ['label' => 'light', 'value' => 'light'],
        ['label' => 'dark', 'value' => 'dark'],
      ]
    ],
    'someBool' => [
      // ...
      'type'    => 'boolean',
      'input'   => 'checkbox',
    ],
    'someArray' => [
      // ...
      'type' => 'array',
      'default' => [],
      'input' => 'repeater',
      'query' => [
        'subField1' => [
          'type' => 'string',
          'input' => 'text',
          'default' => 'default list item',
        ],
        'subField2' => [
          'type' => 'boolean',
          'input' => 'checkbox',
          'default' => true,
        ],
      ]
    ]
  ]
];

add_fast_block( $options );
</code></pre>
<p>Available inputs: <code>text</code>, <code>richText</code>, <code>checkbox</code>, <code>toggle</code>, <code>select</code>, <code>image</code>, <code>url</code>, <code>email</code>, <code>date</code>.<br />
At the moment default values are mandatory.</p>
<p>Example usage inside template:</p>
<pre><code><div>
  <h2><?php $block->field('headline'); ?></h2>
  <img src="<?php echo $block->field_value('image')['url']; ?>">
</div>
</code></pre>
<p>For <code>$block->field</code> function sanitizing is done with <code>wp_kses_post</code>. If you need more complex sanitizing, use <code>$block->field_value</code>, sanitize on your own and <code>echo</code> the value afterwards.</p>


Fast Blocks

Create Custom Blocks fast and easy with PHP only.

Themeisle

Hardeep Asrani

mariamunteanu1

<p>Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.</p>
<p>The UI for Blocks Animation feels so native and intuitive, you won’t even notice it’s installed. Just install, and you will see animation settings in all the blocks, right in the Block Settings Sidebar.</p>
<p>All the code and sources for this plugin are publicly available as part of https://github.com/Codeinwp/otter-blocks.</p>


Blocks Animation: CSS Animations for Gutenberg Blocks


The perfect complement to bring life to the elements of my website.


My favorite animation tool

Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.

Fast Blocks vs Blocks Animation: CSS Animations for Gutenberg Blocks