@terrahq/wysiwyg 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +666 -746
- package/content/wordpress-content.html +193 -152
- package/dist/content/wordpress-content.html +185 -154
- package/dist/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
- package/package.json +1 -1
- package/public/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
- package/readme/blocks/Button.md +33 -13
- package/readme/blocks/Columns.md +28 -13
- package/readme/blocks/Links.md +2 -0
- package/readme/blocks/Quote.md +12 -0
- package/readme/blocks/Separator.md +25 -0
- package/readme/blocks/Table.md +96 -103
- package/readme/blocks/Video.md +80 -11
- package/readme/properties/Background.md +74 -0
- package/readme/properties/Font.md +15 -0
- package/readme/properties/Media.md +33 -0
- package/src/assets/icons/ArrowRight.svg +3 -0
- package/src/scss/_paths.scss +2 -1
- package/src/scss/framework/_var/_vars.scss +1 -1
- package/src/scss/framework/components/btn/_c--btn-a.scss +1 -0
- package/src/scss/framework/components/content/_c--content-a.scss +405 -455
- package/src/scss/framework/components/link/_c--link-a.scss +38 -7
- package/src/scss/global-content/_global-mixins/blocks/_content-block-btn.scss +25 -6
- package/src/scss/global-content/_global-mixins/blocks/_content-block-columns.scss +11 -0
- package/src/scss/global-content/_global-mixins/blocks/_content-block-quote.scss +23 -6
- package/src/scss/global-content/_global-mixins/blocks/_content-block-separator.scss +49 -3
- package/src/scss/global-content/_global-mixins/blocks/_content-block-table.scss +79 -7
- package/src/scss/global-content/_global-mixins/blocks/_content-links.scss +9 -2
- package/src/scss/global-content/_global-mixins/properties/_background.scss +50 -0
- package/src/scss/global-content/_global-mixins/properties/_font.scss +18 -6
- package/src/scss/global-content/_global-mixins/properties/_properties.scss +1 -0
- package/src/scss/sanity.scss +17 -1
- package/src/scss/wp.scss +441 -256
|
@@ -6,13 +6,16 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Wordpress content</title>
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" />
|
|
12
|
+
<script type="module" crossorigin src="/assets/main-ChHeRjLz.js"></script>
|
|
13
|
+
<link rel="stylesheet" crossorigin href="/assets/main-D6aLME2k.css">
|
|
11
14
|
</head>
|
|
12
15
|
<body>
|
|
13
16
|
<main>
|
|
14
17
|
<!-- //* wordpress-01 -->
|
|
15
|
-
<section class="
|
|
18
|
+
<section class="u--pt-15 u--pb-15 f--background-c">
|
|
16
19
|
<div class="f--container">
|
|
17
20
|
<div class="f--row">
|
|
18
21
|
<div class="f--col-12">
|
|
@@ -21,242 +24,270 @@
|
|
|
21
24
|
</div>
|
|
22
25
|
</div>
|
|
23
26
|
</section>
|
|
24
|
-
|
|
27
|
+
|
|
28
|
+
<section class="u--pt-15 u--pb-15 f--background-b">
|
|
25
29
|
<div class="f--container">
|
|
26
30
|
<div class="f--row">
|
|
27
31
|
<div class="f--col-12">
|
|
28
32
|
<div class="c--content-a--wp">
|
|
33
|
+
|
|
34
|
+
<!-- ============================ INTRO ============================ -->
|
|
29
35
|
<!-- wp:heading -->
|
|
30
|
-
<h2>
|
|
36
|
+
<h2>A Practical Guide to <strong>Sustainable</strong> <b>Web Design</b></h2>
|
|
31
37
|
<!-- /wp:heading -->
|
|
32
|
-
|
|
33
|
-
<!-- wp:acf/highlighted-block-->
|
|
34
|
-
<p class="highlighted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt lobortis feugiat vivamus at. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Interdum consectetur libero id faucibus nisl tincidunt eget.</p>
|
|
35
|
-
<!-- /wp:acf/highlighted-block-->
|
|
36
|
-
|
|
38
|
+
|
|
37
39
|
<!-- wp:paragraph -->
|
|
38
|
-
<p>
|
|
40
|
+
<p>Every page we ship has a footprint. In this guide we look at how thoughtful design choices reduce that cost while making interfaces faster and easier to use. For the full background, read the <a href="https://terrahq.com">original research</a> — most of the ideas here build directly on it, and the <strong>core principle</strong> is surprisingly simple: <b>send less, render sooner</b>.</p>
|
|
39
41
|
<!-- /wp:paragraph -->
|
|
40
|
-
|
|
42
|
+
|
|
43
|
+
<!-- wp:acf/highlighted-block-->
|
|
44
|
+
<p class="highlighted">Sustainable design is <strong>not about doing less</strong> — it is about doing <b>exactly what the user needs</b>, and nothing more.</p>
|
|
45
|
+
<!-- /wp:acf/highlighted-block-->
|
|
46
|
+
|
|
41
47
|
<!-- wp:image {"sizeSlug":"large"} -->
|
|
42
|
-
<figure class="wp-block-image size-large"><img src="https://picsum.photos/2000/750" alt=""/><figcaption class="wp-element-caption">
|
|
48
|
+
<figure class="wp-block-image size-large"><img src="https://picsum.photos/2000/750" alt=""/><figcaption class="wp-element-caption">A calm, content-first layout sets the tone for the whole <b>experience.</b></figcaption></figure>
|
|
43
49
|
<!-- /wp:image -->
|
|
44
|
-
|
|
45
|
-
<!--
|
|
46
|
-
<p>Elementum facilisis leo vel fringilla est. Pellentesque elit eget gravida cum sociis natoque. Cursus euismod quis viverra nibh cras. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Sed nisi lacus sed viverra tellus. Quis auctor elit sed vulputate mi.</p>
|
|
47
|
-
<!-- /wp:paragraph -->
|
|
48
|
-
|
|
50
|
+
|
|
51
|
+
<!-- ====================== WHY IT MATTERS ====================== -->
|
|
49
52
|
<!-- wp:heading {"level":3} -->
|
|
50
|
-
<h3>
|
|
53
|
+
<h3>Why it <b>matters</b></h3>
|
|
51
54
|
<!-- /wp:heading -->
|
|
52
|
-
|
|
53
|
-
<!-- wp:paragraph -->
|
|
54
|
-
<p>Sem fringilla ut morbi tincidunt augue interdum velit. Fermentum leo vel orci porta non pulvinar neque laoreet. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Quisque id diam vel quam elementum pulvinar etiam non. Cras tincidunt lobortis feugiat vivamus at. Imperdiet proin fermentum leo vel orci.</p>
|
|
55
|
-
<!-- /wp:paragraph -->
|
|
56
|
-
|
|
57
|
-
<!-- wp:image {"sizeSlug":"large"} -->
|
|
58
|
-
<figure class="wp-block-image size-large"><img src="https://picsum.photos/500/200" alt=""/><figcaption class="wp-element-caption">This is footnote lorem ipsum dolor sit amet</figcaption></figure>
|
|
59
|
-
<!-- /wp:image -->
|
|
60
|
-
|
|
55
|
+
|
|
61
56
|
<!-- wp:paragraph -->
|
|
62
|
-
<p>
|
|
57
|
+
<p>The web is the largest connected machine ever built, and most of its energy goes into moving and rendering bytes. <strong>Trimming the obvious waste</strong> — oversized images, unused scripts, redundant fonts — usually delivers the biggest wins before you ever touch the harder trade-offs.</p>
|
|
63
58
|
<!-- /wp:paragraph -->
|
|
64
|
-
|
|
59
|
+
|
|
65
60
|
<!-- wp:list -->
|
|
66
61
|
<ul><!-- wp:list-item -->
|
|
67
|
-
<li>
|
|
62
|
+
<li><strong>Measure first</strong>: you cannot improve what you have not profiled.</li>
|
|
68
63
|
<!-- /wp:list-item -->
|
|
69
|
-
|
|
70
64
|
<!-- wp:list-item -->
|
|
71
|
-
<li>
|
|
65
|
+
<li>Ship critical content as plain, <b>semantic HTML</b>.</li>
|
|
72
66
|
<!-- /wp:list-item -->
|
|
73
|
-
|
|
74
67
|
<!-- wp:list-item -->
|
|
75
|
-
<li>
|
|
68
|
+
<li>Defer everything that is not needed for the first interaction.<!-- wp:list -->
|
|
76
69
|
<ul><!-- wp:list-item -->
|
|
77
|
-
<li>
|
|
70
|
+
<li>Lazy-load <b>below-the-fold</b> media.</li>
|
|
78
71
|
<!-- /wp:list-item -->
|
|
79
|
-
|
|
80
72
|
<!-- wp:list-item -->
|
|
81
|
-
<li>
|
|
73
|
+
<li>Split bundles so each route loads only its own code.<!-- wp:list -->
|
|
82
74
|
<ul><!-- wp:list-item -->
|
|
83
|
-
<li>
|
|
84
|
-
<!-- /wp:list-item -->
|
|
85
|
-
|
|
86
|
-
<!-- wp:list-item -->
|
|
87
|
-
<li>Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.</li>
|
|
75
|
+
<li>Prefer native elements over heavy widgets.</li>
|
|
88
76
|
<!-- /wp:list-item --></ul>
|
|
89
77
|
<!-- /wp:list --></li>
|
|
90
78
|
<!-- /wp:list-item --></ul>
|
|
91
79
|
<!-- /wp:list --></li>
|
|
92
80
|
<!-- /wp:list-item --></ul>
|
|
93
81
|
<!-- /wp:list -->
|
|
94
|
-
|
|
95
|
-
<!-- wp:paragraph -->
|
|
96
|
-
<p>Volutpat est velit egestas dui. Pulvinar etiam non quam lacus suspendisse faucibus. Etiam non quam lacus suspendisse faucibus interdum. Posuere morbi leo urna molestie at elementum eu facilisis. Erat velit scelerisque in dictum non consectetur a.</p>
|
|
97
|
-
<!-- /wp:paragraph -->
|
|
98
|
-
|
|
82
|
+
|
|
99
83
|
<!-- wp:quote -->
|
|
100
84
|
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
|
|
101
|
-
<p>
|
|
102
|
-
<!-- /wp:paragraph --><cite>
|
|
85
|
+
<p>The fastest request is the one you <strong>never make</strong>. Before optimising a resource, ask whether it <b>needs to exist at all</b>.</p>
|
|
86
|
+
<!-- /wp:paragraph --><cite>Performance folklore, repeated often because it is <b>true</b>.</cite></blockquote>
|
|
103
87
|
<!-- /wp:quote -->
|
|
104
|
-
|
|
105
|
-
<!--
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<!-- wp:heading {"level":4} -->
|
|
110
|
-
<h4>This is the H4</h4>
|
|
88
|
+
|
|
89
|
+
<!-- ====================== CORE PRINCIPLES ====================== -->
|
|
90
|
+
<!-- wp:heading {"level":3} -->
|
|
91
|
+
<h3><strong>Core principles</strong>, step by step</h3>
|
|
111
92
|
<!-- /wp:heading -->
|
|
112
|
-
|
|
93
|
+
|
|
113
94
|
<!-- wp:paragraph -->
|
|
114
|
-
<p>
|
|
95
|
+
<p>A repeatable process beats heroics. The four steps below scale from a landing page to an entire platform.</p>
|
|
115
96
|
<!-- /wp:paragraph -->
|
|
116
|
-
|
|
97
|
+
|
|
117
98
|
<!-- wp:list {"ordered":true} -->
|
|
118
99
|
<ol><!-- wp:list-item -->
|
|
119
|
-
<li>
|
|
100
|
+
<li>Audit the current page weight and <strong>set a budget</strong>.</li>
|
|
120
101
|
<!-- /wp:list-item -->
|
|
121
|
-
|
|
122
102
|
<!-- wp:list-item -->
|
|
123
|
-
<li>
|
|
103
|
+
<li>Cut the <strong>heaviest offenders</strong>, then re-measure.<!-- wp:list {"ordered":true} -->
|
|
124
104
|
<ol><!-- wp:list-item -->
|
|
125
|
-
<li>
|
|
105
|
+
<li>Compress and resize images to their display size.</li>
|
|
126
106
|
<!-- /wp:list-item -->
|
|
127
|
-
|
|
128
107
|
<!-- wp:list-item -->
|
|
129
|
-
<li>
|
|
108
|
+
<li>Subset fonts and load only the weights you use.<!-- wp:list {"ordered":true} -->
|
|
130
109
|
<ol><!-- wp:list-item -->
|
|
131
|
-
<li>
|
|
132
|
-
<!-- /wp:list-item -->
|
|
133
|
-
|
|
134
|
-
<!-- wp:list-item -->
|
|
135
|
-
<li>Viverra suspendisse potenti nullam ac.</li>
|
|
110
|
+
<li>Drop icon fonts in favour of <b>inline SVG</b>.</li>
|
|
136
111
|
<!-- /wp:list-item --></ol>
|
|
137
112
|
<!-- /wp:list --></li>
|
|
138
113
|
<!-- /wp:list-item --></ol>
|
|
139
114
|
<!-- /wp:list --></li>
|
|
115
|
+
<!-- /wp:list-item -->
|
|
116
|
+
<!-- wp:list-item -->
|
|
117
|
+
<li>Automate the budget in CI so regressions never ship.</li>
|
|
140
118
|
<!-- /wp:list-item --></ol>
|
|
141
119
|
<!-- /wp:list -->
|
|
142
|
-
|
|
143
|
-
<!-- wp:
|
|
144
|
-
<
|
|
145
|
-
<!-- /wp:
|
|
146
|
-
|
|
147
|
-
<!-- wp:table -->
|
|
148
|
-
<figure class="wp-block-table"><table><tbody><tr><td>Header 1</td><td>Header 2</td><td>Header 3</td><td>Header 4</td></tr><tr><td>1.1</td><td>1.2 Non arcu risus quis varius quam quisque id diam.</td><td>1.3</td><td>1.4<br>1.4.1</td></tr><tr><td>2.1</td><td>Integer eget aliquet nibh praesent tristique. Sagittis orci a scelerisque purus semper eget duis at tellus.</td><td>Fringilla ut morbi tincidunt augue interdum.</td><td>Lectus urna duis convallis convallis tellus id interdum velit.</td></tr><tr><td>Dignissim suspendisse in est ante in nibh mauris cursus mattis.</td><td>Sit amet mattis vulputate enim nulla aliquet porttitor. A cras semper auctor neque vitae tempus quam pellentesque.</td><td>Nulla facilisi etiam dignissim diam.</td><td>Malesuada fames ac turpis egestas sed tempus urna et pharetra.</td></tr><tr><td>3.1</td><td>Consequat ac felis donec et odio pellentesque diam volutpat commodo.</td><td>Morbi quis commodo odio aenean sed adipiscing diam.</td><td>Purus sit amet volutpat consequat. Penatibus et magnis dis parturient montes nascetur ridiculus mus.</td></tr><tr><td>4.1</td><td>Aenean vel elit scelerisque mauris pellentesque pulvinar.</td><td>Semper risus in hendrerit gravida. Massa ultricies mi quis hendrerit dolor magna eget.</td><td>Lorem sed risus ultricies tristique nulla aliquet enim tortor.</td></tr></tbody></table></figure>
|
|
149
|
-
<!-- /wp:table -->
|
|
150
|
-
|
|
120
|
+
|
|
121
|
+
<!-- wp:heading {"level":4} -->
|
|
122
|
+
<h4>Comparing the <b>options</b></h4>
|
|
123
|
+
<!-- /wp:heading -->
|
|
124
|
+
|
|
151
125
|
<!-- wp:paragraph -->
|
|
152
|
-
<p>
|
|
126
|
+
<p>The table below summarises three common image strategies and how they trade off quality, weight and effort.</p>
|
|
153
127
|
<!-- /wp:paragraph -->
|
|
154
|
-
|
|
128
|
+
|
|
155
129
|
<!-- wp:table -->
|
|
156
|
-
<figure class="wp-block-table is-style-regular"><table><thead><tr><th>
|
|
130
|
+
<figure class="wp-block-table is-style-regular"><table><thead><tr><th>Strategy</th><th>Typical weight</th><th>Best for</th></tr></thead><tbody><tr><td><strong>Responsive JPEG/PNG</strong></td><td>Medium</td><td>Photos with broad browser support</td></tr><tr><td><strong>WebP / AVIF</strong></td><td>Low</td><td>Photos where modern formats are safe</td></tr><tr><td><strong>Inline SVG</strong></td><td>Very low</td><td>Logos, icons and simple illustrations</td></tr></tbody></table><figcaption class="wp-element-caption">Image formats compared by <b>weight</b> and ideal use case.</figcaption></figure>
|
|
157
131
|
<!-- /wp:table -->
|
|
158
|
-
|
|
132
|
+
|
|
159
133
|
<!-- wp:paragraph -->
|
|
160
|
-
<p>
|
|
134
|
+
<p>You can tap any photograph in this article to open it at full size — a small enhancement that keeps the layout calm while still giving curious readers the detail they want.</p>
|
|
161
135
|
<!-- /wp:paragraph -->
|
|
162
|
-
|
|
163
|
-
<!-- wp:
|
|
164
|
-
<figure
|
|
165
|
-
|
|
166
|
-
|
|
136
|
+
|
|
137
|
+
<!-- wp:image {"lightbox":{"enabled":true},"sizeSlug":"large"} -->
|
|
138
|
+
<figure data-wp-context="{"imageId":"zoom-example-01"}" data-wp-interactive="core/image" data-wp-key="zoom-example-01" class="wp-block-image size-large wp-lightbox-container">
|
|
139
|
+
<img decoding="async" src="https://picsum.photos/2000/750" alt="" data-wp-init="callbacks.setButtonStyles" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles"/>
|
|
140
|
+
<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge image" data-wp-init="callbacks.initTriggerButton" data-wp-on--click="actions.showLightbox">
|
|
141
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
|
142
|
+
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
|
|
143
|
+
</svg>
|
|
144
|
+
</button>
|
|
145
|
+
<figcaption class="wp-element-caption">Tap to zoom — the lightbox trigger appears on hover.</figcaption>
|
|
146
|
+
</figure>
|
|
147
|
+
<!-- /wp:image -->
|
|
148
|
+
|
|
149
|
+
<!-- ======================== IN PRACTICE ======================== -->
|
|
150
|
+
<!-- wp:heading {"level":3} -->
|
|
151
|
+
<h3>Putting it into <strong>practice</strong></h3>
|
|
152
|
+
<!-- /wp:heading -->
|
|
153
|
+
|
|
167
154
|
<!-- wp:paragraph -->
|
|
168
|
-
<p>
|
|
155
|
+
<p>Side-by-side layouts help readers scan trade-offs quickly without scrolling back and forth.</p>
|
|
169
156
|
<!-- /wp:paragraph -->
|
|
170
|
-
|
|
171
|
-
<!-- wp:
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
<!-- wp:heading {"level":5} -->
|
|
176
|
-
<h5>This is the H5</h5>
|
|
157
|
+
|
|
158
|
+
<!-- wp:columns -->
|
|
159
|
+
<div class="wp-block-columns"><!-- wp:column -->
|
|
160
|
+
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
|
|
161
|
+
<h4><b>Before</b></h4>
|
|
177
162
|
<!-- /wp:heading -->
|
|
178
|
-
|
|
179
163
|
<!-- wp:paragraph -->
|
|
180
|
-
<p>
|
|
181
|
-
<!-- /wp:paragraph
|
|
182
|
-
|
|
183
|
-
<!-- wp:
|
|
184
|
-
<div class="wp-block-
|
|
185
|
-
<
|
|
186
|
-
<!-- /wp:
|
|
187
|
-
<!-- /wp:buttons -->
|
|
188
|
-
|
|
164
|
+
<p><strong>Three render-blocking scripts</strong>, an uncompressed hero image and <b>four font weights</b> loaded on every page.</p>
|
|
165
|
+
<!-- /wp:paragraph --></div>
|
|
166
|
+
<!-- /wp:column -->
|
|
167
|
+
<!-- wp:column -->
|
|
168
|
+
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
|
|
169
|
+
<h4><strong>After</strong></h4>
|
|
170
|
+
<!-- /wp:heading -->
|
|
189
171
|
<!-- wp:paragraph -->
|
|
190
|
-
<p>
|
|
191
|
-
<!-- /wp:paragraph
|
|
192
|
-
|
|
193
|
-
<!-- wp:
|
|
194
|
-
|
|
195
|
-
<!--
|
|
196
|
-
|
|
172
|
+
<p>One deferred script, an <b>AVIF hero</b> and two subsetted weights — roughly <strong>a third</strong> of the original weight.</p>
|
|
173
|
+
<!-- /wp:paragraph --></div>
|
|
174
|
+
<!-- /wp:column --></div>
|
|
175
|
+
<!-- /wp:columns -->
|
|
176
|
+
|
|
177
|
+
<!-- wp:media-text {"mediaType":"image"} -->
|
|
178
|
+
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://picsum.photos/600/400" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":4} -->
|
|
179
|
+
<h4>Design and engineering, <b>together</b></h4>
|
|
180
|
+
<!-- /wp:heading -->
|
|
197
181
|
<!-- wp:paragraph -->
|
|
198
|
-
<p>
|
|
199
|
-
<!-- /wp:paragraph
|
|
200
|
-
|
|
182
|
+
<p>The best results come when <strong>designers set the budget</strong> and <strong>engineers protect it</strong>. Pair the two early and <b>revisit the numbers at every review</b>.</p>
|
|
183
|
+
<!-- /wp:paragraph --></div></div>
|
|
184
|
+
<!-- /wp:media-text -->
|
|
185
|
+
|
|
201
186
|
<!-- wp:image {"align":"left","sizeSlug":"large"} -->
|
|
202
|
-
<figure class="wp-block-image alignleft size-large"><img src="https://picsum.photos/300/300" alt=""
|
|
187
|
+
<figure class="wp-block-image alignleft size-large"><img src="https://picsum.photos/300/300" alt=""/><figcaption class="wp-element-caption">Left-aligned figure</figcaption></figure>
|
|
203
188
|
<!-- /wp:image -->
|
|
204
|
-
|
|
189
|
+
|
|
205
190
|
<!-- wp:paragraph -->
|
|
206
|
-
<p>
|
|
191
|
+
<p>Text flows naturally around a left-aligned image, which is ideal for portraits or supporting visuals that should not interrupt the reading rhythm. Notice how the paragraph keeps its measure while the figure sits to the side. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt lobortis feugiat vivamus at.</p>
|
|
207
192
|
<!-- /wp:paragraph -->
|
|
208
|
-
|
|
193
|
+
|
|
209
194
|
<!-- wp:image {"align":"right","sizeSlug":"large"} -->
|
|
210
195
|
<figure class="wp-block-image alignright size-large"><img src="https://picsum.photos/300/200" alt=""/></figure>
|
|
211
196
|
<!-- /wp:image -->
|
|
212
|
-
|
|
197
|
+
|
|
213
198
|
<!-- wp:paragraph -->
|
|
214
|
-
<p>
|
|
199
|
+
<p>A right-aligned image mirrors the effect on the opposite side. Use the two sparingly and in alternation so the page keeps a steady left edge for the body copy. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Interdum consectetur libero id faucibus nisl tincidunt eget. Ultrices vitae auctor eu augue.</p>
|
|
215
200
|
<!-- /wp:paragraph -->
|
|
216
|
-
|
|
217
|
-
<!-- wp:
|
|
218
|
-
<
|
|
219
|
-
<!-- /wp:
|
|
220
|
-
|
|
201
|
+
|
|
202
|
+
<!-- wp:image {"linkDestination":"custom","sizeSlug":"large"} -->
|
|
203
|
+
<figure class="wp-block-image aligncenter size-large"><a href="https://terrahq.com"><img src="https://picsum.photos/1200/600" alt=""/></a><figcaption class="wp-element-caption">A centred, linked image — the wrapping anchor does not inherit link styles.</figcaption></figure>
|
|
204
|
+
<!-- /wp:image -->
|
|
205
|
+
|
|
221
206
|
<!-- wp:paragraph -->
|
|
222
|
-
<p>
|
|
207
|
+
<p>Key facts read best as a compact two-column reference rather than buried in prose:</p>
|
|
223
208
|
<!-- /wp:paragraph -->
|
|
224
|
-
|
|
225
|
-
<!-- wp:
|
|
226
|
-
<figure class="wp-block-
|
|
227
|
-
<!-- /wp:
|
|
228
|
-
|
|
209
|
+
|
|
210
|
+
<!-- wp:table -->
|
|
211
|
+
<figure class="wp-block-table"><table><tbody><tr><td><strong>Performance budget</strong></td><td>Set a hard limit (e.g. 150 KB of JS) and <b>fail the build</b> when it is exceeded.</td></tr><tr><td><strong>Image policy</strong></td><td>Modern formats, responsive sizes and <b>lazy-loading</b> by default.</td></tr><tr><td><strong>Fonts</strong></td><td>Self-host, subset, and cap the number of weights.</td></tr></tbody></table><figcaption class="wp-element-caption">A <strong>starter checklist</strong> you can adapt per project.</figcaption></figure>
|
|
212
|
+
<!-- /wp:table -->
|
|
213
|
+
|
|
214
|
+
<!-- ========================= MEDIA ========================= -->
|
|
215
|
+
<!-- wp:heading {"level":4} -->
|
|
216
|
+
<h4>Watch it in <strong>action</strong></h4>
|
|
217
|
+
<!-- /wp:heading -->
|
|
218
|
+
|
|
229
219
|
<!-- wp:paragraph -->
|
|
230
|
-
<p>
|
|
220
|
+
<p>Embedded media is convenient, but it is also heavy — load it on demand and always provide a caption for context.</p>
|
|
231
221
|
<!-- /wp:paragraph -->
|
|
232
|
-
|
|
233
|
-
<!-- wp:
|
|
234
|
-
<figure class="wp-block-
|
|
235
|
-
|
|
236
|
-
|
|
222
|
+
|
|
223
|
+
<!-- wp:embed {"url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
|
|
224
|
+
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
|
|
225
|
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
226
|
+
</div></figure>
|
|
227
|
+
<!-- /wp:embed -->
|
|
228
|
+
|
|
237
229
|
<!-- wp:paragraph -->
|
|
238
|
-
<p>
|
|
230
|
+
<p>When you control the source file, a <strong>native video</strong> avoids the third-party player entirely. It is the <b>lightest</b> option for short, muted loops and product demos.</p>
|
|
239
231
|
<!-- /wp:paragraph -->
|
|
240
|
-
|
|
241
|
-
<!-- wp:
|
|
242
|
-
<figure class="wp-block-
|
|
243
|
-
<!-- /wp:
|
|
244
|
-
|
|
232
|
+
|
|
233
|
+
<!-- wp:video -->
|
|
234
|
+
<figure class="wp-block-video"><video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video><figcaption class="wp-element-caption">A short, <b>self-hosted</b> clip — lighter than most third-party players.</figcaption></figure>
|
|
235
|
+
<!-- /wp:video -->
|
|
236
|
+
|
|
237
|
+
<!-- ========================= WRAP UP ========================= -->
|
|
238
|
+
<!-- wp:heading {"level":5} -->
|
|
239
|
+
<h5>Where to go <b>next</b></h5>
|
|
240
|
+
<!-- /wp:heading -->
|
|
241
|
+
|
|
242
|
+
<!-- wp:paragraph -->
|
|
243
|
+
<p>Start small: pick <strong>one page</strong>, set a budget, and ship a <b>measurable improvement</b> this week. Momentum compounds.</p>
|
|
244
|
+
<!-- /wp:paragraph -->
|
|
245
|
+
|
|
246
|
+
<!-- wp:buttons -->
|
|
247
|
+
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"><!-- wp:button -->
|
|
248
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Read the docs</a></div>
|
|
249
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">See the checklist</a></div>
|
|
250
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Browse examples</a></div>
|
|
251
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Join the newsletter</a></div>
|
|
252
|
+
<!-- /wp:button --></div>
|
|
253
|
+
<!-- /wp:buttons -->
|
|
254
|
+
|
|
255
|
+
<!-- wp:separator -->
|
|
256
|
+
<hr class="wp-block-separator has-alpha-channel-opacity"/>
|
|
257
|
+
<!-- /wp:separator -->
|
|
258
|
+
|
|
259
|
+
<!-- wp:separator {"className":"is-style-wide"} -->
|
|
260
|
+
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
|
|
261
|
+
<!-- /wp:separator -->
|
|
262
|
+
|
|
263
|
+
<!-- wp:separator {"className":"is-style-dots"} -->
|
|
264
|
+
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dots"/>
|
|
265
|
+
<!-- /wp:separator -->
|
|
266
|
+
|
|
267
|
+
<!-- wp:heading {"level":6} -->
|
|
268
|
+
<h6>A note on <strong>tooling</strong></h6>
|
|
269
|
+
<!-- /wp:heading -->
|
|
270
|
+
|
|
245
271
|
<!-- wp:paragraph -->
|
|
246
|
-
<p>
|
|
272
|
+
<p>The techniques here are framework-agnostic. Whether you build with WordPress, a static site generator or a custom stack, the budget and the measurements are what keep you honest.</p>
|
|
247
273
|
<!-- /wp:paragraph -->
|
|
248
|
-
|
|
274
|
+
|
|
275
|
+
<!-- wp:buttons -->
|
|
276
|
+
<div class="wp-block-buttons"><!-- wp:button -->
|
|
277
|
+
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Get started</a></div>
|
|
278
|
+
<!-- /wp:button --></div>
|
|
279
|
+
<!-- /wp:buttons -->
|
|
280
|
+
|
|
249
281
|
<!-- wp:footnote -->
|
|
250
|
-
<p class="footnote">
|
|
282
|
+
<p class="footnote">Figures in this article are illustrative. Methodology and sources are available on request, and <strong>all benchmarks</strong> were taken on a mid-range device over a throttled 4G connection to reflect real-world conditions rather than ideal ones.</p>
|
|
251
283
|
<!-- /wp:footnote -->
|
|
252
|
-
|
|
284
|
+
|
|
285
|
+
</div>
|
|
253
286
|
</div>
|
|
254
287
|
</div>
|
|
255
288
|
</div>
|
|
256
289
|
</section>
|
|
257
|
-
|
|
258
290
|
|
|
259
291
|
</main>
|
|
260
|
-
|
|
261
292
|
</body>
|
|
262
|
-
</html>
|
|
293
|
+
</html>
|
package/package.json
CHANGED
package/readme/blocks/Button.md
CHANGED
|
@@ -1,31 +1,51 @@
|
|
|
1
1
|
# Button
|
|
2
2
|
|
|
3
|
-
Here are the styling options for a button.
|
|
3
|
+
Here are the styling options for a button (the `wp-block-button` block). Just for WP.
|
|
4
4
|
|
|
5
5
|
## Editable options
|
|
6
6
|
|
|
7
7
|
### className
|
|
8
8
|
|
|
9
|
-
This property
|
|
9
|
+
This property applies styles from an existing class in the project to **every** button (the `.wp-block-button__link`). That class may include button styles.
|
|
10
10
|
|
|
11
|
-
The value must be a class that exists and is imported in the stylesheet.
|
|
11
|
+
The value must be a class (or a space-separated list of classes) that exists and is imported in the stylesheet.
|
|
12
|
+
|
|
13
|
+
### even-className
|
|
14
|
+
|
|
15
|
+
This property applies a class to the **even** buttons only (`:nth-child(even)`), on top of `className`. It's useful to alternate styles: the odd buttons keep just `className`, and the even ones get `className` + `even-className`.
|
|
16
|
+
|
|
17
|
+
The value must be a class (or a space-separated list of classes) that exists and is imported in the stylesheet.
|
|
12
18
|
|
|
13
19
|
### margin-bottom
|
|
14
20
|
|
|
15
|
-
This property sets the margin-bottom of the
|
|
21
|
+
This property sets the margin-bottom of the buttons block.
|
|
22
|
+
|
|
23
|
+
The value must be a numerical value expressed in any unit.
|
|
24
|
+
|
|
25
|
+
### column-gap
|
|
26
|
+
|
|
27
|
+
This property sets the horizontal gap between buttons. Using it (or `row-gap`) turns the buttons container into a flex layout (`display: flex; flex-wrap: wrap`).
|
|
16
28
|
|
|
17
29
|
The value must be a numerical value expressed in any unit.
|
|
18
30
|
|
|
31
|
+
### row-gap
|
|
32
|
+
|
|
33
|
+
This property sets the vertical gap between buttons when they wrap onto multiple rows. Using it (or `column-gap`) turns the buttons container into a flex layout.
|
|
34
|
+
|
|
35
|
+
The value must be a numerical value expressed in any unit.
|
|
19
36
|
|
|
20
37
|
## SCSS
|
|
21
38
|
|
|
22
39
|
```scss
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
.c--content-X {
|
|
41
|
+
@include make-content-modifier(
|
|
42
|
+
$btn-options: (
|
|
43
|
+
"className": g--btn-01,
|
|
44
|
+
"even-className": g--btn-01--second,
|
|
45
|
+
"margin-bottom": $measure * 4,
|
|
46
|
+
"column-gap": $measure * 2,
|
|
47
|
+
"row-gap": $measure,
|
|
48
|
+
)
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|