Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a block icon & block info block to display a block's icon & information #24

Open
bobbingwide opened this Issue Jan 13, 2019 · 9 comments

Comments

Projects
None yet
1 participant
@bobbingwide
Copy link
Owner

bobbingwide commented Jan 13, 2019

WordPress / Gutenberg delivers many icons which are used to help selection of the blocks in your content. The SVG for these icons is often hand crafted. Sometimes it's a dash icon, but not often.
In the block documentation in WP-a2z we need to display the actual BlockIcon for the selected block.
For most blocks we can find this using the block name. e.g. core/audio.

Initially this block will be delivered as a static block.

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 6, 2019

Additional requirements.

  • Optionally display the following information for the block:
Field Example
registered block type name oik-block/blockicon
title: Block icon
description: Displays a Block icon
category: widgets
keywords: icon, oik, block
@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 6, 2019

So now I've updated oik-blockicon to optionally display the registered block type name, title and description.

But it breaks the existing oik-blockicon blocks.

I now want to:

  • clone the blockicon block to blockinfo,
  • revert the blockicon logic to how it was before I started fiddling
  • alter blockinfo to use the original blockicon code to display the BlockIcon part
  • and use blockinfo code to display the other fields for the Block
  • implement the capability to transform between blockicon and blockinfo

Then I won't break existing blockicon blocks.

This is where I currently am with the blockicon & blockinfo blocks

image

@bobbingwide bobbingwide changed the title Create a block icon block to display a block's icon Create a block icon & block info block to display a block's icon & information Feb 6, 2019

bobbingwide added a commit that referenced this issue Feb 8, 2019

Issue #24 - change oik-blockinfo to use both blockinfo.js and blockic…
…ons.js, reverting oik-blockicon to just displaying the icon

bobbingwide added a commit that referenced this issue Feb 8, 2019

bobbingwide added a commit that referenced this issue Feb 8, 2019

Issue #24 - enable Additional CSS class svg64 for block info icons an…
…d transform between block icon and block info
@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 11, 2019

I think I now have a need for a Block icon/info link. This will be a link to the documentation of the Block. The link URL will be constructed using the blockname or automatically found based on the selected block name.

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 11, 2019

Another requirement is a block showing all the blocks for a plugin in a similar layout to the Add Block dropdown. See the dash icon block. This would be used on the plugin’s home page.

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 13, 2019

Let's take the previous two comments and produce a Block list. I'll raise a separate issue for this as eventually the Block list block might be moved to the oik-shortcodes plugin.

@bobbingwide bobbingwide referenced this issue Feb 13, 2019

Open

Create a Block list block #27

0 of 3 tasks complete
@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 24, 2019

Time to add the Category and Keywords fields to the Block info block. Default false. This will help with manual setting of the block_category and block_keyword taxonomies.

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Feb 27, 2019

When I added. The Category and Keywords fields ( toggles ) I set the both to default: false in the hope that this would not break existing blocks. That failed, so I let the defaults be true. It still failed. Blocks which were valid with the previous version of the code are now no longer valid.
One of the annoying things is that it’s the viewBox parameter of the svg tag that appears to be in error. According to WordPress/gutenberg#9898 this bug has been fixed. Not for me. Maybe I’m suffering from a different issue....
WordPress/gutenberg#12932

Perhaps adding some migration logic and/or disabling validation is necessary.

61a6e6fc-815d-4665-94db-7548c9acf870

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Mar 6, 2019

When the block info is displaying an icon for a block which is no longer registered the editor displays a WSOD with the following in the console.

Uncaught TypeError: Cannot read property 'title' of undefined
    at BlockinfoStyled (webpack-internal:///326:33)
    at save (webpack-internal:///323:240)
    at tt (index.js:2)
    at rt (index.js:2)
    at index.js:50
    at index.js:1
    at Ft (index.js:2)
    at Zt (index.js:2)
    at index.js:2
    at Array.reduce (<anonymous>)

Workaround

  • activate the plugin
  • edit using the classic editor
@bobbingwide

This comment has been minimized.

Copy link
Owner Author

bobbingwide commented Mar 14, 2019

Add support for the block icons that exist but not as blocks.
e.g. the Classic block icon - which is a keyboard.
Bad example... Classic Block is core/freeform, which does exist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.