Make WordPress Core

Ticket #55974: twenty-twenty-border-test.html

File twenty-twenty-border-test.html, 16.7 KB (added by poena, 16 months ago)

Test blocks for borders in Twenty Twenty. Copy and paste into the block editor code editor mode.

Line 
1<!-- wp:heading -->
2<h2 class="wp-block-heading">Avatar</h2>
3<!-- /wp:heading -->
4
5<!-- wp:avatar {"style":{"border":{"radius":"5px","style":"solid","width":"5px"}}} /-->
6
7<!-- wp:avatar {"style":{"border":{"radius":"5px","style":"solid","width":"5px"}},"borderColor":"accent"} /-->
8
9<!-- wp:avatar {"style":{"border":{"radius":"5px","color":"#27cc67","width":"5px"}}} /-->
10
11<!-- wp:heading -->
12<h2 class="wp-block-heading">Button</h2>
13<!-- /wp:heading -->
14
15<!-- wp:buttons -->
16<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px","width":"5px"}}} -->
17<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#" style="border-width:5px;border-radius:5px">Fill</a></div>
18<!-- /wp:button -->
19
20<!-- wp:button {"style":{"border":{"width":"5px","radius":"5px"}}} -->
21<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#" style="border-width:5px;border-radius:5px">Outline</a></div>
22<!-- /wp:button --></div>
23<!-- /wp:buttons -->
24
25<!-- wp:buttons -->
26<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"secondary"} -->
27<div class="wp-block-button"><a class="wp-block-button__link has-border-color has-secondary-border-color wp-element-button" href="#" style="border-width:5px;border-radius:5px">Fill</a></div>
28<!-- /wp:button -->
29
30<!-- wp:button {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"secondary"} -->
31<div class="wp-block-button"><a class="wp-block-button__link has-border-color has-secondary-border-color wp-element-button" href="#" style="border-width:5px;border-radius:5px">Outline</a></div>
32<!-- /wp:button --></div>
33<!-- /wp:buttons -->
34
35<!-- wp:buttons -->
36<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px","width":"5px","style":"solid"}},"borderColor":"secondary"} -->
37<div class="wp-block-button"><a class="wp-block-button__link has-border-color has-secondary-border-color wp-element-button" href="#" style="border-style:solid;border-width:5px;border-radius:5px">Fill</a></div>
38<!-- /wp:button -->
39
40<!-- wp:button {"style":{"border":{"radius":"5px","width":"5px","style":"solid"}},"borderColor":"secondary"} -->
41<div class="wp-block-button"><a class="wp-block-button__link has-border-color has-secondary-border-color wp-element-button" href="#" style="border-style:solid;border-width:5px;border-radius:5px">Outline</a></div>
42<!-- /wp:button --></div>
43<!-- /wp:buttons -->
44
45<!-- wp:heading -->
46<h2 class="wp-block-heading">Code</h2>
47<!-- /wp:heading -->
48
49<!-- wp:code -->
50<pre class="wp-block-code"><code>hello</code></pre>
51<!-- /wp:code -->
52
53<!-- wp:code {"borderColor":"accent"} -->
54<pre class="wp-block-code has-border-color has-accent-border-color"><code>hello</code></pre>
55<!-- /wp:code -->
56
57<!-- wp:code {"style":{"border":{"radius":"5px","style":"solid","width":"5px"}},"borderColor":"accent"} -->
58<pre class="wp-block-code has-border-color has-accent-border-color" style="border-style:solid;border-width:5px;border-radius:5px"><code>hello</code></pre>
59<!-- /wp:code -->
60
61<!-- wp:code {"style":{"border":{"radius":"5px","color":"#27c1cc","style":"solid","width":"5px"}}} -->
62<pre class="wp-block-code has-border-color" style="border-color:#27c1cc;border-style:solid;border-width:5px;border-radius:5px"><code>hello</code></pre>
63<!-- /wp:code -->
64
65<!-- wp:heading -->
66<h2 class="wp-block-heading">Column</h2>
67<!-- /wp:heading -->
68
69<!-- wp:columns -->
70<div class="wp-block-columns"><!-- wp:column {"style":{"border":{"width":"5px"}},"borderColor":"accent"} -->
71<div class="wp-block-column has-border-color has-accent-border-color" style="border-width:5px"><!-- wp:paragraph -->
72<p>Column one</p>
73<!-- /wp:paragraph --></div>
74<!-- /wp:column -->
75
76<!-- wp:column {"style":{"border":{"color":"#21e1c8","style":"dashed","width":"5px"}}} -->
77<div class="wp-block-column has-border-color" style="border-color:#21e1c8;border-style:dashed;border-width:5px"><!-- wp:paragraph -->
78<p>Column two</p>
79<!-- /wp:paragraph --></div>
80<!-- /wp:column --></div>
81<!-- /wp:columns -->
82
83<!-- wp:heading -->
84<h2 class="wp-block-heading">Columns</h2>
85<!-- /wp:heading -->
86
87<!-- wp:columns {"style":{"border":{"radius":"5px","width":"5px"}}} -->
88<div class="wp-block-columns" style="border-width:5px;border-radius:5px"><!-- wp:column -->
89<div class="wp-block-column"><!-- wp:paragraph -->
90<p>Column one</p>
91<!-- /wp:paragraph --></div>
92<!-- /wp:column -->
93
94<!-- wp:column -->
95<div class="wp-block-column"><!-- wp:paragraph -->
96<p>Column two</p>
97<!-- /wp:paragraph --></div>
98<!-- /wp:column --></div>
99<!-- /wp:columns -->
100
101<!-- wp:columns {"style":{"border":{"width":"5px","color":"#cd2653","radius":"5px"}}} -->
102<div class="wp-block-columns has-border-color" style="border-color:#cd2653;border-width:5px;border-radius:5px"><!-- wp:column -->
103<div class="wp-block-column"><!-- wp:paragraph -->
104<p>Column one</p>
105<!-- /wp:paragraph --></div>
106<!-- /wp:column -->
107
108<!-- wp:column -->
109<div class="wp-block-column"><!-- wp:paragraph -->
110<p>Column two</p>
111<!-- /wp:paragraph --></div>
112<!-- /wp:column --></div>
113<!-- /wp:columns -->
114
115<!-- wp:columns {"style":{"border":{"radius":"5px","color":"#11fbe4","width":"5px","style":"dotted"}}} -->
116<div class="wp-block-columns has-border-color" style="border-color:#11fbe4;border-style:dotted;border-width:5px;border-radius:5px"><!-- wp:column -->
117<div class="wp-block-column"><!-- wp:paragraph -->
118<p>Column one</p>
119<!-- /wp:paragraph --></div>
120<!-- /wp:column -->
121
122<!-- wp:column -->
123<div class="wp-block-column"><!-- wp:paragraph -->
124<p>Column two</p>
125<!-- /wp:paragraph --></div>
126<!-- /wp:column --></div>
127<!-- /wp:columns -->
128
129<!-- wp:heading -->
130<h2 class="wp-block-heading">Comment author avatar</h2>
131<!-- /wp:heading -->
132
133<!-- wp:comments -->
134<div class="wp-block-comments"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px","style":"solid","width":"5px"}}} /-->
135
136<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px","width":"5px","style":"solid"}},"borderColor":"accent"} /-->
137
138<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px","color":"#2aebde","style":"solid","width":"5px"}}} /--></div>
139<!-- /wp:comments -->
140
141<!-- wp:heading -->
142<h2 class="wp-block-heading">Comments title</h2>
143<!-- /wp:heading -->
144
145<!-- wp:comments -->
146<div class="wp-block-comments"><!-- wp:comments-title {"style":{"border":{"width":"5px","radius":"5px"}}} /-->
147
148<!-- wp:comments-title {"style":{"border":{"radius":"5px","width":"5px","style":"solid"}},"borderColor":"accent"} /-->
149
150<!-- wp:comments-title {"style":{"border":{"radius":"5px","color":"#1fd8ec","width":"5px"}}} /--></div>
151<!-- /wp:comments -->
152
153<!-- wp:heading -->
154<h2 class="wp-block-heading">Cover</h2>
155<!-- /wp:heading -->
156
157<!-- wp:cover {"url":"http://localhost:8889/wp-content/uploads/2024/02/pattern_01.jpg","id":89,"dimRatio":50,"customOverlayColor":"#4a656e","style":{"border":{"radius":"5px","width":"5px"}},"layout":{"type":"constrained"}} -->
158<div class="wp-block-cover" style="border-width:5px;border-radius:5px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#4a656e"></span><img class="wp-block-cover__image-background wp-image-89" alt="" src="http://localhost:8889/wp-content/uploads/2024/02/pattern_01.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
159<p class="has-text-align-center has-large-font-size">Cover block</p>
160<!-- /wp:paragraph --></div></div>
161<!-- /wp:cover -->
162
163<!-- wp:cover {"url":"http://localhost:8889/wp-content/uploads/2024/02/pattern_01.jpg","id":89,"dimRatio":50,"customOverlayColor":"#4a656e","style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent","layout":{"type":"constrained"}} -->
164<div class="wp-block-cover has-border-color has-accent-border-color" style="border-width:5px;border-radius:5px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#4a656e"></span><img class="wp-block-cover__image-background wp-image-89" alt="" src="http://localhost:8889/wp-content/uploads/2024/02/pattern_01.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
165<p class="has-text-align-center has-large-font-size">Cover block</p>
166<!-- /wp:paragraph --></div></div>
167<!-- /wp:cover -->
168
169<!-- wp:cover {"url":"http://localhost:8889/wp-content/uploads/2024/02/pattern_01.jpg","id":89,"dimRatio":50,"customOverlayColor":"#4a656e","style":{"border":{"radius":"50px","color":"#27ccb5","width":"5px"}},"layout":{"type":"constrained"}} -->
170<div class="wp-block-cover has-border-color" style="border-color:#27ccb5;border-width:5px;border-radius:50px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#4a656e"></span><img class="wp-block-cover__image-background wp-image-89" alt="" src="http://localhost:8889/wp-content/uploads/2024/02/pattern_01.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
171<p class="has-text-align-center has-large-font-size">Cover block</p>
172<!-- /wp:paragraph --></div></div>
173<!-- /wp:cover -->
174
175<!-- wp:heading -->
176<h2 class="wp-block-heading">Details</h2>
177<!-- /wp:heading -->
178
179<!-- wp:details {"style":{"border":{"width":"5px"}}} -->
180<details class="wp-block-details" style="border-width:5px"><summary>Summary</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
181<p>Details content</p>
182<!-- /wp:paragraph --></details>
183<!-- /wp:details -->
184
185<!-- wp:details {"style":{"border":{"width":"5px"}},"borderColor":"accent"} -->
186<details class="wp-block-details has-border-color has-accent-border-color" style="border-width:5px"><summary>Summary</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
187<p>Details content</p>
188<!-- /wp:paragraph --></details>
189<!-- /wp:details -->
190
191<!-- wp:details {"style":{"border":{"color":"#15ffc1","width":"5px"}}} -->
192<details class="wp-block-details has-border-color" style="border-color:#15ffc1;border-width:5px"><summary>Summary</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
193<p>Details content</p>
194<!-- /wp:paragraph --></details>
195<!-- /wp:details -->
196
197<!-- wp:details {"style":{"border":{"color":"#15ffc1","width":"5px","style":"dotted"}}} -->
198<details class="wp-block-details has-border-color" style="border-color:#15ffc1;border-style:dotted;border-width:5px"><summary>Summary</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
199<p>Details content</p>
200<!-- /wp:paragraph --></details>
201<!-- /wp:details -->
202
203<!-- wp:heading -->
204<h2 class="wp-block-heading">Footnotes</h2>
205<!-- /wp:heading -->
206
207<!-- wp:paragraph -->
208<p>A paragraph<sup data-fn="76ef837b-4461-4c4e-91c3-6c450e62f5cb" class="fn"><a href="#76ef837b-4461-4c4e-91c3-6c450e62f5cb" id="76ef837b-4461-4c4e-91c3-6c450e62f5cb-link">1</a></sup></p>
209<!-- /wp:paragraph -->
210
211<!-- wp:footnotes {"style":{"border":{"radius":"5px","width":"5px"}}} /-->
212
213<!-- wp:heading -->
214<h2 class="wp-block-heading">Group</h2>
215<!-- /wp:heading -->
216
217<!-- wp:group {"style":{"border":{"width":"5px","radius":"5px"}},"layout":{"type":"constrained"}} -->
218<div class="wp-block-group" style="border-width:5px;border-radius:5px"><!-- wp:paragraph -->
219<p>A paragraph inside a group</p>
220<!-- /wp:paragraph --></div>
221<!-- /wp:group -->
222
223<!-- wp:group {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent","layout":{"type":"constrained"}} -->
224<div class="wp-block-group has-border-color has-accent-border-color" style="border-width:5px;border-radius:5px"><!-- wp:paragraph -->
225<p>A paragraph inside a group</p>
226<!-- /wp:paragraph --></div>
227<!-- /wp:group -->
228
229<!-- wp:group {"style":{"border":{"radius":"5px","color":"#27cccc","width":"5px","style":"dashed"}},"layout":{"type":"constrained"}} -->
230<div class="wp-block-group has-border-color" style="border-color:#27cccc;border-style:dashed;border-width:5px;border-radius:5px"><!-- wp:paragraph -->
231<p>A paragraph inside a group</p>
232<!-- /wp:paragraph --></div>
233<!-- /wp:group -->
234
235<!-- wp:group {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent","layout":{"type":"flex","flexWrap":"nowrap"}} -->
236<div class="wp-block-group has-border-color has-accent-border-color" style="border-width:5px;border-radius:5px"><!-- wp:paragraph -->
237<p>A paragraph inside a row</p>
238<!-- /wp:paragraph --></div>
239<!-- /wp:group -->
240
241<!-- wp:group {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent","layout":{"type":"flex","orientation":"vertical"}} -->
242<div class="wp-block-group has-border-color has-accent-border-color" style="border-width:5px;border-radius:5px"><!-- wp:paragraph -->
243<p>A paragraph inside a stack</p>
244<!-- /wp:paragraph --></div>
245<!-- /wp:group -->
246
247<!-- wp:heading -->
248<h2 class="wp-block-heading">Image</h2>
249<!-- /wp:heading -->
250
251<!-- wp:image {"id":89,"width":"126px","height":"auto","sizeSlug":"large","linkDestination":"none","style":{"border":{"width":"5px","radius":"5px"}}} -->
252<figure class="wp-block-image size-large is-resized has-custom-border"><img src="http://localhost:8889/wp-content/uploads/2024/02/pattern_01-1024x1024.jpg" alt="" class="wp-image-89" style="border-width:5px;border-radius:5px;width:126px;height:auto"/></figure>
253<!-- /wp:image -->
254
255<!-- wp:image {"id":89,"width":"126px","height":"auto","sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent"} -->
256<figure class="wp-block-image size-large is-resized has-custom-border"><img src="http://localhost:8889/wp-content/uploads/2024/02/pattern_01-1024x1024.jpg" alt="" class="has-border-color has-accent-border-color wp-image-89" style="border-width:5px;border-radius:5px;width:126px;height:auto"/></figure>
257<!-- /wp:image -->
258
259<!-- wp:image {"id":89,"width":"126px","height":"auto","sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"5px","color":"#00ffe5","width":"5px"}}} -->
260<figure class="wp-block-image size-large is-resized has-custom-border"><img src="http://localhost:8889/wp-content/uploads/2024/02/pattern_01-1024x1024.jpg" alt="" class="has-border-color wp-image-89" style="border-color:#00ffe5;border-width:5px;border-radius:5px;width:126px;height:auto"/></figure>
261<!-- /wp:image -->
262
263<!-- wp:heading -->
264<h2 class="wp-block-heading">Featured image</h2>
265<!-- /wp:heading -->
266
267<!-- wp:post-featured-image {"style":{"border":{"width":"5px","radius":"5px"}}} /-->
268
269<!-- wp:post-featured-image {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent"} /-->
270
271<!-- wp:heading -->
272<h2 class="wp-block-heading">Read more</h2>
273<!-- /wp:heading -->
274
275<!-- wp:read-more {"style":{"border":{"width":"5px"}}} /-->
276
277<!-- wp:read-more {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent"} /-->
278
279<!-- wp:read-more {"style":{"border":{"color":"#1fe67c","width":"5px","radius":"5px"}}} /-->
280
281<!-- wp:heading -->
282<h2 class="wp-block-heading">Search</h2>
283<!-- /wp:heading -->
284
285<!-- wp:search {"label":"Search","buttonText":"Search","style":{"border":{"width":"5px","radius":"5px"}}} /-->
286
287<!-- wp:search {"label":"Search","buttonText":"Search","buttonPosition":"button-inside","style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent"} /-->
288
289<!-- wp:search {"label":"Search","buttonText":"Search","buttonUseIcon":true,"style":{"border":{"width":"5px","radius":"5px"}}} /-->
290
291<!-- wp:heading -->
292<h2 class="wp-block-heading">Table</h2>
293<!-- /wp:heading -->
294
295<!-- wp:table {"style":{"border":{"width":"25px","style":"dashed"}}} -->
296<figure class="wp-block-table"><table style="border-style:dashed;border-width:25px"><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
297<!-- /wp:table -->
298
299<!-- wp:table {"style":{"border":{"width":"5px"}},"borderColor":"accent"} -->
300<figure class="wp-block-table"><table class="has-border-color has-accent-border-color" style="border-width:5px"><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
301<!-- /wp:table -->
302
303<!-- wp:heading -->
304<h2 class="wp-block-heading">Verse</h2>
305<!-- /wp:heading -->
306
307<!-- wp:verse {"style":{"border":{"width":"5px","radius":"5px"}}} -->
308<pre class="wp-block-verse" style="border-width:5px;border-radius:5px">Code is poetry</pre>
309<!-- /wp:verse -->
310
311<!-- wp:verse {"style":{"border":{"radius":"5px","width":"5px"}},"borderColor":"accent"} -->
312<pre class="wp-block-verse has-border-color has-accent-border-color" style="border-width:5px;border-radius:5px">Code is poetry</pre>
313<!-- /wp:verse -->
314
315<!-- wp:verse {"style":{"border":{"radius":"5px","color":"#27ccb0","width":"5px","style":"dashed"}}} -->
316<pre class="wp-block-verse has-border-color" style="border-color:#27ccb0;border-style:dashed;border-width:5px;border-radius:5px">Code is poetry</pre>
317<!-- /wp:verse -->