Create a starting block for development of Server Side Rendered blocks

bobbingwide commented 3 years ago

npx @wordpress/create-block is OK but...

I need to be able to start most blocks as Server Side Rendered
For some reason the build fails initially
The logic doesn't automatically add my internationalization logic to package.json
More often than not I need to add a block to an existing plugin

The current method requires

a bit of fiddling to build the new plugin
and then to copy the code into the existing block.

Would it be easier to start with a starting block that already has Server Side Rendering built in and copy/cobble that? If so, what are the steps? This issue is to attempt to find out.

Requirements

A Server Side Rendered starting block
That can be copied into an existing plugin
Easily renamed ( eg change starting to my-block-name
Then built and tested prior to modification for the real requirement
I want the source of the block to be in a subfolder - since I may need to add more blocks

Proposed solution

[x] Copy the relevant source code from sb-post-edit-block - a simple SSR rendered block built most recently
[x] Rename to oik-sb/sb-starting-block. Note: the oik-sb block prefix is intentional
[x] Rename functions to have the prefix oik_sb_sb_starting
[x] Determine the steps to enable the build to work
[x] Test the results for both npm run dev and npm run build
[ ] Test the copying of the source code into another plugin to create a new block
[ ] Update the readme to document how this is done

Block functionality

[x] In the editor the block should be SSRed with "Starting block."
[x] On the front end the block should be SSRed with "Starting block."
[x] The block should have the standard wrapper created using get_block_wrapper_attributes()

NFRs

[x] It should support apiVersion: 2
[x] The block should have the standard HTML and CSS to allow styling - see get_block_wrapper_attributes() above

bobbingwide commented 3 years ago

When I'd created the first version and before I tried to build the block I activated the plugin and visited the front end. The following message was displayed

Notice: register_block_script_handle was called incorrectly. The asset file for the "editorScript" defined in the "oik-sb/sb-starting-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

I haven't checked "Debugging in WordPress" to see if there's a good explanation for _register_block_scripthandle was called incorrectly, but the behaviour is much better than an earlier version, which just died with a Fatal message.

bobbingwide commented 3 years ago

Testing some of the commands you might try. npm run dev, run before node has been setup produces

C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block>npm run dev

> sb-starting-block@0.0.0 dev C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block
> wp-scripts start

'wp-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sb-starting-block@0.0.0 dev: `wp-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sb-starting-block@0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

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

bobbingwide commented 3 years ago

npm run install produces

C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block>npm install
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142

> core-js@3.12.1 postinstall C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js-pure@3.12.1 postinstall C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

> core-js@2.6.12 postinstall C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block\node_modules\wait-on\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @wordpress/components@13.0.3 requires a peer of @wp-g2/create-styles@^0.0.154 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/native@10.0.27 requires a peer of react-native@>=0.14.0 <1 but none is installed. You must install peer dependencies yourself.
npm WARN react-native-url-polyfill@1.3.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-prettier@3.4.0 requires a peer of prettier@>=1.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN sb-starting-block@0.0.0 No repository field.
npm WARN sb-starting-block@0.0.0 license should be a valid SPDX license expression

added 2042 packages from 828 contributors and audited 2046 packages in 105.044s

196 packages are looking for funding
  run `npm fund` for details

found 9 vulnerabilities (8 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

bobbingwide commented 3 years ago

npm run dev now works

C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block>npm run dev

> sb-starting-block@0.0.0 dev C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block
> wp-scripts start

webpack is watching the files…

Live Reload listening on port 35729

Hash: 3954efa5e8d5b7bf4980
Version: webpack 4.46.0
Time: 6431ms
Built at: 05/12/2021 08:36:41
              Asset       Size       Chunks                   Chunk Names
    index.asset.php  178 bytes        index  [emitted]        index
          index.css  176 bytes        index  [emitted]        index
      index.css.map  356 bytes        index  [emitted] [dev]  index
           index.js   14.8 KiB        index  [emitted]        index
       index.js.map   10.9 KiB        index  [emitted] [dev]  index
    style-index.css  211 bytes  style-index  [emitted]        style-index
style-index.css.map  392 bytes  style-index  [emitted] [dev]  style-index
Entrypoint index = style-index.css style-index.js style-index.css.map style-index.js.map index.css index.js index.css.map index.js.map index.asset.php
[./src/index.js] 26 bytes {index} [built]
[./src/starting-block/edit.js] 1.4 KiB {index} [built]
[./src/starting-block/editor.scss] 50 bytes {index} [built]
[./src/starting-block/index.js] 974 bytes {index} [built]
[./src/starting-block/save.js] 386 bytes {index} [built]
[./src/starting-block/style.scss] 50 bytes {style-index} [built]
[@wordpress/block-editor] external ["wp","blockEditor"] 42 bytes {index} [built]
[@wordpress/blocks] external ["wp","blocks"] 42 bytes {index} [built]
[@wordpress/editor] external ["wp","editor"] 42 bytes {index} [built]
[@wordpress/element] external ["wp","element"] 42 bytes {index} [built]
[@wordpress/i18n] external ["wp","i18n"] 42 bytes {index} [built]
    + 2 hidden modules

In Windows press Ctrl+C to break.

bobbingwide commented 3 years ago

npm run build also works

C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block>npm run build

> sb-starting-block@0.0.0 build C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block
> wp-scripts build

Hash: 6fb029781ae3aea964c1
Version: webpack 4.46.0
Time: 2753ms
Built at: 05/12/2021 08:38:10
          Asset       Size  Chunks             Chunk Names
index.asset.php  178 bytes       0  [emitted]  index
      index.css    1 bytes       0  [emitted]  index
       index.js   2.16 KiB       0  [emitted]  index
style-index.css    1 bytes       1  [emitted]  style-index
Entrypoint index = style-index.css style-index.js index.css index.js index.asset.php
[0] external ["wp","blocks"] 42 bytes {0} [built]
[1] external ["wp","element"] 42 bytes {0} [built]
[2] external ["wp","editor"] 42 bytes {0} [built]
[3] ./src/starting-block/style.scss 50 bytes {1} [built]
[4] external ["wp","i18n"] 42 bytes {0} [built]
[5] external ["wp","blockEditor"] 42 bytes {0} [built]
[6] ./src/index.js + 4 modules 2.83 KiB {0} [built]
    | ./src/index.js 26 bytes [built]
    | ./src/starting-block/index.js 974 bytes [built]
    | ./src/starting-block/edit.js 1.4 KiB [built]
    | ./src/starting-block/save.js 386 bytes [built]
    | ./src/starting-block/editor.scss 50 bytes [built]
    + 2 hidden modules

bobbingwide commented 3 years ago

Notice: register_block_script_handle was called incorrectly.

After building the block with npm run dev or npm run build when visiting the site we no longer see the message.

Steps to test the block.

Open the block editor
Insert a new block
Choose Starting block
The block should be server side rendered and produce "Starting block."
Save
View post

bobbingwide commented 3 years ago

There are a couple of problems with this most basic first version of the Starting block:

The block is not easily selectable in the Block editor.
The SSR rendering doesn't support colour and typography capabilities out of the box.
It would be better if it had a number of controls.
You have to apply a range of edits to change variations of Starting block to the required block name, functions, etc
The block doesn't yet support the Widget block editor.

1. The block is not easily selectable in the Block editor.

I believe this is due to it not having any toolbar icons. This can be resolved by adding the textAlign control.

2. SSR rendering doesn't support colour and typography capabilities out of the box

Add logic as implemented in UK-tides, oik-magnetic-poetry and oik-css.

3. It would be better if it had a number of controls.

Add a toggle to display WordPress and Gutenberg version information
Add a text field: To allow the 'Starting block' text to be overridden

4. Range of edits

The different edits could at least be documented. Of course, if the @wordpress/create-block was better then this wouldn't be necessary.

5. Support Widget block editor

ServerSideRender is imported incorrectly. This adds a dependency on wp-editor which the Widget block editor moans about.

Fix as documented in https://github.com/bobbingwide/bobbingwide/issues/30#issuecomment-883282378

bobbingwide commented 3 years ago

A non-problem of this block is that it doesn't produce the same message that I'm getting in oik-css, where, no matter which block or blocks I attempt to register, I get a console error eg Block "oik-css/css" is already registered. It would be nice if I could reproduce this problem while improving this block.

bobbingwide commented 3 years ago

I believe this is due to it not having any toolbar icons. This can be resolved by adding the textAlign control.

I started adding the textAlign control, which required me to use the <div { ...blockProps}> wrapper to the <ServerSideRender>. Even without the controls, the problem with not being able to select the block disappeared.

I also discovered that I'd been registering the blocks incorrectly. I noticed that the link to the documentation in the sb-starting-block/index.js file, which was to https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block required me to click on the link to https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ and then I followed the link for the Metadata documentation... https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/

Reading this documentation I discovered that I'd been registering the block incorrectly in the JavaScript. It said

When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name.

I changed the code in sb-starting-block and it worked fine. However, applying the same change in oik-css for the oik-css/css block didn't fix the console error.

Re:

SSR rendering doesn't support colour and typography capabilities out of the box

I also discovered that I didn't need to define all the attributes that I'd had to define in other blocks. This was Server Side Rendered without any problems

<!-- wp:oik-sb/sb-starting-block {"align":"center","backgroundColor":"foreground","textColor":"background","fontSize":"medium"} /-->

bobbingwide commented 11 months ago

Test the copying of the source code into another plugin to create a new block

Not sure if I've done this

Update the readme to document how this is done

Therefore this not done either

bobbingwide / sb-starting-block