Typography - option to change size (s, m, l, xl) in addition

As for native Gutenberg headings and paragraph, I am missing an option to choose a different size/ modify the size for the same size category in case of the respective Cwicly Blocks (Heading, Paragraph), e.g. paragraph as large, or H2 to small, in addition to the global style settings. E.g. the following use case:

  • Paragraph set to fluid (to be fully responsive) globally

  • in addition, small, medium, large,…

  • either modifies the global setting also on a global basis, e.g. small is 0.8 of the global setting
  • or overrules the global settings by its own setting (in this case e.g. also set to fluid, but different for small, medium,… of course

This gives the advantage to stick to the same html tag (e.g. H3), while adjusting them in some cases, and these adjustments could be changed globally with on click

I would also like Cwicly to take into account the settings of theme.json, e.g. the above-mentioned settings for typography (sizes), but also for spacing. Because an interaction of the native Gutenberg editor with its settings I find very important for the future, especially if you want to mix blocks.

Since version 2 of the theme.json you can decide yourself which sizes and distances (padding + margin) you generally want to define for quick selection. So here also the use of clamp() is possible, so that you don’t have to care about the values between single breakpoints anymore. In addition, there are fixed selectable settings (with a speakable name or T-shirt sizes), so that users / editors here also get a kind of guideline.

I know, Cwicly offers a completely own panel and therefore the integration of the Gutenberg settings (if the option “appearanceTools” is true) could lead to confusion. But basically I would find this option great to be able to choose from presets without having to create classes.

Interesting, so you don’t mind your elements on the DOM being filled with style tags and so on?

And this is just padding…

2 Likes

Not keen on this type of html markup.

1 Like

Same here.

That is why I’m surprised by this comment:

They’re not classes, but literal style properties.

True. The styling value gets longer when there is more styling for it. Hmm…

No, I don’t like implementing it that way either. I was concerned with the basic functionality of having choices from defined values that are named in such a way that even laymen can understand them (hence the example with the T-shirt sizes).

Currently you have to store e.g. global classes from which the editor has to choose. For laymen (editors, not programmers) it is not so easy to select the right classes for the block.
That’s why I like the basic idea in Gutenberg that you can quickly select a value from predefined, understandably named sets.

1 Like

In terms of typography, this is already available with global block typography, I guess.

Styles are attached to a class and you just can select your desired custom-named preset from a dropdown list.


Maybe that’s also what @FZwo is looking for?

1 Like

I am not an expert, but if that only is extended when used (set a specific value in addition), then that is probably ok

no, it is just this as an example:

  • cwicly paragraph is customized on global level e.g. as fluid
  • on a specific page I want to have a paragraph sized bigger, that’s where I can choose to set it to e.g. “large”
  • what large means, should also be customizable on a global level (as pointed out in different option above earlier)

Wouldn’t it be easier if you preset it with a global class? Whenever you want any heading/text to be bigger, apply a class for the text. :thinking:

It may be a way, but not easier, as it is a somewhat “hidden” solution, far from intuitive, neither in changing the global settings for that classes (probably a lot of them), nor in tagging a block on a site by that class (to be selected then)

Because you can only preset 1 style for a paragraph from the global setting, that’s what Global-Class is here for(another preset method but more flexible). And global-class works for the entire site.

Jornes, could be that that is not possible from an architectural point of view. What I did in the past (block based theme, but not FSE), I defined different fluidly scaled settings for small, medium, large etc. per paragraph, h1, h2 etc. within the style.css, which then gets applied by the native Gutenberg tagging "small, medium,…) if tagged, something I would like to avoid here

Not sure about your exact requirements and I also need to add that I’m not fully aware of how Gutenberg blocks work, but:

I can achieve your scenario with global typography (general default styling) and global block typography for individual paragraph styling, which are controlled also globally.

I might misunderstand you, just wanted to make sure you aware of the two different and independent possibilities of global typography and global block typography.

Your thoughts are going into the intended direction, but it is not a different typo setting per block (which, in difference to Cwicly, Gutenberg offers anyway), it is a second, independent possibility to scale the typo of a block when added to a post somewhere, and manage that scaling globally (e.g. what does it mean to set a paragraph typo to a value “large”, and hence deviate from the global typo settings for paragraph)

This sounds like you need more preset options for paragraph blocks. It allows you to preset the typography for the paragraph and heading, and then choose from the dropdown every time you want to use it.

This also sounds similar to global classes, but you want it to be able to select the paragraph size you want from the dropdown instead.

Yes, and I think that is important. Text (paragraph and H1 to Hn) is often to be differently sized at different pages (e.g. on main or front pages bigger, but on imprint and other pages smaller, or even on the same page set differently for different paragraph blocks on that page), it is the most used content, and it is likely to be changed during the design process (thus presetting is necessary for e.g. small, large, etc., which I had done thru style.css in non FSE Themes to accomplish that). Said this, this should be intuitive and efficient