A Gutenberg Workshop
This plugin adds a different Gutenberg blocks in the Gutenberg editor of your WordPress dashboard.
Download the zipped plugin. Unzip the plugin.
Navigate to the Plugins > Add new screen in your WordPress administrative dashboard.
Click Add New at the top of the page.
Click Upload Plugin at the top of the page.
Click Choose File, then find and Upload the downloaded renamed zip file.
After the plugin finishes installing, click Activate.
or,
Go to your plugin directory from terminal and Clone this repo in wp-content/plugins directory git clone https://github.com/imranhsayed/gutenberg-workshop
And then activate it from Plugins screen in your WordPress administrative dashboard.
That's it!
@wordpress/scripts
is installed in the root of the project. This is one single plugin that registers many blocks.@wordpress/package
uses src/index.js
as entry point and build/index.js
npm run build:dynamic-block
will use the dynamic-block/assets/js/block.js
as entry point and output it to dynamic-block/build/main.js
dynamic-block
register their own block. Only the bundling happens from the root. -assets
-css
-js
-block.js
-build
-main.js
-inc
-block-templates
-class-register-block.php
-helpers
-custom-functions.php
-index.php
build:dynamic-block
: will use the dynamic-block/assets/js/block.js
as entry point and output it to dynamic-block/build/main.js
for productionbuild:dynamic-block-watch
: will use the dynamic-block/assets/js/block.js
as entry point and output it to dynamic-block/build/main.js
in watch mode for developmentSimilarly Commands for creating bundle file ( JavasScript file ) for other blocks
build:dynamic-block-ssr
creates bundle file for dynamic-block-ssr block
build:dynamic-block-ssr-watch
creates bundle file for dynamic-block-ssr block in watch mode.
build:custom-category
creates bundle file for custom-category block
build:custom-category-watch
creates bundle file for custom-category block in watch mode.
custom-category Creates a custom catageory GW Custom Blocks
and registers a block under the same category.
dynamic-block Creates a dynamic block Latest Posts
, that renders content as saved from the edit function in editor.
The content that is returned by render_callback()
is displayed on the front end. Here the editor content and front content can be different if you return different
content from edit()
in block.js and render_callback()
in php file.
dynamic-block-ssr Creates a dynamic block and returns the same content both in editor and front end, what is returned
by render_callback()
, using <ServerSideRender>
. The data that you pass in attributes of<ServerSideRender attributes={{ name: 'Imran' }}>
will be available in render_callback( $attributes )
in php.
You must define its type in the register_block_type()