Default example button block in Radicle 2.0.1

radicle
,
1

Some questions:

  1. How would you make editor buttons styles align with frontend
  2. Styles in resources/views/blocks/button.theme.js, where these styles are applied. Cannot find anywhere.
  3. $sizes array (xs, sm, base, lg) in resources/views/components/button.blade.php. I should be able to select size in editor for button? Cannot find this place, can only see typography size dropdown.
2

Howdy! You found a bug that has been in Radicle since switching to Vite :sweat_smile: Fixed here: https://github.com/roots/radicle/pull/243

  1. It should be fairly close, you might need to set the background and text colors
  2. These are now correctly applied to the theme.json styles with the change I linked above, thank you for finding this bug!
  3. The typography sizes should be applying classes that already had the same appropriate styles from Tailwind via our Vite plugin, but I’ve refactored that here: https://github.com/roots/radicle/pull/244 —want to give this a shot?
3

Thanks!

  1. I quess you just need to set css manually. No good automatic solution to add relevant tailwind class to editor aswell and then you need tailwind also there. Im acutally using bootstrap5, so no good way somehow automatically.
  2. :+1:
  3. Yes works. Quess I would rather add new dropdown for buttons size on editor side. Would rather not have it under typography, as font size might be same for all sizes, only padding is different.

If not too much effort then maybe example how you would handle dynamic block? :slight_smile: For example latest cpt items with some attributes on editor to show/hide read more for example.

The way I dit it atm I still registered new block with js registerBlockType and added attributes there. Then in BlocksServiceProvider passed attributes to blocks/latest.blade.php and in blade added all stuff: ran some logic inside @php @endphp and html markup in the end.

4

#1 - It might be better to make a first party button block to have better control over the block markup instead of trying to modify the core button block

#3 - That makes sense, and we could add support for it by adding a higher-order component to override the core button’s UI for adding a dropdown with the size options. Similar to #1, I hadn’t considered this because I didn’t want to change core behavior, but I’ll think about this some more before the next release

Thanks for the dynamic block suggestion, that’s a great idea. Take a look at https://github.com/roots/radicle/pull/245

I’m going to also take another look at our blocks service provider and probably change some things up to introduce a app/Blocks/ directory

5

Nice, thanks. Good stuff!

1 Like
6

FYI, in the example button block id and rel are missing if you add in editor.

1 Like
7

Thank you, I’ll get that updated!

1 Like
8

Hi. A bit bad when registering dynamic block (latestSeedsBlock) only via JS is that then wordPress doesn’t know anything about the block on the server (no block type, no supports). Cannot use get_block_wrapper_attributes()for example. So Ideally should register it in server aswell? Why a block needs to be registered in both the server and the client? · WordPress/gutenberg · Discussion #55884 · GitHub

9

You’re right, I’ll get that updated

Thanks for the message

11

Done: https://github.com/roots/radicle/pull/271

1 Like