Create a magnetic-poetry block

[bobbingwide]

Similar to Verse but formatted to look like magnetic poetry fridge magnets.

Block name: oik-block/magnetic-poetry
Title: Magnetic Poetry
category: formatting -
icon: editor

Steps to develop

1. Prototype some code in bw
2. Create a hard-coded version, satisfied by the server.
3. Add client code based on oik-block/CSV
4. Update PHP to perform server side rendering
5. Find out why it doesn't work when Gutenberg is active!
6. Implement the proper server side rendering code.

Early screenshot

This screenshot was taker after step 4. WordPress 5.0.3, Gutenberg not activated.
I'd already resolved a number of minor issues.

1. Incorrect category: wigets
2. Invalid icon name ( verse ) led to blank icon
3. Incorrect block name for ServerSideRender - extra oik- before magnetic-poetry

Issues visible in the screenshot:

1. white background needed by default - not being applied for 0 degree rotation
2. Rendered contents bigger than the block.

[bobbingwide]

[bobbingwide]

I wish I’d written down where I found the CSS that could resolve the overflow issues.

[bobbingwide]

I wish I’d written down where I found the CSS that could resolve the overflow issues.

I did. See #3.
Note: I managed to achieve something close to what I wanted by styling the individual words as display: inline-box and adjusting the margins.
Need to try display: flex as well.

[bobbingwide]

New requirements

• I now want to rename the block. From oik-block/magnetic-poetry to oik-mp/magnetic-poetry; so that it’s not listed under the oik-block prefix.
• To be able to transform core/verse to oik-mp/magnetic-poetry and vice-versa.

The transform is easy.
For the rename, I’m considering adding a filter to rename the block on the fly.
Producing a server side deprecated style message in the editor.
This’ll be more friendly than ‘Your site doesn’t support this block’.

[bobbingwide]

I now want to rename the block. From oik-block/magnetic-poetry to oik-mp/magnetic-poetry; so that it’s not listed under the oik-block prefix.

I couldn't work out how to intercept the editor. I decided to use wp search-replace.

Note: With blocks that are delivered by oik-blocks then it's possible to add a transform for each block that is now being delivered in another plugin. e.g. oik-css/css can be transformed in oik-css from oik-block/css . It's not possible when the block is renamed within its own plugin.

[bobbingwide]

Next I want to make use of the logic in the oik-blocks shared library.

• use oik\oik_blocks\oik_blocks_register_editor_scripts to register the editor_script JavaScript
• use oik\oik_blocks\oik_blocks_register_block_styles to register the CSS, used for both editor_style and style
• move the CSS from css/oik-magnetic-poetry.css to the block's style.scss file.
• confirm that it's not necessary to respond to enqueue_block_assets and/or enqueue_block_editor_assets since this is now handled by our use of register_block_type.

[bobbingwide]

Closing this as I've now built v0.2.0