Typography

h1 – this is h1 tag

h2 – this is h2 tag

h3 – this is h3 tag

h4 – this is h4 tag

h5 – this is h5 tag
h6 – this is h6 tag

P – this is core/paragraph module: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Bold text test. normal text – lorem ipsum… Italic text test. normal text – line break.
linked text test. normal text. strike text test. normal text… break.

New P – inline image test then followed by normal text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

New P – inline image test: this image is a bit bigger. It will break the layout, but there we go… “broken by design” as it were. I see two alternatives. 1) somehow killing this feature (so editor can not add an “inline image”). 2) CSS to control (note editor can control only size: no alignment options etc).

Next: “highlight test”: – but there is also the Highlight feature. Here follows test: Hightlighted text (Primary) normal text. Hightlighted text (secondary)normal text. Hightlighted text (Black) normal text. Next follows white: Hightlighted text (white) << but editor can also set background: white: Hightlighted text (white, with black-bg) normal text. Hightlighted text (white, with primary-bg) normal text.

This is marked test normal text. (output expected <mark> ). Line break.
This is inline code test normal text. (output expected <code> ). Line break.
This is keyboard input test normal text. (output expected <kbd> ). Line break.

test (setting block background and color:… – “mark needs to be bulletproof” –
“highlight test”: – but there is also the Highlight feature. Here follows test: Hightlighted text (Primary) normal text. Hightlighted text (secondary) normal text. Hightlighted text (Black) normal text. Next follows white: Hightlighted text (white) << but editor can also set background: white: Hightlighted text (white, with black-bg) normal text. Hightlighted text (white, with primary-bg) normal text (<< looks like a button, but…! )

Note: also possible to add background and text-color… (limited to theme pallet).
Here eg. bg-light + text-primary

TODO: “Typography” can be set per block – needs to be defined (as per design) and then set in theme.json to match.

END of core/paragraph test… separator test – “core/separator” block – expected output <hr>





Next buttons test… CSS added to hide “buttons” that have no link.


Table test (no <th> option), but you can use bold etcsome text here
some text here, but style depends on paragraphsome text here
some text heresome text here
this is table “caption”

Media + Text

Has basic WYSIWYG options

Vertical separator test follows: set to “200px”

Normal text to see ^ … (Note we could use CSS to force spacer height etc)…

— END OF TESTS —