WordPress.org
Get WordPress

Make WordPress Core

Ticket #61437: Button blocks font weight and text decoration.txt

File Button blocks font weight and text decoration.txt, 4.0 KB (added by sabernhardt, 2 years ago)

sample blocks for default styles plus custom font weight and text decoration settings

Line 
1<!-- wp:separator {"className":"is-style-wide"} -->
2<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
3<!-- /wp:separator -->
4
5<!-- wp:paragraph -->
6<p>Default typography choices from the theme</p>
7<!-- /wp:paragraph -->
8
9<!-- wp:buttons -->
10<div class="wp-block-buttons"><!-- wp:button -->
11<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
12<!-- /wp:button -->
13
14<!-- wp:button {"className":"is-style-outline"} -->
15<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
16<!-- /wp:button --></div>
17<!-- /wp:buttons -->
18
19<!-- wp:separator {"className":"is-style-wide"} -->
20<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
21<!-- /wp:separator -->
22
23<!-- wp:paragraph -->
24<p>Appearance: Light (for each Button block)</p>
25<!-- /wp:paragraph -->
26
27<!-- wp:buttons -->
28<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
29<div class="wp-block-button" style="font-style:normal;font-weight:300"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
30<!-- /wp:button -->
31
32<!-- wp:button {"className":"is-style-outline","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
33<div class="wp-block-button is-style-outline" style="font-style:normal;font-weight:300"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
34<!-- /wp:button --></div>
35<!-- /wp:buttons -->
36
37<!-- wp:separator {"className":"is-style-wide"} -->
38<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
39<!-- /wp:separator -->
40
41<!-- wp:paragraph -->
42<p>Appearance: Light (set on the Buttons block)</p>
43<!-- /wp:paragraph -->
44
45<!-- wp:buttons {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
46<div class="wp-block-buttons" style="font-style:normal;font-weight:300"><!-- wp:button -->
47<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
48<!-- /wp:button -->
49
50<!-- wp:button {"className":"is-style-outline"} -->
51<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
52<!-- /wp:button --></div>
53<!-- /wp:buttons -->
54
55<!-- wp:separator {"className":"is-style-wide"} -->
56<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
57<!-- /wp:separator -->
58
59<!-- wp:paragraph -->
60<p>Text Decoration: line-through (for each Button block)</p>
61<!-- /wp:paragraph -->
62
63<!-- wp:buttons -->
64<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"textDecoration":"line-through"}}} -->
65<div class="wp-block-button" style="text-decoration:line-through"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
66<!-- /wp:button -->
67
68<!-- wp:button {"className":"is-style-outline","style":{"typography":{"textDecoration":"line-through"}}} -->
69<div class="wp-block-button is-style-outline" style="text-decoration:line-through"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
70<!-- /wp:button --></div>
71<!-- /wp:buttons -->
72
73<!-- wp:separator {"className":"is-style-wide"} -->
74<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
75<!-- /wp:separator -->
76
77<!-- wp:paragraph -->
78<p>Text Decoration: line-through (set on the Buttons block)</p>
79<!-- /wp:paragraph -->
80
81<!-- wp:buttons {"style":{"typography":{"textDecoration":"line-through"}}} -->
82<div class="wp-block-buttons" style="text-decoration:line-through"><!-- wp:button -->
83<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
84<!-- /wp:button -->
85
86<!-- wp:button {"className":"is-style-outline"} -->
87<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
88<!-- /wp:button --></div>
89<!-- /wp:buttons -->
90
91<!-- wp:separator {"className":"is-style-wide"} -->
92<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
93<!-- /wp:separator -->