search

bobbingwide / sb-children-block

List children of the current content as links.
2 stars 0 forks source link

Improve ability to style the block in the editor and front end #9

Closed bobbingwide closed 11 months ago

bobbingwide commented 4 years ago

The className attribute is currently not used in the server side rendering code so any CSS defined for the editor and front end is not being used.

Requirement

Note: Extract from the documentation for block registration

className (default true): By default, the class .wp-block-your-block-name is added to the root element of your saved markup. This helps having a consistent mechanism for styling blocks that themes and plugins can rely on. If for whatever reason a class is not desired on the markup, this functionality can be disabled.

customClassName (default true): This property adds a field to define a custom className for the block’s wrapper.

bobbingwide commented 4 years ago

It would appear that the default class for the block is not passed to server side rendering (SSR) code when the Additional CSS classes field is completed. What should the SSR code do? How does this compare with a statically rendered block?

bobbingwide commented 1 year ago

Commit https://github.com/bobbingwide/sb-children-block/commit/d0c3780b5453705eff019f13b7b07a1523fbc168 doesn't test the front end display but does work in the block editor when the block is server side rendered. image

bobbingwide commented 1 year ago

Although block.json now supports colors I don't appear to be able to set the link color. Setting the text color only affects the color of the bullets. There's no field to set the link color.

Differences

image

image

I looked at some previous blocks and found that they did include the link attribute. From https://s.b/cwiccer/wp-admin/post.php?post=3659&action=edit

<!-- wp:oik-sb/children {"depth":"-1","style":{"elements":{"link":{"color":{"text":"var:preset|color|secondary"}}},"typography":{"lineHeight":"2","fontSize":"60px"},"spacing":{"padding":{"top":"34px","right":"34px","bottom":"34px","left":"34px"},"margin":{"top":"16px","right":"16px","bottom":"16px","left":"16px"},"blockGap":"5px"}},"backgroundColor":"tertiary","textColor":"cyan-bluish-gray","className":" "} /-->

I also looked at other blocks which support the link colour.

This is the Post Edit block using Gutenberg 14.6.1 in sneak-peek.me

image

Note: I've had this problem before. See https://github.com/bobbingwide/sb-post-edit-block/issues/4

bobbingwide commented 1 year ago

Looks like I'll need to tabulate the results with different versions of Gutenberg for different themes.

bobbingwide commented 1 year ago
Env Gutenberg version Theme Colour fields available?
s.b/wp55 14.5.0 ThisIs Text, Background, Link
s.b/wp55 14.6.0 ThisIs Text, Background, Link
s.b/wp55 & sneak-peek.me 14.6.1 ThisIs Text, Background, Link
s.b/wp55 14.7 ThisIs Text, Background, Link
s.b/wp55 14.8.4 ThisIs Text, Background, Link
s.b/wp55 14.9.1 ThisIs Text, Background, Link
s.b/wp55 15.0.0 ThisIs Text, Background, Link
s.b/wp55 15.0.1 ThisIs Text, Background, Link
s.b/wp55 15.1.0 ThisIs Text, Background, Link
s.b/wp55 15.1.1 ThisIs Text, Background, Link
s.b/wp55 15.2.0 ThisIs Text, Background, Link
bobbingwide commented 1 year ago

image

bobbingwide commented 1 year ago

There's no field to set the link color.

As noted in https://github.com/bobbingwide/sb-post-edit-block/issues/4 the secret to getting the Link color to appear is to ensure that the theme.json file supports the option settings.color.link: true

bobbingwide commented 11 months ago

Latest version with Twenty Twenty-Four is OK

image

v1.2.3 now available. Closing therefore.