Make WordPress Core

Ticket #56075: markup-try-link-colors.html

File markup-try-link-colors.html, 19.4 KB (added by poena, 2 years ago)

Example blocks with link and text colors

Line 
1<!-- wp:heading -->
2<h2 class="wp-block-heading" id="no-custom-colors">No custom colors</h2>
3<!-- /wp:heading -->
4
5<!-- wp:heading -->
6<h2 class="wp-block-heading" id="heading-with-link">Heading with <a href="#">link</a></h2>
7<!-- /wp:heading -->
8
9<!-- wp:paragraph -->
10<p>Paragraph with <a href="#">link</a></p>
11<!-- /wp:paragraph -->
12
13<!-- wp:list -->
14<ul><!-- wp:list-item -->
15<li>List with <a href="#">link</a></li>
16<!-- /wp:list-item --></ul>
17<!-- /wp:list -->
18
19<!-- wp:quote -->
20<blockquote class="wp-block-quote"><!-- wp:paragraph -->
21<p>Quote with <a href="#">link</a> on the inner blocks</p>
22<!-- /wp:paragraph --><cite>Citation <a href="#">link</a></cite></blockquote>
23<!-- /wp:quote -->
24
25<!-- wp:paragraph -->
26<p>Below is the table of contents block:</p>
27<!-- /wp:paragraph -->
28
29<!-- wp:table-of-contents {"headings":[{"content":"No custom colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#no-custom-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"Custom text color but not link color","level":2,"link":"http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom link color, but not text color","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom text and custom link colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"}]} -->
30<nav class="wp-block-table-of-contents"><ol><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#no-custom-colors">No custom colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color">Custom text color but not link color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color">With custom link color, but not text color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors">With custom text and custom link colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li></ol></nav>
31<!-- /wp:table-of-contents -->
32
33<!-- wp:calendar /-->
34
35<!-- wp:paragraph -->
36<p>Below is the table of latest posts block:</p>
37<!-- /wp:paragraph -->
38
39<!-- wp:latest-posts /-->
40
41<!-- wp:paragraph -->
42<p>Below is the post author block with link enabled:</p>
43<!-- /wp:paragraph -->
44
45<!-- wp:post-author {"showBio":false,"byline":"this is a custom \u003ca href=\u0022#\u0022\u003ebyline with a link.\u003c/a\u003e","isLink":true} /-->
46
47<!-- wp:paragraph -->
48<p>Below is the post date block with link enabled</p>
49<!-- /wp:paragraph -->
50
51<!-- wp:post-date {"isLink":true} /-->
52
53<!-- wp:post-terms {"term":"category","prefix":"This is the categories block (post terms): "} /-->
54
55<!-- wp:pullquote -->
56<figure class="wp-block-pullquote"><blockquote><p>Pull quote with <a href="#">link</a></p><cite>Citation with <a href="#">link</a></cite></blockquote></figure>
57<!-- /wp:pullquote -->
58
59<!-- wp:spacer -->
60<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
61<!-- /wp:spacer -->
62
63<!-- wp:heading -->
64<h2 class="wp-block-heading" id="custom-text-color-but-not-link-color">Custom text color but <strong>not</strong> link color</h2>
65<!-- /wp:heading -->
66
67<!-- wp:heading {"style":{"color":{"text":"#fd5757"}}} -->
68<h2 class="wp-block-heading has-text-color" id="heading-with-link" style="color:#fd5757">Heading with <a href="#">link</a></h2>
69<!-- /wp:heading -->
70
71<!-- wp:paragraph {"style":{"color":{"text":"#e60d0d"}}} -->
72<p class="has-text-color" style="color:#e60d0d">Paragraph with <a href="#">link</a></p>
73<!-- /wp:paragraph -->
74
75<!-- wp:list {"style":{"color":{"text":"#ff0000"}}} -->
76<ul class="has-text-color" style="color:#ff0000"><!-- wp:list-item -->
77<li>List with <a href="#">link</a></li>
78<!-- /wp:list-item --></ul>
79<!-- /wp:list -->
80
81<!-- wp:paragraph -->
82<p>The text color is set on the outer quote block, not the inner blocks:</p>
83<!-- /wp:paragraph -->
84
85<!-- wp:quote {"style":{"color":{"text":"#f40031"}}} -->
86<blockquote class="wp-block-quote has-text-color" style="color:#f40031"><!-- wp:paragraph -->
87<p>Quote with <a href="#">link</a> on the inner blocks</p>
88<!-- /wp:paragraph --><cite>Citation <a href="#">link</a></cite></blockquote>
89<!-- /wp:quote -->
90
91<!-- wp:paragraph -->
92<p>Below is the table of contents block:</p>
93<!-- /wp:paragraph -->
94
95<!-- wp:table-of-contents {"headings":[{"content":"No custom colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#no-custom-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"Custom text color but not link color","level":2,"link":"http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom link color, but not text color","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom text and custom link colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"}],"style":{"color":{"text":"#f00000"}}} -->
96<nav class="wp-block-table-of-contents has-text-color" style="color:#f00000"><ol><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#no-custom-colors">No custom colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color">Custom text color but not link color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color">With custom link color, but not text color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors">With custom text and custom link colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li></ol></nav>
97<!-- /wp:table-of-contents -->
98
99<!-- wp:calendar {"style":{"color":{"text":"#f60000"}}} /-->
100
101<!-- wp:paragraph -->
102<p>Below is the table of latest posts block:</p>
103<!-- /wp:paragraph -->
104
105<!-- wp:latest-posts {"style":{"color":{"text":"#ee0a0a"}}} /-->
106
107<!-- wp:paragraph -->
108<p>Below is the post author block with link enabled:</p>
109<!-- /wp:paragraph -->
110
111<!-- wp:post-author {"showBio":false,"byline":"this is a custom \u003ca href=\u0022#\u0022\u003ebyline with a link.\u003c/a\u003e","isLink":true,"style":{"color":{"text":"#f60000"}}} /-->
112
113<!-- wp:paragraph -->
114<p>Below is the post date block with link enabled</p>
115<!-- /wp:paragraph -->
116
117<!-- wp:post-date {"isLink":true,"style":{"color":{"text":"#f70000"}}} /-->
118
119<!-- wp:post-terms {"term":"category","prefix":"This is the categories block (post terms): ","style":{"color":{"text":"#f30000"}}} /-->
120
121<!-- wp:pullquote {"style":{"color":{"text":"#fe0000"}}} -->
122<figure class="wp-block-pullquote has-text-color" style="color:#fe0000"><blockquote><p>Pull quote with <a href="#">link</a></p><cite>Citation with <a href="#">link</a></cite></blockquote></figure>
123<!-- /wp:pullquote -->
124
125<!-- wp:spacer -->
126<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
127<!-- /wp:spacer -->
128
129<!-- wp:heading -->
130<h2 class="wp-block-heading" id="with-custom-link-color-but-not-text-color">With custom link color, but <strong>not </strong>text color</h2>
131<!-- /wp:heading -->
132
133<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"#7c26ff"}}}}} -->
134<h2 class="wp-block-heading has-link-color" id="heading-with-link">Heading with <a href="#">link</a></h2>
135<!-- /wp:heading -->
136
137<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#5514b8"}}}}} -->
138<p class="has-link-color">Paragraph with <a href="#">link</a></p>
139<!-- /wp:paragraph -->
140
141<!-- wp:list {"style":{"elements":{"link":{"color":{"text":"#6e0daf"}}}}} -->
142<ul class="has-link-color"><!-- wp:list-item -->
143<li>List with <a href="#">link</a></li>
144<!-- /wp:list-item --></ul>
145<!-- /wp:list -->
146
147<!-- wp:paragraph -->
148<p>The color is set on the outer quote block, not the inner blocks:</p>
149<!-- /wp:paragraph -->
150
151<!-- wp:quote {"style":{"elements":{"link":{"color":{"text":"#6f00de"}}}}} -->
152<blockquote class="wp-block-quote has-link-color"><!-- wp:paragraph -->
153<p>Quote with <a href="#">link</a> on the inner blocks</p>
154<!-- /wp:paragraph --><cite>Citation <a href="#">link</a></cite></blockquote>
155<!-- /wp:quote -->
156
157<!-- wp:paragraph -->
158<p>Below is the table of contents block:</p>
159<!-- /wp:paragraph -->
160
161<!-- wp:table-of-contents {"headings":[{"content":"No custom colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#no-custom-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"Custom text color but not link color","level":2,"link":"http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom link color, but not text color","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom text and custom link colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"}],"style":{"elements":{"link":{"color":{"text":"#6e00c3"}}}}} -->
162<nav class="wp-block-table-of-contents has-link-color"><ol><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#no-custom-colors">No custom colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color">Custom text color but not link color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color">With custom link color, but not text color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors">With custom text and custom link colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li></ol></nav>
163<!-- /wp:table-of-contents -->
164
165<!-- wp:calendar {"style":{"elements":{"link":{"color":{"text":"#b400ff"}}}}} /-->
166
167<!-- wp:paragraph -->
168<p>Below is the table of latest posts block:</p>
169<!-- /wp:paragraph -->
170
171<!-- wp:latest-posts {"style":{"elements":{"link":{"color":{"text":"#9918d0"}}}}} /-->
172
173<!-- wp:paragraph -->
174<p>Below is the post author block with link enabled:</p>
175<!-- /wp:paragraph -->
176
177<!-- wp:post-author {"showBio":false,"byline":"this is a custom \u003ca href=\u0022#\u0022\u003ebyline with a link.\u003c/a\u003e","isLink":true,"style":{"elements":{"link":{"color":{"text":"#ae00f3"}}}}} /-->
178
179<!-- wp:paragraph -->
180<p>Below is the post date block with link enabled</p>
181<!-- /wp:paragraph -->
182
183<!-- wp:post-date {"isLink":true,"style":{"elements":{"link":{"color":{"text":"#b600ca"}}}}} /-->
184
185<!-- wp:post-terms {"term":"category","prefix":"This is the categories block (post terms): ","style":{"elements":{"link":{"color":{"text":"#71069f"}}}}} /-->
186
187<!-- wp:pullquote {"style":{"elements":{"link":{"color":{"text":"#ac00ca"}}}}} -->
188<figure class="wp-block-pullquote has-link-color"><blockquote><p>Pull quote with <a href="#">link</a></p><cite>Citation with <a href="#">link</a></cite></blockquote></figure>
189<!-- /wp:pullquote -->
190
191<!-- wp:spacer -->
192<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
193<!-- /wp:spacer -->
194
195<!-- wp:heading -->
196<h2 class="wp-block-heading" id="with-custom-text-and-custom-link-colors">With custom text and custom link colors</h2>
197<!-- /wp:heading -->
198
199<!-- wp:heading {"style":{"color":{"text":"#e40000"},"elements":{"link":{"color":{"text":"#960093"}}}}} -->
200<h2 class="wp-block-heading has-text-color has-link-color" id="heading-with-link" style="color:#e40000">Heading with <a href="#">link</a></h2>
201<!-- /wp:heading -->
202
203<!-- wp:paragraph {"style":{"color":{"text":"#f00000"},"elements":{"link":{"color":{"text":"#a300a5"}}}}} -->
204<p class="has-text-color has-link-color" style="color:#f00000">Paragraph with <a href="#blahblah">link</a></p>
205<!-- /wp:paragraph -->
206
207<!-- wp:list {"style":{"color":{"text":"#e10000"},"elements":{"link":{"color":{"text":"#9700c5"}}}}} -->
208<ul class="has-text-color has-link-color" style="color:#e10000"><!-- wp:list-item -->
209<li>List with <a href="#">link</a></li>
210<!-- /wp:list-item --></ul>
211<!-- /wp:list -->
212
213<!-- wp:quote {"style":{"color":{"text":"#fe0000"},"elements":{"link":{"color":{"text":"#e100c0"}}}}} -->
214<blockquote class="wp-block-quote has-text-color has-link-color" style="color:#fe0000"><!-- wp:paragraph -->
215<p>Quote with <a href="#">link</a> on the inner blocks</p>
216<!-- /wp:paragraph --><cite>Citation <a href="#">link</a></cite></blockquote>
217<!-- /wp:quote -->
218
219<!-- wp:paragraph -->
220<p>Below is the table of contents block:</p>
221<!-- /wp:paragraph -->
222
223<!-- wp:table-of-contents {"headings":[{"content":"No custom colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#no-custom-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"Custom text color but not link color","level":2,"link":"http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom link color, but not text color","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"},{"content":"With custom text and custom link colors","level":2,"link":"http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors"},{"content":"Heading with link","level":2,"link":"http://localhost:10013/try-some-link-colors/#heading-with-link"}],"style":{"color":{"text":"#ff0000"},"elements":{"link":{"color":{"text":"#ea0088"}}}}} -->
224<nav class="wp-block-table-of-contents has-text-color has-link-color" style="color:#ff0000"><ol><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#no-custom-colors">No custom colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#custom-text-color-but-not-link-color">Custom text color but not link color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-link-color-but-not-text-color">With custom link color, but not text color</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#with-custom-text-and-custom-link-colors">With custom text and custom link colors</a></li><li><a class="wp-block-table-of-contents__entry" href="http://localhost:10013/try-some-link-colors/#heading-with-link">Heading with link</a></li></ol></nav>
225<!-- /wp:table-of-contents -->
226
227<!-- wp:calendar {"style":{"color":{"text":"#f60000"},"elements":{"link":{"color":{"text":"#be00ae"}}}}} /-->
228
229<!-- wp:paragraph -->
230<p>Below is the table of latest posts block:</p>
231<!-- /wp:paragraph -->
232
233<!-- wp:latest-posts {"style":{"color":{"text":"#f10000"},"elements":{"link":{"color":{"text":"#bb06cb"}}}}} /-->
234
235<!-- wp:paragraph -->
236<p>Below is the post author block with link enabled:</p>
237<!-- /wp:paragraph -->
238
239<!-- wp:post-author {"showBio":false,"byline":"this is a custom \u003ca href=\u0022#\u0022\u003ebyline with a link.\u003c/a\u003e","isLink":true,"style":{"color":{"text":"#ee0000"},"elements":{"link":{"color":{"text":"#ca06d8"}}}}} /-->
240
241<!-- wp:paragraph -->
242<p>Below is the post date block with link enabled</p>
243<!-- /wp:paragraph -->
244
245<!-- wp:post-date {"isLink":true,"style":{"color":{"text":"#fa0000"},"elements":{"link":{"color":{"text":"#a800e5"}}}}} /-->
246
247<!-- wp:post-terms {"term":"category","prefix":"This is the categories block (post terms): ","style":{"color":{"text":"#fe0000"},"elements":{"link":{"color":{"text":"#c300b9"}}}}} /-->
248
249<!-- wp:pullquote {"style":{"color":{"text":"#fa0000"},"elements":{"link":{"color":{"text":"#9e00d6"}}}}} -->
250<figure class="wp-block-pullquote has-text-color has-link-color" style="color:#fa0000"><blockquote><p>Pull quote with <a href="#">link</a></p><cite>Citation with <a href="#">link</a></cite></blockquote></figure>
251<!-- /wp:pullquote -->