Redesign Blocks Library

[mauryaratan]

Please redesign the Blocks library as per the mockup.

The idea is to have a new button to launch blocks library inside the editor. This should be a new React app, not part of existing app.

Notice the 4th icon here.

To do

• [x] Create a new dir /client/blocks-library and everything should live under.
• [x] Add a new menu submenu to Style Kits (temporary), React app should exist on that page only, not on main library page.
• [x] Upgrade to Style Kits Pro text in bottom left is supposed to be a carousel of preset messages. Could be a simple CSS animation.

Instructions

• Let's use Gutenberg components as much as we can.
• Refer to SK UI in figma for popup design and more.

[mauryaratan]

https://github.com/analogwp/block-screenshots now makes use of full automation. The trigger has been added to https://github.com/mauryaratan/preview.analogwp.com

You can make use of this URL format: https://bs.analogwp.com/1000.jpg where 1000 is post ID for the block. Note that this only applies for blocks, not templates or style kits.

[gvgvgvijayan]

1. The star icon is showing black color instead of golden-yellow color
2. The number of argument in the function call is more than a function declaration: Called: https://github.com/analogwp/analogwp-templates/blob/feature/393_redesign_blocks_library/client/blocks-library/BlocksLibrary.js#L51 Declaration: https://github.com/analogwp/analogwp-templates/blob/feature/393_redesign_blocks_library/client/blocks-library/BlocksLibrary.js#L62
3. Replace “popularityIndex” to “published”: Condition: https://github.com/analogwp/analogwp-templates/blob/feature/393_redesign_blocks_library/client/blocks-library/BlocksLibrary.js#L83

[JohnPixle]

The blocks library is very good so far 3 things I see:

1. The sidebar must be sticky (both in dashboard and the editor. You can scroll very long down in some cases.
2. Change text into Upgrade to Style Kits Pro and remove the fade animation.
3. The individual block boxes behaviour should be similar to the template kits boxes and how they respond to viewport width.

Hm, and number 4: there are no indicators of free / pro in the blocks, I will look into it

[JohnPixle]

Additionally to the above, there are two more things:

1. I think the sidebar categories look better with 14px font size.

2. I believe that we must have a consistent UI for marking the favourites. Instead of having the star here next to import, can we have the same hover effect where the star appears on the top left in a blue triangle? No need for the white overlay effect over the image, I think we need just the triangle.

let me know for any Questions.

[JohnPixle]

Ok guys, as per slack, this is what we need to do to the blocks library before releasing the update:

Instead of having the blocks library in a dedicated page / popup, let's consolidate it as a tab to the main library, as the screenshot below shows.

So there must not be an additional page in the SK settngs.

@gvgvgvijayan please also note that the boxes and hovers have changed. We are using now a unified look. Please make these changes and let's see those deployed

[lushkant]

@gvgvgvijayan I'll be taking care of these 🥇