Create the post-edit block to replace the [post-edit] shortcode

[bobbingwide]

Create the plugin using npx @wordpress/create-block

Let's customize your block:
? The block slug used for identification (also the plugin and output folder name): sb-post-edit-block
? The internal namespace for the block name (something unique for your products): oik-sb
? The display title for your block: Post Edit block
? The short description for your block (optional): Post edit block to allow direct editing of the post
? The dashicon to make it easier to identify your block (optional): edit-page
? The category name to help users browse and discover your block: widgets
? The name of the plugin author (optional). Multiple authors may be listed using commas: bobbingwide
? The short name of the plugin’s license (optional): GPLv3
? A link to the full text of the license (optional): https://www.gnu.org/licenses/gpl-2.0.html
? The current version number of the plugin: 0.0.0

Creating a new WordPress block in "sb-post-edit-block" folder.

[bobbingwide]

Initial build failed.

Creating a new WordPress block in "sb-post-edit-block" folder.

Creating a "block.json" file.

Creating a "package.json" file.

Installing npm dependencies. It might take a couple of minutes...

Installing `@wordpress/scripts` package. It might take a couple of minutes...

Formatting JavaScript files.

Compiling block.
(node:53856) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 2: npm run build
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `wp-scripts build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\herb\AppData\Roaming\npm-cache\_logs\2021-05-06T11_51_19_035Z-debug.log

> [email protected] build C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block
> wp-scripts build

Hash: b4d5e115f4ada1711d19
Version: webpack 4.46.0
Time: 5250ms
Built at: 05/06/2021 12:51:18
 2 assets
Entrypoint index = style-index.js index.js
[0] external ["wp","element"] 42 bytes {0} [built]
[1] external ["wp","i18n"] 42 bytes {0} [built]
[2] external ["wp","blockEditor"] 42 bytes {0} [built]
[3] external ["wp","blocks"] 42 bytes {0} [built]
[4] ./src/style.scss 1.55 KiB {1} [built] [failed] [1 error]
[5] ./src/editor.scss 1.55 KiB {0} [built] [failed] [1 error]
[6] ./src/index.js + 2 modules 3.17 KiB {0} [built]
    | ./src/index.js 975 bytes [built]
    | ./src/edit.js 1.2 KiB [built]
    | ./src/save.js 1010 bytes [built]

ERROR in ./src/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss\lib\processor.js:145:15)
    at new Processor (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss\lib\processor.js:51:25)
    at postcss (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss\lib\postcss.js:73:10)
    at Object.loader (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss-loader\dist\index.js:95:20)
    at C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.loader (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss-loader\dist\index.js:104:7)
 @ ./src/index.js 15:0-22

ERROR in ./src/editor.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss\lib\processor.js:145:15)
    at new Processor (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss\lib\processor.js:51:25)
    at postcss (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss\lib\postcss.js:73:10)
    at Object.loader (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss-loader\dist\index.js:95:20)
    at C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.loader (C:\apache\htdocs\wordpress\wp-content\plugins\sb-post-edit-block\node_modules\postcss-loader\dist\index.js:104:7)
 @ ./src/edit.js 24:0-23
 @ ./src/index.js
    at makeError (C:\Users\herb\AppData\Roaming\npm-cache\_npx\53856\node_modules\@wordpress\create-block\node_modules\execa\lib\error.js:59:11)
    at handlePromise (C:\Users\herb\AppData\Roaming\npm-cache\_npx\53856\node_modules\@wordpress\create-block\node_modules\execa\index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async module.exports (C:\Users\herb\AppData\Roaming\npm-cache\_npx\53856\node_modules\@wordpress\create-block\lib\init-wp-scripts.js:31:2)
    at async module.exports (C:\Users\herb\AppData\Roaming\npm-cache\_npx\53856\node_modules\@wordpress\create-block\lib\scaffold.js:100:3)
    at async Command.<anonymous> (C:\Users\herb\AppData\Roaming\npm-cache\_npx\53856\node_modules\@wordpress\create-block\lib\index.js:100:6)
(node:53856) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:53856) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[bobbingwide]

Because the build failed this leads to

Notice: register_block_script_handle was called incorrectly. The asset file for the "editorScript" defined in the "oik-sb/sb-post-edit-block" block definition is missing. Please see Debugging in WordPress for more information. (This message was added in version 5.5.0.) in C:\apache\htdocs\wordpress\wp-includes\functions.php on line 5313

when the plugin is activated.

[bobbingwide]

According to https://stackoverflow.com/questions/40090111/postcss-error-object-object-is-not-a-postcss-plugin
running npm i -d postcss resolved the issue.

This worked for me.
npm start now runs without errors and the Notice: is not shown in the browser.

[bobbingwide]

Now that v0.1.0 is available, I have to implement the block in the following themes: Fizzie, SB, ThisIs ( already done?) and Wizzie.

• Replace [post-edit] by the default block <!-- wp:oik-sb/sb-post-edit-block /-->
• Change the className on the metadates template part to allow the section to be styled using CSS flex
• Remove the logic to expand the shortcode.