FEED Validator

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

• line 60, column 0: content:encoded should not contain iframe tag (12 occurrences) [help]

  		<figure class="wp-block-jetpack-videopress jetpack-videopress-player" styl ...
  

• line 60, column 0: content:encoded should not contain script tag (7 occurrences) [help]

  		<figure class="wp-block-jetpack-videopress jetpack-videopress-player" styl ...
  

• line 121, column 0: content:encoded should not contain data-attachment-id attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-permalink attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-orig-file attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-orig-size attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-comments-opened attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-image-meta attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-image-title attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-image-description attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-image-caption attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-medium-file attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain data-large-file attribute (36 occurrences) [help]

• line 121, column 0: content:encoded should not contain sizes attribute (33 occurrences) [help]

• line 289, column 0: content:encoded should not contain aria-hidden attribute (13 occurrences) [help]

• line 293, column 0: content:encoded should not contain loading attribute (30 occurrences) [help]

• line 927, column 0: content:encoded should not contain data-width attribute [help]

  <figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embe ...
  

• line 927, column 0: content:encoded should not contain data-dnt attribute [help]

  <figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embe ...
  

• line 1240, column 0: item contains more than one enclosure (2 occurrences) [help]

  <enclosure url="http://videos.files.wordpress.com/aYzeSnoq/pattern-library-r ...
  

• line 1297, column 0: style attribute contains potentially dangerous content: grid-template-columns (13 occurrences) [help]

Source: https://wordpress.com/blog/feed/

1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
4. xmlns:dc="http://purl.org/dc/elements/1.1/"
5. xmlns:atom="http://www.w3.org/2005/Atom"
6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
8. xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
9. >
10.  
11. <channel>
12. <title>WordPress.com News</title>
13. <atom:link href="https://wordpress.com/blog/feed/" rel="self" type="application/rss+xml" />
14. <link>https://wordpress.com/blog</link>
15. <description>The latest news on WordPress.com and the WordPress community.</description>
16. <lastBuildDate>Wed, 24 Apr 2024 13:20:37 +0000</lastBuildDate>
17. <language>en</language>
18. <sy:updatePeriod>
19. hourly </sy:updatePeriod>
20. <sy:updateFrequency>
21. 1 </sy:updateFrequency>
22. <generator>http://wordpress.com/</generator>
23. <cloud domain='wordpress.com' port='80' path='/blog/?rsscloud=notify' registerProcedure='' protocol='http-post' />
24. <image>
25. <url>https://secure.gravatar.com/blavatar/4d5d4c4006d86ff465780ec0d2671c0231c8536cc2fa8167aca8a4dd76811795?s=96&#038;d=https%3A%2F%2Fs0.wp.com%2Fi%2Fbuttonw-com.png</url>
26. <title>WordPress.com News</title>
27. <link>https://wordpress.com/blog</link>
28. </image>
29. <atom:link rel="search" type="application/opensearchdescription+xml" href="https://wordpress.com/blog/osd.xml" title="WordPress.com News" />
30. <atom:link rel='hub' href='https://wordpress.com/blog/?pushpress=hub'/>
31. <item>
32. <title>Meet Studio: Your New Favorite Way to Develop WordPress Locally</title>
33. <link>https://wordpress.com/blog/2024/04/24/studio/</link>
34. <comments>https://wordpress.com/blog/2024/04/24/studio/#comments</comments>
36. <dc:creator><![CDATA[Wojtek Naruniec]]></dc:creator>
37. <pubDate>Wed, 24 Apr 2024 13:05:58 +0000</pubDate>
38. <category><![CDATA[Developer Tools]]></category>
39. <category><![CDATA[New Features]]></category>
40. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60952</guid>
41.  
42. <description><![CDATA[Meet Studio by WordPress.com, our new, free, open source local WordPress development environment.]]></description>
43. <content:encoded><![CDATA[
44. <p>Say goodbye to manual tool configuration, slow site setup, and clunky local development workflows, and say hello to <a href="https://developer.wordpress.com/studio/?utm_source=studio_blog_post&amp;utm_medium=referral&amp;utm_campaign=studio_blog_post">Studio by WordPress.com</a>, our new, free, open source local WordPress development environment.</p>
45.  
46.  
47.  
48. <p>We’ve built Studio to be <strong>the fastest and simplest way to build WordPress sites locally</strong>.</p>
49.  
50.  
51.  
52. <p>Designed to empower developers, designers, and site builders, Studio offers a seamless solution for <strong>creating and running WordPress sites directly on your local machine</strong>, as well as<strong> showcasing work-in-progress sites</strong> with your clients, teams, and colleagues.</p>
53.  
54.  
55.  
56. <p>Check out a few of our favorite features in the video below:</p>
57.  
58.  
59.  
60. <figure class="wp-block-jetpack-videopress jetpack-videopress-player" style="" >
61. <div class="jetpack-videopress-player__wrapper"> <div class="jetpack-video-wrapper"><iframe title='VideoPress Video Player' aria-label='VideoPress Video Player' width='720' height='405' src='https://video.wordpress.com/embed/w33AQSIA?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent="true"  allow='clipboard-write' ></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142'></script></div></div>
64. </figure>
66.  
67.  
68. <h2 class="wp-block-heading">A new way to develop WordPress locally, available for free</h2>
69.  
70.  
71.  
72. <p>Studio is now available to use for free on Mac*, and you can get up and running with a new local site in just a few minutes:</p>
73.  
74.  
75.  
76. <ol>
77. <li><a href="https://developer.wordpress.com/studio/?utm_source=studio_blog_post&amp;utm_medium=referral&amp;utm_campaign=studio_blog_post">Download Studio for Mac</a>.</li>
78.  
79.  
80.  
81. <li>Install and open Studio.</li>
82.  
83.  
84.  
85. <li>Click <em>Add site</em>, and you&#8217;re done!</li>
86. </ol>
87.  
88.  
89.  
90. <p>Once you have a local site running, you can access WP Admin, the Site Editor, global styles, and patterns, all with just one click—and without needing to remember and enter a username or password.</p>
91.  
92.  
93.  
94. <p>You can even open your local sites in your favorite development tools, such as VS Code, PhpStorm, Terminal, and Finder, making it even easier to add Studio to your existing development workflow.</p>
95.  
96.  
97.  
98. <p>Plus, Studio is open source; <a href="http://github.com/automattic/studio">feel free to fork away on GitHub.</a></p>
99.  
100.  
101.  
102. <p>*A Windows version of Studio is coming soon, and you can request early access <a href="https://developer.wordpress.com/studio-for-windows/?utm_source=studio_blog_post&amp;utm_medium=referral&amp;utm_campaign=studio_blog_post">here</a>.&nbsp;</p>
103.  
104.  
105.  
106. <h2 class="wp-block-heading">Effortlessly share your work and keep moving forward</h2>
107.  
108.  
109.  
110. <p>In the realm of web development, showcasing local work has often been a challenge when projects live solely on your machine. With Studio&#8217;s demo sites, you have a convenient, built-in solution for sharing your progress with your team, clients, or designers.&nbsp;</p>
111.  
112.  
113.  
114. <p>These publicly-accessible demo sites, hosted on WordPress.com, are a convenient way to share your work without the need for complex server setups or lengthy deployments. In less than 15 seconds, you can have a shareable link to your local site that stays active for seven days.</p>
115.  
116.  
117.  
118. <p>The best part? Demo sites can be refreshed to reflect your latest build, allowing you to easily convey any updates or changes!</p>
119.  
120.  
121.  
122. <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png"><img data-attachment-id="60971" data-permalink="https://wordpress.com/blog/2024/04/24/studio/studio-wordpress-com-create-demo-local-site/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png" data-orig-size="1600,900" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="studio-wordpress-com-create-demo-local-site" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png?w=720" width="1600" height="900" src="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png" alt="a cursor clicking a blue Add demo site button" class="wp-image-60971" srcset="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png 1600w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png?w=150&amp;h=84 150w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png?w=300&amp;h=169 300w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png?w=768&amp;h=432 768w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png?w=1024&amp;h=576 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></a></figure>
123.  
124.  
125.  
126. <h2 class="wp-block-heading">Breaking free from traditional constraints</h2>
127.  
128.  
129.  
130. <p>Unlike traditional local environment tools like MAMP or Docker, Studio takes a fresh approach to local WordPress development. Studio is a lightweight and efficient solution that minimizes overhead and maximizes simplicity by forgoing the need for web servers, MySQL servers, or virtualization technologies.</p>
131.  
132.  
133.  
134. <p>Behind the scenes, Studio uses <a href="https://wordpress.org/playground/">WordPress Playground</a>, the WebAssembly-powered PHP binary. Thanks to this technology, there is no need to use a traditional web server, making your development experience much quicker and smoother.</p>
135.  
136.  
137.  
138. <p>Say goodbye to complex setups and compatibility issues. Studio makes it easier than ever to build and manage WordPress sites locally.</p>
139.  
140.  
141.  
142. <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png"><img data-attachment-id="60970" data-permalink="https://wordpress.com/blog/2024/04/24/studio/studio-wordpress-com-add-local-site/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png" data-orig-size="1600,896" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="studio-wordpress-com-add-local-site" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png?w=720" width="1600" height="896" src="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png" alt="a cursor clicking a white Add Site button on Studio by WordPress.com" class="wp-image-60970" srcset="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png 1600w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png?w=150&amp;h=84 150w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png?w=300&amp;h=168 300w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png?w=768&amp;h=430 768w, https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png?w=1024&amp;h=573 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></a></figure>
143.  
144.  
145.  
146. <h2 class="wp-block-heading">Let’s get building</h2>
147.  
148.  
149.  
150. <p>At WordPress.com, we&#8217;re committed to making your website management experience seamless. In the last few years alone, we launched <a href="https://developer.wordpress.com/docs/developer-tools/staging-sites/">staging sites</a> with synchronization features, <a href="https://developer.wordpress.com/docs/developer-tools/ssh/">SSH</a> and <a href="https://developer.wordpress.com/docs/developer-tools/wp-cli/">WP-CLI</a> access, <a href="https://developer.wordpress.com/docs/site-performance/global-edge-cache/">global edge caching</a>, <a href="https://developer.wordpress.com/docs/developer-tools/github-deployments/">GitHub Deployments</a>, and more.&nbsp;</p>
151.  
152.  
153.  
154. <p>Studio is yet another powerful feature to add to your toolkit. Stay tuned for more exciting updates, and remember to <a href="https://wordpress.com/blog/">follow our blog</a> to stay in the loop.</p>
155.  
156.  
157.  
158. <p>And, of course, <a href="https://developer.wordpress.com/studio/?utm_source=studio_blog_post&amp;utm_medium=referral&amp;utm_campaign=studio_blog_post">download Studio today</a>. Your local development workflow will thank you.</p>
159.  
160.  
161.  
162. <hr class="wp-block-separator has-alpha-channel-opacity" />
163.  
164.  
165.  
166. <p><em>Major kudos to the Studio team on this launch! Antonio Sejas, Antony Agrios, Kateryna Kodonenko, Philip Jackson, Carlos García Prim, David Calhoun, Derek Blank, Siobhan Bamber, Tanner Stokes, Matt West, Adam Zielinski, Brandon Payton, Berislav Grgicak, Alexa Peduzzi, Jeremy Massel, Gio Lodi, Olivier Halligon, Matthew Denton, Ian Stewart, Daniel Bachhuber, Kei Takagi, Claudiu Filip, Niranjan Uma Shankar, Noemí Sánchez, and our beta testers.</em></p>
167. ]]></content:encoded>
169. <wfw:commentRss>https://wordpress.com/blog/2024/04/24/studio/feed/</wfw:commentRss>
170. <slash:comments>27</slash:comments>
174. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/introducing-studio-wordpress-com-local-development-environment-1.jpg" />
175. <media:content url="https://en-blog.files.wordpress.com/2024/04/introducing-studio-wordpress-com-local-development-environment-1.jpg" medium="image">
176. <media:title type="html">introducing-studio-wordpress-com-local-development-environment</media:title>
177. </media:content>
178.  
179. <media:content url="https://0.gravatar.com/avatar/33e4cd651f3baf18e1a62a9e6c2036a1b2389e42c54d6effa046a1f3334bfeeb?s=96&#38;d=retro" medium="image">
180. <media:title type="html">wojtekn</media:title>
181. </media:content>
182.  
183. <media:content url="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-create-demo-local-site.png" medium="image">
184. <media:title type="html">a cursor clicking a blue Add demo site button</media:title>
185. </media:content>
186.  
187. <media:content url="https://en-blog.files.wordpress.com/2024/04/studio-wordpress-com-add-local-site.png" medium="image">
188. <media:title type="html">a cursor clicking a white Add Site button on Studio by WordPress.com</media:title>
189. </media:content>
190. </item>
191. <item>
192. <title>WordPress Block Patterns Give You Superpowers</title>
193. <link>https://wordpress.com/blog/2024/04/23/block-patterns-video/</link>
194. <comments>https://wordpress.com/blog/2024/04/23/block-patterns-video/#respond</comments>
196. <dc:creator><![CDATA[Jeremy Anderberg]]></dc:creator>
197. <pubDate>Tue, 23 Apr 2024 19:19:44 +0000</pubDate>
198. <category><![CDATA[Patterns]]></category>
199. <category><![CDATA[videos]]></category>
200. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60956</guid>
201.  
202. <description><![CDATA[Few WordPress features offer more return on your learning investment than block patterns. ]]></description>
203. <content:encoded><![CDATA[
204. <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">
205. <div class="jetpack-video-wrapper"><iframe class="youtube-player" width="720" height="405" src="https://www.youtube.com/embed/UCHhb4wqDwk?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></div>
206. </div></figure>
207.  
208.  
209.  
210. <p>With the power of <a href="http://wordpress.com/patterns">block patterns</a> you’ll be a WordPress superstar in no time, whether you’re an establish pro or just starting out. Block patterns are professionally designed layouts that you can add your site in a single click. What makes them especially powerful is that once they’re inserted, you can edit and customize every aspect. (Or, you can leave them be!) </p>
211.  
212.  
213.  
214. <p>In today’s Build and Beyond video, <a href="https://www.pootlepress.com/about-pootlepress/" rel="nofollow">Jamie Marsland</a> walks you through everything you need to go to become a block pattern expert, in under four minutes.</p>
215.  
216.  
217.  
218. <p>Get started on your site today with a free trial: </p>
219.  
220.  
221.  
222. <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
223. <div class="wp-block-button btn-primary"><a class="wp-block-button__link has-white-color has-text-color has-link-color wp-element-button" href="http://wordpress.com/Jamie?utm_source=automattic_referral&amp;utm_medium=referral&amp;utm_campaign=build-and-beyond-patterns">WordPress.com/Jamie</a></div>
224. </div>
225. ]]></content:encoded>
227. <wfw:commentRss>https://wordpress.com/blog/2024/04/23/block-patterns-video/feed/</wfw:commentRss>
228. <slash:comments>0</slash:comments>
232. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/ep11-block-patterns-blog-cover403x.jpg" />
233. <media:content url="https://en-blog.files.wordpress.com/2024/04/ep11-block-patterns-blog-cover403x.jpg" medium="image">
234. <media:title type="html">EP11 - Block Patterns - Blog Cover@3x</media:title>
235. </media:content>
236.  
237. <media:content url="https://2.gravatar.com/avatar/822767612b7ca877eaa7352271a9787c615bffaea1482ce088eda3d5a1b3196f?s=96&#38;d=retro" medium="image">
238. <media:title type="html">jeremyanderberg</media:title>
239. </media:content>
240. </item>
241. <item>
242. <title>10 Amazing WordPress Design Resources</title>
243. <link>https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/</link>
244. <comments>https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/#comments</comments>
246. <dc:creator><![CDATA[Jeremy Anderberg]]></dc:creator>
247. <pubDate>Thu, 18 Apr 2024 20:37:26 +0000</pubDate>
248. <category><![CDATA[Design]]></category>
249. <category><![CDATA[videos]]></category>
250. <category><![CDATA[WordPress]]></category>
251. <category><![CDATA[WordPress.com]]></category>
252. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60911</guid>
253.  
254. <description><![CDATA[Whether you're a design pro or a total newbie, you'll find a great tool in this list that will take your website skills to the next level. ]]></description>
255. <content:encoded><![CDATA[
256. <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">
257. <div class="jetpack-video-wrapper"><iframe class="youtube-player" width="720" height="405" src="https://www.youtube.com/embed/mSnrMx7Uol0?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></div>
258. </div></figure>
259.  
260.  
261.  
262. <p>Designing a beautiful website from scratch can be difficult for developers of all skill levels. Luckily, in today’s Build and Beyond video, <a href="https://www.pootlepress.com/about-pootlepress/" rel="nofollow">Jamie Marsland</a> reveals his ten favorite WordPress design tools and websites to elevate your next build. </p>
263.  
264.  
265.  
266. <p>Get inspiration for your next website&#8217;s design and then start building with WordPress.com. Ready to get going? Click below to embark on your free trial today: </p>
267.  
268.  
269.  
270. <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
271. <div class="wp-block-button btn-primary is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-link-color wp-element-button" href="http://wordpress.com/jamie">WordPress.com/Jamie</a></div>
272. </div>
273.  
274.  
275.  
276. <p>Here are the sites and resources mentioned in the video: </p>
277.  
278.  
279.  
280. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60915" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-26-28-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png" data-orig-size="2748,1474" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.26.28-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=720" width="1024" height="549" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=1024" alt="" class="wp-image-60915 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=2048 2048w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
281. <h3 class="wp-block-heading"><a href="https://haikei.app/">Heikei</a></h3>
282.  
283.  
284.  
285. <p>Stunning backgrounds and visuals </p>
286. </div></div>
287.  
288.  
289.  
290. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
291.  
292.  
293.  
294. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60925" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-44-27-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png" data-orig-size="3382,1586" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.44.27-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=720" loading="lazy" width="1024" height="480" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=1024" alt="" class="wp-image-60925 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=2048 2048w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
295. <h3 class="wp-block-heading"><a href="https://wordpress.com/theme/assembler">WordPress.com Assembler</a></h3>
296.  
297.  
298.  
299. <p>A design-your-own-theme tool using block patterns</p>
300. </div></div>
301.  
302.  
303.  
304. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
305.  
306.  
307.  
308. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60920" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-35-32-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png" data-orig-size="3236,1560" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.35.32-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=720" loading="lazy" width="1024" height="493" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=1024" alt="" class="wp-image-60920 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=2045 2045w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
309. <h3 class="wp-block-heading"><a href="https://css.glass/">Glassmorphism</a> </h3>
310.  
311.  
312.  
313. <p>Free CSS generator for a glass effect</p>
314. </div></div>
315.  
316.  
317.  
318. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
319.  
320.  
321.  
322. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60917" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-31-17-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png" data-orig-size="2830,1544" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.31.17-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=720" loading="lazy" width="1024" height="558" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=1024" alt="" class="wp-image-60917 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=2046 2046w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
323. <h3 class="wp-block-heading"><a href="https://www.designspiration.com/">Designspiration</a></h3>
324.  
325.  
326.  
327. <p>Save and explore inspiring designs</p>
328. </div></div>
329.  
330.  
331.  
332. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
333.  
334.  
335.  
336. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60922" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-38-04-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png" data-orig-size="3422,1536" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.38.04-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=720" loading="lazy" width="1024" height="459" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=1024" alt="" class="wp-image-60922 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=2045 2045w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
337. <h3 class="wp-block-heading"><a href="http://shots.so">Shots</a> </h3>
338.  
339.  
340.  
341. <p>Easy mockups for products and thumbnails </p>
342. </div></div>
343.  
344.  
345.  
346. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
347.  
348.  
349.  
350. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60926" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-47-15-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png" data-orig-size="2522,1582" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.47.15-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=720" loading="lazy" width="1024" height="642" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=1024" alt="" class="wp-image-60926 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=2048 2048w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
351. <h3 class="wp-block-heading"><a href="https://wordpress.com/patterns">WordPress.com Pattern Library</a></h3>
352.  
353.  
354.  
355. <p>WordPress.com&#8217;s free library of block patterns</p>
356. </div></div>
357.  
358.  
359.  
360. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
361.  
362.  
363.  
364. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60932" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-54-24-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png" data-orig-size="3308,1610" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.54.24-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=720" loading="lazy" width="1024" height="498" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=1024" alt="" class="wp-image-60932 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=2046 2046w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
365. <h3 class="wp-block-heading"><a href="http://coolors.co">Coolors</a></h3>
366.  
367.  
368.  
369. <p>Generate color palettes with a click </p>
370. </div></div>
371.  
372.  
373.  
374. <div style="height:9px" aria-hidden="true" class="wp-block-spacer"></div>
375.  
376.  
377.  
378. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60929" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-49-18-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png" data-orig-size="2434,1500" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.49.18-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=720" loading="lazy" width="1024" height="631" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=1024" alt="" class="wp-image-60929 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=2048 2048w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
379. <h3 class="wp-block-heading"><a href="https://wordpress.org/patterns/">WordPress.org Pattern Library</a></h3>
380.  
381.  
382.  
383. <p>Another block pattern library, but with community-uploaded designs </p>
384. </div></div>
385.  
386.  
387.  
388. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
389.  
390.  
391.  
392. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60933" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/screen-shot-2024-04-18-at-1-59-20-pm/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png" data-orig-size="2978,1580" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-18-at-1.59.20-pm" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=720" loading="lazy" width="1024" height="543" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=1024" alt="" class="wp-image-60933 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=2048 2048w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
393. <h3 class="wp-block-heading"><a href="https://www.midjourney.com/">Midjourney</a> </h3>
394.  
395.  
396.  
397. <p>The best AI image generator </p>
398. </div></div>
399.  
400.  
401.  
402. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
403.  
404.  
405.  
406. <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img data-attachment-id="60935" data-permalink="https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/instant-images-hero/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg" data-orig-size="750,422" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="instant-images-hero" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg?w=720" loading="lazy" width="750" height="422" src="https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg?w=750" alt="" class="wp-image-60935 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg 750w, https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg?w=300 300w" sizes="(max-width: 750px) 100vw, 750px" /></figure><div class="wp-block-media-text__content">
407. <h3 class="wp-block-heading"><a href="https://getinstantimages.com/">Instant Images</a> </h3>
408.  
409.  
410.  
411. <p>WordPress plugin to easily find free-to-use images </p>
412. </div></div>
413. ]]></content:encoded>
415. <wfw:commentRss>https://wordpress.com/blog/2024/04/18/wordpress-design-resouces/feed/</wfw:commentRss>
416. <slash:comments>2</slash:comments>
420. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/ep10_-design-resources-blog-cover403x-1.jpg" />
421. <media:content url="https://en-blog.files.wordpress.com/2024/04/ep10_-design-resources-blog-cover403x-1.jpg" medium="image">
422. <media:title type="html">EP10_ Design Resources - Blog Cover@3x (1)</media:title>
423. </media:content>
424.  
425. <media:content url="https://2.gravatar.com/avatar/822767612b7ca877eaa7352271a9787c615bffaea1482ce088eda3d5a1b3196f?s=96&#38;d=retro" medium="image">
426. <media:title type="html">jeremyanderberg</media:title>
427. </media:content>
428.  
429. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.26.28-pm.png?w=1024" medium="image" />
430.  
431. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.44.27-pm.png?w=1024" medium="image" />
432.  
433. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.35.32-pm.png?w=1024" medium="image" />
434.  
435. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.31.17-pm.png?w=1024" medium="image" />
436.  
437. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.38.04-pm.png?w=1024" medium="image" />
438.  
439. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.47.15-pm.png?w=1024" medium="image" />
440.  
441. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.54.24-pm.png?w=1024" medium="image" />
442.  
443. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.49.18-pm.png?w=1024" medium="image" />
444.  
445. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-18-at-1.59.20-pm.png?w=1024" medium="image" />
446.  
447. <media:content url="https://en-blog.files.wordpress.com/2024/04/instant-images-hero.jpeg?w=750" medium="image" />
448. </item>
449. <item>
450. <title>Making 43% of the Web More Dynamic with the WordPress Interactivity API</title>
451. <link>https://wordpress.com/blog/2024/04/17/interactivity-api/</link>
452. <comments>https://wordpress.com/blog/2024/04/17/interactivity-api/#comments</comments>
454. <dc:creator><![CDATA[Even Tobiesen]]></dc:creator>
455. <pubDate>Wed, 17 Apr 2024 12:00:00 +0000</pubDate>
456. <category><![CDATA[Developer Tools]]></category>
457. <category><![CDATA[WordPress]]></category>
458. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60870</guid>
459.  
460. <description><![CDATA[Try it out: WordPress' new Interactivity API provides a standardized way for developers to build interactive, dynamic elements within their websites.]]></description>
461. <content:encoded><![CDATA[
462. <p>Creating rich, engaging, and interactive website experiences is a simple way to surprise, delight, and attract attention from website readers and users. Dynamic interactivity like instant search, form handling, and client-side “app-like” navigation where elements can persist across routes, all without a full page reload, can make the web a more efficient and interesting place for all.</p>
463.  
464.  
465.  
466. <p>But creating those experiences on WordPress hasn’t always been the easiest or most straightforward, often requiring complex JavaScript framework setup and maintenance.&nbsp;</p>
467.  
468.  
469.  
470. <p>Now, with the Interactivity API, WordPress developers have a standardized way for doing that, all built directly into core.&nbsp;</p>
471.  
472.  
473.  
474. <p>The Interactivity API started as <a href="https://github.com/WordPress/block-interactivity-experiments/">an experimental plugin in early 2022</a>, became <a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/">an official proposal in March 2023</a>, and was finally <a href="https://wordpress.org/documentation/wordpress-version/version-6-5/#bring-interactions-to-blocks-with-the-interactivity-api">merged into WordPress core with the release of WordPress 6.5 on April 2, 2024</a>. <strong>It provides an easier, standardized way for WordPress developers to create rich, interactive user experiences with their blocks on the front-end.</strong></p>
475.  
476.  
477.  
478. <h2 class="wp-block-heading">ELI5: The Interactivity API and the Image Block</h2>
479.  
480.  
481.  
482. <p>Several core WordPress blocks, including the Query Loop, Image, and Search blocks, have already adopted the Interactivity API. The <a href="https://wordpress.com/support/wordpress-editor/blocks/image-block/">Image block</a>, in particular, is a great way to show off the Interactivity API in action.&nbsp;</p>
483.  
484.  
485.  
486. <p>At its core, the Image blocks allow you to add an image to a post or page. When a user clicks on an image in a post or page, <a href="https://github.com/WordPress/gutenberg/blob/e1842bb8dadd224ccf2e7499bcff781afb9ce499/packages/block-library/src/image/index.php#L196">the Interactivity API launches a lightbox</a> showing a high-resolution version of the image.</p>
487.  
488.  
489.  
490. <p>The rendering of the Image block is handled server-side. The client-side interactivity, handling resizing and opening the lightbox, is now done with the new API that comes bundled with WordPress. You can bind the client-side interactivity simply by adding the <code>wp-on--click directive</code> to the image element, referencing the <code>showLightbox</code> action in <code>view.js</code>.</p>
491.  
492.  
493.  
494. <p>You might say, “But I could easily do this with some JavaScript!” With the Interactivity API, the code is compact and declarative, and you get the context (local state) to handle the lightbox, resizing, side effects, and all of the other needed work <a href="https://github.com/WordPress/gutenberg/blob/e1842bb8dadd224ccf2e7499bcff781afb9ce499/packages/block-library/src/image/view.js#L38">here in the store object</a>.</p>
495.  
496.  
497. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; auto-links: false; title: ; quick-code: false; notranslate">
498. actions: {
499. showLightbox() {
500. const ctx = getContext();
501.  
502. // Bails out if the image has not loaded yet.
503. if ( ! ctx.imageRef?.complete ) {
504. return;
505. }
506.  
507. // Stores the positons of the scroll to fix it until the overlay is
508. // closed.
509. state.scrollTopReset = document.documentElement.scrollTop;
510. state.scrollLeftReset = document.documentElement.scrollLeft;
511.  
512. // Moves the information of the expaned image to the state.
513. ctx.currentSrc = ctx.imageRef.currentSrc;
514. imageRef = ctx.imageRef;
515. buttonRef = ctx.buttonRef;
516. state.currentImage = ctx;
517. state.overlayEnabled = true;
518.  
519. // Computes the styles of the overlay for the animation.
520. callbacks.setOverlayStyles();
521. },
522. ...
523.  
524. </pre></div>
525.  
526.  
527. <p>The lower-level implementation details, like keeping the server and client side in sync, just work; developers no longer need to account for them.</p>
528.  
529.  
530.  
531. <p>This functionality is possible using vanilla JavaScript, by selecting the element via a query selector, reading data attributes, and manipulating the DOM. But it’s far less elegant, and up until now, there hasn’t been a standardized way in WordPress of handling interactive events like these.</p>
532.  
533.  
534.  
535. <p>With the Interactivity API, <strong>developers have a predictable way to provide interactivity to users on the front-end</strong>. You don’t have to worry about lower-level code for adding interactivity; it’s there in WordPress for you to start using today. Batteries <em>are</em> included.</p>
536.  
537.  
538.  
539. <h2 class="wp-block-heading">How is the Interactivity API different from Alpine, React, or Vue?</h2>
540.  
541.  
542.  
543. <p>Prior to merging the Interactivity API into WordPress core, developers would typically reach for a JavaScript framework to add dynamic features to the user-facing parts of their websites. This approach worked just fine, so why was there a need to standardize it?</p>
544.  
545.  
546.  
547. <p><strong>At its core, the Interactivity API is a lightweight JavaScript library that standardizes the way developers can build interactive HTML elements on WordPress sites.</strong></p>
548.  
549.  
550.  
551. <p>Mario Santos, a developer on the WordPress core team, <a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/">wrote in the Interactivity API proposal</a> that, “With a standard, WordPress can absorb the maximum amount of complexity from the developer because it will handle most of what’s needed to create an interactive block.”</p>
552.  
553.  
554.  
555. <p>The team saw that the gap between what’s possible and what’s practical grew as sites became more complex. The more complex a user experience developers wanted to build, the more blocks needed to interact with each other, and the more difficult it became to build and maintain sites. Developers would spend a lot of time making sure that the client-side and server-side code played nicely together.</p>
556.  
557.  
558.  
559. <p>For a large open-source project with several contributors, having an agreed-upon standard and native way of providing client-side interactivity speeds up development and greatly improves the developer experience.</p>
560.  
561.  
562.  
563. <p><a href="https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/">Five goals shaped the core development team’s decisions</a> as they built the API:&nbsp;</p>
564.  
565.  
566.  
567. <ol>
568. <li><strong>Block-first and PHP-first: </strong>Prioritizing blocks for building sites and server side rendering for better SEO and performance. Combining the best for user and developer experience.</li>
569.  
570.  
571.  
572. <li><strong>Backward-compatible: </strong>Ensuring compatibility with both classic and block themes and optionally with other JavaScript frameworks, though it’s advised to use the API as the primary method. It also works with hooks and internationalization.</li>
573.  
574.  
575.  
576. <li><strong>Declarative and reactive: </strong>Using declarative code to define interactions, listening for changes in data, and updating only relevant parts of the DOM accordingly.</li>
577.  
578.  
579.  
580. <li><strong>Performant: </strong>Optimizing runtime performance to deliver a fast and lightweight user experience.</li>
581.  
582.  
583.  
584. <li><strong>Send less JavaScript: </strong>Reduce the overall amount of JavaScript being sent on the page by providing a common framework that blocks can reuse.&nbsp; So the more that blocks leverage the Interactivity API, the less JavaScript will be sent overall.</li>
585. </ol>
586.  
587.  
588.  
589. <p>Other goals are on the horizon, including improvements to client-side navigation, as you can <a href="https://github.com/WordPress/gutenberg/pull/59707">see in this PR</a>.</p>
590.  
591.  
592.  
593. <h3 class="wp-block-heading">Interactivity API vs. Alpine</h3>
594.  
595.  
596.  
597. <p>The Interactivity API shares a few similarities to <a href="https://alpinejs.dev/">Alpine</a>—a lightweight JavaScript library that allows developers to build interactions into their web projects, often used in WordPress and <a href="https://laravel.com/">Laravel</a> projects.</p>
598.  
599.  
600.  
601. <p>Similar to Alpine, the Interactivity API uses directives directly in HTML and both play nicely with PHP. <em>Unlike</em> Alpine, the Interactivity API is designed to seamlessly integrate with WordPress <em>and</em> support server-side rendering of its directives.</p>
602.  
603.  
604.  
605. <p>With the interactivity API, you can easily generate the view from the server in PHP, and <em>then</em> add client-side interactivity. <strong>This results in less duplication, and its support in WordPress core will lead to less architectural decisions currently required by developers.&nbsp;</strong></p>
606.  
607.  
608.  
609. <p>So while Alpine and the Interactivity API share a broadly similar goal—making it easy for web developers to add interactive elements to a webpage—the Interactivity API is even more plug-and-play for WordPress developers.</p>
610.  
611.  
612.  
613. <h3 class="wp-block-heading">Interactivity API vs. React and Vue</h3>
614.  
615.  
616.  
617. <p>Many developers have opted for <a href="https://react.dev/">React</a> when adding interactivity to WordPress sites because, in the modern web development stack, React is the go-to solution for declaratively handling DOM interactivity. This is familiar territory, and we’re used to using React and JSX when adding custom blocks for Gutenberg.</p>
618.  
619.  
620.  
621. <p>Loading React on the client side can be done, but it leaves you with many decisions: “How should I handle routing? How do I work with the context between PHP and React? What about server-side rendering?”</p>
622.  
623.  
624.  
625. <p>Part of the goal in developing the Interactivity API was the need to <strong>write as little as little JavaScript as possible</strong>, leaving the heavy lifting to PHP, and only shipping JavaScript when necessary.</p>
626.  
627.  
628.  
629. <p>The core team also saw issues with how these frameworks worked in conjunction with WordPress. Developers can use JavaScript frameworks like React and <a href="https://vuejs.org/">Vue</a> to render a block on the front-end that they server-rendered in PHP, for example, but this requires logic duplication and risks exposure to issues with WordPress hooks.</p>
630.  
631.  
632.  
633. <p>For these reasons, <a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#why-preact">among others</a>, the core team preferred <a href="https://preactjs.com/">Preact</a>—a smaller UI framework that requires less JavaScript to download and execute without sacrificing performance. Think of it like React with fewer calories.</p>
634.  
635.  
636.  
637. <p>Luis Herranz, a WordPress Core contributor from Automattic, outlines more details on Alpine vs the Interactivity API’s usage of Preact with a thin layer of directives on top of it <a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#comment-44595">in this comment on the original proposal</a>.</p>
638.  
639.  
640.  
641. <p><strong>Preact only loads if the page source contains an interactive block</strong>, meaning it is not loaded until it’s needed, aligning with the idea of shipping as little JavaScript as possible (and shipping <em>no</em> JavaScript as a default).</p>
642.  
643.  
644.  
645. <p>In the original Interactivity API proposal, you can see the <a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#approaches-considered">run-down and comparison of several frameworks</a> and why Preact was chosen over the others.</p>
646.  
647.  
648.  
649. <h2 class="wp-block-heading">What does the new Interactivity API provide to WordPress developers?</h2>
650.  
651.  
652.  
653. <p>In addition to providing a standardized way to render interactive elements client-side, the Interactivity API also provides developers with directives and a more straightforward way of creating a store object to handle state, side effects, and actions.</p>
654.  
655.  
656.  
657. <figure class="wp-block-image size-large is-resized"><a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/"><img data-attachment-id="60877" data-permalink="https://wordpress.com/blog/2024/04/17/interactivity-api/wordpress-interactivity-api-standard-table/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png" data-orig-size="1084,2048" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="wordpress-interactivity-api-standard-table" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png?w=159" data-large-file="https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png?w=542" loading="lazy" width="1084" height="2048" src="https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png" alt="a table showing the differences of developing interactive elements on WordPress with and without a standard" class="wp-image-60877" style="width:840px;height:auto" srcset="https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png 1084w, https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png?w=79&amp;h=150 79w, https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png?w=159&amp;h=300 159w, https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png?w=768&amp;h=1451 768w, https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png?w=542&amp;h=1024 542w" sizes="(max-width: 1084px) 100vw, 1084px" /></a><figcaption class="wp-element-caption"><em>Graphic from <a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/">Proposal: The Interactivity API – A better developer experience in building interactive blocks on WordPress.org</a></em></figcaption></figure>
658.  
659.  
660.  
661. <h3 class="wp-block-heading">Directives</h3>
662.  
663.  
664.  
665. <p>Directives, a special set of data attributes, allow you to extend HTML markup. You can share data between the server-side-rendered blocks and the client-side, bind values, add click events, and much more. The Interactivity API reference <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#list-of-directives">lists all the available directives</a>.</p>
666.  
667.  
668.  
669. <p>These directives are typically added in the block’s <code>render.php</code> file, and they support all of the WordPress APIs, including <a href="https://developer.wordpress.org/plugins/hooks/actions/">actions</a>, <a href="https://developer.wordpress.org/plugins/hooks/filters/">filters</a>, and <a href="https://developer.wordpress.org/reference/functions/translations_api/">core translation</a> APIs.&nbsp;</p>
670.  
671.  
672.  
673. <p>Here’s the render file of a sample block. Notice the click event (<code>data-wp-on--click="actions.toggle"</code>), and how we bind the value of the aria-expanded attributes via directives.</p>
674.  
675.  
676. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; auto-links: false; title: ; quick-code: false; notranslate">
677. <div
678. <?php echo get_block_wrapper_attributes(); ?>
679. data-wp-interactive="create-block"
680. <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
681. data-wp-watch="callbacks.logIsOpen"
682. >
683. <button
684. data-wp-on--click="actions.toggle"
685. data-wp-bind--aria-expanded="context.isOpen"
686. aria-controls="<?php echo esc_attr( $unique_id ); ?>"
687. >
688. <?php esc_html_e( 'Toggle', 'my-interactive-block' ); ?>
689. </button>
690.  
691. <p
692. id="<?php echo esc_attr( $unique_id ); ?>"
693. data-wp-bind--hidden="!context.isOpen"
694. >
695. <?php
696. esc_html_e( 'My Interactive Block - hello from an interactive block!', 'my-interactive-block' );
697. ?>
698. </p>
699. </div>
700.  
701. </pre></div>
702.  
703.  
704. <p>Do you need to dynamically update an element&#8217;s inner text? The Interactivity API allows you to use <code>data-wp-text</code> on an element, just like you can use v-text in Vue.</p>
705.  
706.  
707.  
708. <p>You can bind a value to a boolean or string using <code>wp-bind–</code> or hook up a click event by using <code>data-wp-on–click</code> on the element. This means you can write PHP and HTML and sprinkle in directives to add interactivity in a declarative way.</p>
709.  
710.  
711.  
712. <h3 class="wp-block-heading">Handling state, side effects, and actions</h3>
713.  
714.  
715.  
716. <p>The second stage of adding interactivity is to create a store, which is usually done in your <code>view.js</code> file. In the store, you’ll have access to the same context as in your <code>render.php</code> file.</p>
717.  
718.  
719.  
720. <p>In the store object, you define actions responding to user interactions. These actions can update the local context or global state, which then re-renders and updates the connected HTML element. You can also define side effects/callbacks, which are similar to actions, but they respond to state changes instead of direct user actions.</p>
721.  
722.  
723. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; auto-links: false; title: ; quick-code: false; notranslate">
724. import { store, getContext } from '@wordpress/interactivity';
725.  
726. store( 'create-block', {
727. actions: {
728. toggle: () => {
729. const context = getContext();
730. context.isOpen = ! context.isOpen;
731. },
732. },
733. callbacks: {
734. logIsOpen: () => {
735. const { isOpen } = getContext();
736. // Log the value of `isOpen` each time it changes.
737. console.log( `Is open: ${ isOpen }` );
738. },
739. },
740. } );
741. </pre></div>
742.  
743.  
744. <h2 class="wp-block-heading">Try it out for yourself</h2>
745.  
746.  
747.  
748. <p>The Interactivity API is production-ready and already running on WordPress.com! With any WordPress.com plan, you’ll have access to the core blocks built on top of the Interactivity API.&nbsp;</p>
749.  
750.  
751.  
752. <p>If you want to build your own interactive blocks, you can scaffold an interactive block by running the below code in your terminal:</p>
753.  
754.  
755. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; auto-links: false; title: ; quick-code: false; notranslate">
756. npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template 
757. </pre></div>
758.  
759.  
760. <p>This will give you an example interactive block, with directives and state handling set up.&nbsp;</p>
761.  
762.  
763.  
764. <p>You can then play around with this locally, using <code>wp-env</code>, using a staging site, or by uploading the plugin directly to your site running <a href="https://wordpress.com/hosting/?ref=blog#pricing-grid">a plugin-eligible WordPress.com plan</a>.&nbsp;</p>
765.  
766.  
767.  
768. <p>If you want a seamless experience between your local dev setup and your WordPress.com site, try using it with <a href="https://wordpress.com/blog/2024/03/18/github-deployments/">our new GitHub Deployments</a> feature! Developing custom blocks is the perfect use case for this new tool.</p>
769.  
770.  
771.  
772. <p>The best way to learn something new is to start building. To kick things off, you may find the following resources a good starting point:</p>
773.  
774.  
775.  
776. <ul>
777. <li><a href="https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/">A first look at the Interactivity API</a></li>
778.  
779.  
780.  
781. <li><a href="https://wpmovies.dev/">Interactivity API WP Movies demo</a> and <a href="https://github.com/WordPress/wp-movies-demo/blob/main/README.md">demo video</a></li>
782.  
783.  
784.  
785. <li><a href="https://github.com/WordPress/gutenberg/issues/60219">Follow along with this task</a> for improvements coming to the Interactivity API</li>
786.  
787.  
788.  
789. <li><a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#list-of-directives">Block editor reference</a></li>
790.  
791.  
792.  
793. <li><a href="https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/">Proposal: Interactivity API</a></li>
794.  
795.  
796.  
797. <li><a href="https://github.com/WordPress/gutenberg/discussions/55642">GitHub issue for showcase</a></li>
798. </ul>
799. ]]></content:encoded>
801. <wfw:commentRss>https://wordpress.com/blog/2024/04/17/interactivity-api/feed/</wfw:commentRss>
802. <slash:comments>1</slash:comments>
806. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/interactivity-api-how-it-makes-web-more-dynamic-standard.jpg" />
807. <media:content url="https://en-blog.files.wordpress.com/2024/04/interactivity-api-how-it-makes-web-more-dynamic-standard.jpg" medium="image">
808. <media:title type="html">interactivity-api-how-it-makes-web-more-dynamic-standard</media:title>
809. </media:content>
810.  
811. <media:content url="https://1.gravatar.com/avatar/7a0b3c331977c611a2131a6aa27800bcad6cb912b35b00383f4c214fb24ecc8d?s=96&#38;d=retro" medium="image">
812. <media:title type="html">etobiesen</media:title>
813. </media:content>
814.  
815. <media:content url="https://en-blog.files.wordpress.com/2024/04/wordpress-interactivity-api-standard-table.png" medium="image">
816. <media:title type="html">a table showing the differences of developing interactive elements on WordPress with and without a standard</media:title>
817. </media:content>
818. </item>
819. <item>
820. <title>WordPress Website Speed Build: The Masters Golf Tournament</title>
821. <link>https://wordpress.com/blog/2024/04/16/masters-tournament-website/</link>
822. <comments>https://wordpress.com/blog/2024/04/16/masters-tournament-website/#respond</comments>
824. <dc:creator><![CDATA[Jeremy Anderberg]]></dc:creator>
825. <pubDate>Tue, 16 Apr 2024 16:43:17 +0000</pubDate>
826. <category><![CDATA[videos]]></category>
827. <category><![CDATA[Masters Tournament]]></category>
828. <category><![CDATA[WordPress]]></category>
829. <category><![CDATA[WordPress.com]]></category>
830. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60891</guid>
831.  
832. <description><![CDATA[What's harder: winning the Masters Tournament or re-creating its website in under 30 minutes? Watch the video and find out. ]]></description>
833. <content:encoded><![CDATA[
834. <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">
835. <div class="jetpack-video-wrapper"><iframe class="youtube-player" width="720" height="405" src="https://www.youtube.com/embed/sLG77-mT9j0?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></div>
836. </div></figure>
837.  
838.  
839.  
840. <p>Congratulations are in order for Scottie Scheffler, the winner of the 2024 Masters Tournament in Augusta, Georgia! In today’s Build and Beyond video, <a href="https://www.pootlepress.com/about-pootlepress/" rel="nofollow">Jamie Marsland</a> takes on the slightly less intimidating task of re-creating the Masters website as quickly as he can. Can he possibly do it in just 30 minutes? </p>
841.  
842.  
843.  
844. <p>Along the way, you’ll learn about sticky navigation menus, image overflows and breakouts, card layouts, and more.</p>
845.  
846.  
847.  
848. <p>Interested in a free trial that allows you to test our all that WordPress.com has to offer? Click below:</p>
849.  
850.  
851.  
852. <div class="wp-block-buttons btn-primary is-layout-flex wp-block-buttons-is-layout-flex">
853. <div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-link-color wp-element-button" href="http://WordPress.com/Jamie?utm_source=automattic_referral&amp;utm_medium=referral&amp;utm_campaign=build-and-beyond-masters">WordPress.com/Jamie</a></div>
854. </div>
855. ]]></content:encoded>
857. <wfw:commentRss>https://wordpress.com/blog/2024/04/16/masters-tournament-website/feed/</wfw:commentRss>
858. <slash:comments>0</slash:comments>
862. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/ep9_-wordpress-speed-build_-the-masters-golf-2024-website-2403x.jpg" />
863. <media:content url="https://en-blog.files.wordpress.com/2024/04/ep9_-wordpress-speed-build_-the-masters-golf-2024-website-2403x.jpg" medium="image">
864. <media:title type="html">EP9_ WordPress Speed Build_ The Masters Golf 2024 website 2@3x</media:title>
865. </media:content>
866.  
867. <media:content url="https://2.gravatar.com/avatar/822767612b7ca877eaa7352271a9787c615bffaea1482ce088eda3d5a1b3196f?s=96&#38;d=retro" medium="image">
868. <media:title type="html">jeremyanderberg</media:title>
869. </media:content>
870. </item>
871. <item>
872. <title>Registering Custom Post Types in the WordPress Admin: Our CloudFest Hackathon Report</title>
873. <link>https://wordpress.com/blog/2024/04/15/custom-post-types-wordpress-admin/</link>
874. <comments>https://wordpress.com/blog/2024/04/15/custom-post-types-wordpress-admin/#comments</comments>
876. <dc:creator><![CDATA[Daniel Bachhuber]]></dc:creator>
877. <pubDate>Mon, 15 Apr 2024 12:00:00 +0000</pubDate>
878. <category><![CDATA[Developer Tools]]></category>
879. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60807</guid>
880.  
881. <description><![CDATA[Let's discuss: What if you could register custom post types and custom fields directly in the WordPress admin?]]></description>
882. <content:encoded><![CDATA[
883. <p>With WordPress today you need to use custom code or a plugin to create a custom post type like “Book” or “Member.” This is a popular need, and there are a variety of approaches; however, one challenge is that the end-user experience can be confusing and non-standardized.</p>
884.  
885.  
886.  
887. <p>A few weeks ago, some Automatticians and I went to the 7th CloudFest Hackathon in Rust, Germany to explore a solution for this. We started hacking on a deeply nerdy project, JSON Schema forms and fields, and ended up with a fascinating approach to an age-old question: <strong>What if you could register custom post types and custom fields directly in the WordPress admin</strong>?</p>
888.  
889.  
890.  
891. <h2 class="wp-block-heading">Forty-eight hours turns an idea into reality</h2>
892.  
893.  
894.  
895. <p>The <a href="https://hackathon.cloudfest.com/">CloudFest Hackathon</a> is an event that allows developers from around the globe to take ideas and turn them into realities.</p>
896.  
897.  
898.  
899. <p>During the Hackathon, teams of developers from various content management systems and hosting companies come together to contribute to projects that align with the core principles of the event: the projects must be <strong>not-for-profit</strong>, <strong>interoperable</strong>, and <strong>open source</strong>.</p>
900.  
901.  
902.  
903. <p>Last year, we worked on a project that allowed us to embed WordPress directly in VS Code. We built the <a href="https://marketplace.visualstudio.com/items?itemName=WordPressPlayground.wordpress-playground">WordPress Playground VS Code extension</a> on top of <a href="http://wordpress.org/playground">WordPress Playground</a>. It uses WebAssembly to run WordPress entirely within the browser, and it <a href="https://developer.wordpress.com/2023/03/20/cfhack2023-wordpress-in-vs-code/">turned out pretty darn slick</a>. </p>
904.  
905.  
906.  
907. <p>This year, we focused on a <a href="https://hackathon.cloudfest.com/project/json-schema-field-form-renderer/">JSON Schema Field/Form Renderer</a>. While most of us explored using JSON Schema to dynamically register admin forms and fields, Dennis Snell and Adam Zieliński decided to take the project one step further! They hacked together a plugin that introduced the ability to register custom post types and custom fields directly from the WordPress admin. More notably, everything happens within the block editor—you have to see it to believe it:</p>
908.  
909.  
910.  
911. <figure class="wp-block-jetpack-videopress jetpack-videopress-player" style="" >
912. <div class="jetpack-videopress-player__wrapper"> <div class="jetpack-video-wrapper"><iframe title='VideoPress Video Player' aria-label='VideoPress Video Player' width='720' height='405' src='https://video.wordpress.com/embed/C7LBNfAu?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent="true"  allow='clipboard-write' ></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142'></script></div></div>
915. </figure>
917.  
918.  
919. <p>This work poses some interesting possibilities for custom post type and custom field implementation because <strong>it could fundamentally change the way low- to no-code WordPress users modify their sites</strong>.</p>
920.  
921.  
922.  
923. <p><a href="https://twitter.com/dbchhbr/status/1769383950923841944">Naturally, I took the idea to Twitter/X</a>:</p>
924.  
925.  
926.  
927. <figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
928. <div class="embed-twitter"><blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">Should WordPress let you register custom post types and custom fields from the admin? <a href="https://twitter.com/hashtag/CFHack2024?src=hash&amp;ref_src=twsrc%5Etfw">#CFHack2024</a></p>&mdash; daniel (@dbchhbr) <a href="https://twitter.com/dbchhbr/status/1769383950923841944?ref_src=twsrc%5Etfw">March 17, 2024</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
929. </div></figure>
930.  
931.  
932.  
933. <p>I got quite a range of responses, ranging from &#8220;Heck Yes! It should have already been a core feature now. Such an integral part of every other site&#8221; to &#8220;Admin should only be for content and user management. Everything else should be configured in code and version controllable.&#8221;</p>
934.  
935.  
936.  
937. <p>So why the range in responses? Let’s discuss.</p>
938.  
939.  
940.  
941. <h3 class="wp-block-heading">It turned out to be pretty simple</h3>
942.  
943.  
944.  
945. <p>Dennis and Adam built our prototype using the following conventions:</p>
946.  
947.  
948.  
949. <ul>
950. <li>A custom post type <code>wp_data_type</code> holds templates for user-defined data types.</li>
951.  
952.  
953.  
954. <li>The title of a post in the <code>wp_data_type</code> defines the name of the new data type. The post itself is the rendering template and comprises any set of normal blocks. Names are given to select block attributes within the post, and these names are mapped into the data type.</li>
955.  
956.  
957.  
958. <li>When creating new posts for the given data type, the locked template is copied from the <code>wp_data_type</code> template, and the block attribute annotations are preserved.</li>
959.  
960.  
961.  
962. <li>Finally, when rendering the <code>wp_data_type</code> template, the attributes are pulled from the individual post of the given data type and spliced into the template.</li>
963. </ul>
964.  
965.  
966.  
967. <p>The fascinating idea is that we don’t have to think about form fields;<strong> blocks already provide a rendering view and a modal editing experience</strong>. We can rely on the fundamental way blocks work and use the very same user experience to create custom data types in a way that users are already familiar with when editing a post or a site.</p>
968.  
969.  
970.  
971. <figure class="wp-block-image size-full"><a href="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg"><img data-attachment-id="60819" data-permalink="https://wordpress.com/blog/2024/04/15/custom-post-types-wordpress-admin/screenshot-24/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg" data-orig-size="4700,1968" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;Screenshot&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;Screenshot&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="Screenshot" data-image-description="" data-image-caption="&lt;p&gt;Screenshot&lt;/p&gt;
972. " data-medium-file="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg?w=720" loading="lazy" width="4700" height="1968" src="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg" alt="An orange arrow pointing to the Content field in the block settings for a custom post type." class="wp-image-60819" srcset="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg 4700w, https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg?w=150&amp;h=63 150w, https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg?w=300&amp;h=126 300w, https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg?w=768&amp;h=322 768w, https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg?w=1024&amp;h=429 1024w" sizes="(max-width: 4700px) 100vw, 4700px" /></a><figcaption class="wp-element-caption"><em>We can provide JSON-LD markup properties to the block editor using our Custom Fields Names block settings.</em></figcaption></figure>
973.  
974.  
975.  
976. <p>Custom <em>post</em> types define custom <em>data</em> types, so we use a template to not only define the data type, but also to provide a default rendering template. Each data attribute within a post type has a field where it’s possible to define that field with its JSON-LD property.&nbsp;</p>
977.  
978.  
979.  
980. <p>For example, say you had a “Book” custom post type. A few <a href="https://schema.org/Book">JSON-LD properties</a> you could define using custom fields are:</p>
981.  
982.  
983.  
984. <ul>
985. <li><code>description</code></li>
986.  
987.  
988.  
989. <li><code>copyrightYear</code></li>
990.  
991.  
992.  
993. <li><code>author</code></li>
994.  
995.  
996.  
997. <li><code>bookEdition</code></li>
998.  
999.  
1000.  
1001. <li><code>bookFormat</code></li>
1002.  
1003.  
1004.  
1005. <li><code>isbn</code></li>
1006.  
1007.  
1008.  
1009. <li><code>numberOfPages</code></li>
1010. </ul>
1011.  
1012.  
1013.  
1014. <p>We also chose to store a copy of each block attribute in the JSON attributes for that block. Since WordPress can now provide a post-to-JSON function, which merges the extracted attributes with the names assigned in the custom post type template, that template may have changed since the custom post was created. This means that no database migrations are necessary to render an updated version of a post.</p>
1015.  
1016.  
1017.  
1018. <figure class="wp-block-jetpack-videopress jetpack-videopress-player" style="" >
1019. <div class="jetpack-videopress-player__wrapper"> <div class="jetpack-video-wrapper"><iframe title='VideoPress Video Player' aria-label='VideoPress Video Player' width='720' height='450' src='https://video.wordpress.com/embed/3gX5rYN7?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent="true"  allow='clipboard-write' ></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142'></script></div></div>
1022. </figure>
1024.  
1025.  
1026. <p>The best part? The WordPress infrastructure that already exists (aka Gutenberg!) <em>defines</em> the data type. Because these custom posts are normal posts, and because they adopt the locked template for the data type definition, they are, in fact, renderable on their own! Even if the template has been updated and only the post itself is rendered, it will still display a meaningful representation of the data type as it was when it was created.</p>
1027.  
1028.  
1029.  
1030. <p>While our original Hackathon project was tailored towards developers and UX designers who would love to see a forms and fields API in WordPress, <strong>this prototype puts more power in the hands of low- to no-code WordPress users</strong>.</p>
1031.  
1032.  
1033.  
1034. <p>It also opens up a world of possibilities for providing a rendering view for <em>any</em> structured data. Imagine uploading a CSV and mapping the column names to block attributes, or connecting to a database or JSON API to map the records in the same way.&nbsp;</p>
1035.  
1036.  
1037.  
1038. <p>For example, if you had a CSV with business names, addresses, a rating, and a description, we could take that template post and insert a map block, a heading block, a star rating block, and a paragraph block and set the attributes to map to the CSV columns. It’s essentially an instant structured data renderer!</p>
1039.  
1040.  
1041.  
1042. <p>But even if we <em>can</em> define custom post types and fields in the editor, <em>should </em>we, as a WordPress community, consider adding it to core?</p>
1043.  
1044.  
1045.  
1046. <h2 class="wp-block-heading">The existential question: Should it exist?</h2>
1047.  
1048.  
1049.  
1050. <p>Adding this kind of functionality into WordPress core could open up a ton of opportunities for the average WordPress user. Instead of needing to get a developer involved to add a custom post type to their site, a user could simply do it themselves and define the necessary fields and structured data attributes.&nbsp;</p>
1051.  
1052.  
1053.  
1054. <p>On the other hand, allowing everyday users, who may not have a full grasp of how custom post types and structured data <em>should</em> work, free reign to create these data types themselves could have detrimental effects on the user experience of their websites. Clunky or incorrect implementation of structured data markup could also cause issues with how search engines crawl these sites, causing unintended negative impacts to search traffic.</p>
1055.  
1056.  
1057.  
1058. <p>Not only that, but as of right now, if a custom post type is accidentally deleted, all of the content posted to that custom post type will no longer be accessible through the admin (even though it will still be stored in the database). The user could think they “lost” their data.</p>
1059.  
1060.  
1061.  
1062. <h2 class="wp-block-heading">Let’s talk about it</h2>
1063.  
1064.  
1065.  
1066. <p>What do you think? Are you in favor of giving website owners the ability to change and customize their custom post types and attributes? Or are there some website features that should always require a more technical hand and implementer?&nbsp;</p>
1067.  
1068.  
1069.  
1070. <p>We’d love to chat with you about your thoughts in the comments below.</p>
1071.  
1072.  
1073.  
1074. <p>For another interesting exploration on a related idea, <a href="https://github.com/WordPress/gutenberg/issues/51373">check out this discussion on GitHub with the core team</a>.</p>
1075.  
1076.  
1077.  
1078. <hr class="wp-block-separator has-alpha-channel-opacity" />
1079.  
1080.  
1081.  
1082. <p><em>Thanks to Lars Gersmann for leading the JSON Schema project with me and to everyone on the Syntax Errors team: Adam Zieliński, Dennis Snell, Julian Haupt, Michael Schmitz, Anja Lang, Thomas Rose, Marko Feldmann, Fabian Genes, Michael Schmitz, Jan Vogt, Lucisu, Maximilian Andre, Marcel Schmitz, and Milana Cap</em>. </p>
1083. ]]></content:encoded>
1085. <wfw:commentRss>https://wordpress.com/blog/2024/04/15/custom-post-types-wordpress-admin/feed/</wfw:commentRss>
1086. <slash:comments>8</slash:comments>
1090. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/custom-post-type-wordpress-editor.jpg" />
1091. <media:content url="https://en-blog.files.wordpress.com/2024/04/custom-post-type-wordpress-editor.jpg" medium="image">
1092. <media:title type="html">custom-post-type-wordpress-editor</media:title>
1093. </media:content>
1094.  
1095. <media:content url="https://2.gravatar.com/avatar/25603e8a104ca34558ae338634a19d995450087cb632f249c2bd8ef51eda7db6?s=96&#38;d=retro" medium="image">
1096. <media:title type="html">danielbachhuber</media:title>
1097. </media:content>
1098.  
1099. <media:content url="https://en-blog.files.wordpress.com/2024/04/description-meta-data-wordpress-custom-post-type-book.jpg" medium="image">
1100. <media:title type="html">An orange arrow pointing to the Content field in the block settings for a custom post type.</media:title>
1101. </media:content>
1102. </item>
1103. <item>
1104. <title>Site-Building Made Simple: Introducing the Public Pattern Library </title>
1105. <link>https://wordpress.com/blog/2024/04/10/pattern-library/</link>
1106. <comments>https://wordpress.com/blog/2024/04/10/pattern-library/#comments</comments>
1108. <dc:creator><![CDATA[Fredrik Rombach Ekelund]]></dc:creator>
1109. <pubDate>Wed, 10 Apr 2024 16:31:40 +0000</pubDate>
1110. <category><![CDATA[New Features]]></category>
1111. <category><![CDATA[Patterns]]></category>
1112. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60700</guid>
1113.  
1114. <description><![CDATA[When it comes to website-building, WordPress themes set your site up for success by providing stylish, preselected options for fonts, colors, and layouts. Even though themes provide the overall aesthetic, you still need to build out the posts, pages, and templates on your site. That&#8217;s where block patterns come in! &#8230;]]></description>
1115. <content:encoded><![CDATA[
1116. <p>When it comes to website-building, <a href="http://wordpress.com/themes">WordPress themes</a> set your site up for success by providing stylish, preselected options for fonts, colors, and layouts. Even though themes provide the overall aesthetic, you still need to build out the posts, pages, and templates on your site. That&#8217;s where block patterns come in!</p>
1117.  
1118.  
1119.  
1120. <p>The <a href="http://wordpress.com/patterns?ref=blog">WordPress.com Pattern Library</a> is your new go-to resource for finding any kind of pattern for your beautiful WordPress website. With hundreds of pre-built patterns to choose from across over a dozen categories, you’ll be covered no matter your website’s specific needs.&nbsp;</p>
1121.  
1122.  
1123.  
1124. <h2 class="wp-block-heading">What are patterns?</h2>
1125.  
1126.  
1127.  
1128. <p><a href="https://wordpress.com/blog/2020/10/28/introducing-patterns/">Block patterns</a> are collections of blocks made to work seamlessly with our modern themes. Need an “About” page? Check. A gallery? Check. A testimonial? Check. How about a newsletter? Check. We have just about anything you’ll need.&nbsp;</p>
1129.  
1130.  
1131.  
1132. <p>Best of all: for each pattern, the fonts, colors, and spacing will adapt to your theme’s settings, making for a cohesive look. Still, patterns aren’t locked or static either—after you&#8217;ve added the pattern to your post, page, or template, you can tweak it however you like.&nbsp;</p>
1133.  
1134.  
1135.  
1136. <h2 class="wp-block-heading">A tour of the Pattern Library&nbsp;</h2>
1137.  
1138.  
1139.  
1140. <p>This new public <a href="http://wordpress.com/patterns?ref=blog">Pattern Library</a> allows you to browse, preview, and easily share or implement whichever design speaks your tastes. Let’s take a look around.&nbsp;</p>
1141.  
1142.  
1143.  
1144. <h3 class="wp-block-heading">Browse all categories&nbsp;</h3>
1145.  
1146.  
1147. <div class="wp-block-image">
1148. <figure class="aligncenter size-large is-resized"><a href="https://en-blog.files.wordpress.com/2024/04/image-3.png"><img loading="lazy" width="1017" height="1024" data-attachment-id="60704" data-permalink="https://wordpress.com/blog/2024/04/10/pattern-library/image-3-18/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-3.png" data-orig-size="1589,1600" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image-3" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-3.png?w=298" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-3.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/image-3.png?w=1017" alt="A screenshot of the &quot;Categories&quot; section on the WordPress.com Pattern Library. " class="wp-image-60704" style="width:692px;height:auto" srcset="https://en-blog.files.wordpress.com/2024/04/image-3.png?w=1017 1017w, https://en-blog.files.wordpress.com/2024/04/image-3.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/image-3.png?w=298 298w, https://en-blog.files.wordpress.com/2024/04/image-3.png?w=768 768w, https://en-blog.files.wordpress.com/2024/04/image-3.png 1589w" sizes="(max-width: 1017px) 100vw, 1017px" /></a></figure></div>
1149.  
1150.  
1151. <p>If you want to explore the Pattern Library and don’t have anything in particular that you’re looking for, click through each category to spark some ideas.&nbsp;</p>
1152.  
1153.  
1154.  
1155. <h3 class="wp-block-heading">Search for what you need&nbsp;</h3>
1156.  
1157.  
1158.  
1159. <figure class="wp-block-jetpack-videopress jetpack-videopress-player" style="" >
1160. <div class="jetpack-videopress-player__wrapper"> <div class="jetpack-video-wrapper"><iframe title='VideoPress Video Player' aria-label='VideoPress Video Player' width='720' height='326' src='https://video.wordpress.com/embed/JU6RmUyb?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent="true"  allow='clipboard-write' ></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142'></script></div></div>
1163. </figure>
1165.  
1166.  
1167. <p>At the top, you’ll find a fast and easy-to-use search box, allowing you to find exactly what you need. This is a great option if you don’t feel like browsing and want to jump right into a solution for your specific needs.&nbsp;</p>
1168.  
1169.  
1170.  
1171. <h3 class="wp-block-heading">Explore page layouts&nbsp;</h3>
1172.  
1173.  
1174.  
1175. <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/04/image-4.png"><img loading="lazy" width="1024" height="855" data-attachment-id="60705" data-permalink="https://wordpress.com/blog/2024/04/10/pattern-library/image-4-11/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-4.png" data-orig-size="1600,1336" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image-4" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-4.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-4.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/image-4.png?w=1024" alt="" class="wp-image-60705" srcset="https://en-blog.files.wordpress.com/2024/04/image-4.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/image-4.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/image-4.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/image-4.png?w=768 768w, https://en-blog.files.wordpress.com/2024/04/image-4.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
1176.  
1177.  
1178.  
1179. <p>Sometimes you just need the components of a post, page, or template: a header, a “Subscribe” box, a store module, etc. Other times, you want to be able to copy and paste an entire page into existence. Scroll down past the categories and you’ll find our full-page patterns for whole pages: About, Blog, Contact, Store, and more.&nbsp;</p>
1180.  
1181.  
1182.  
1183. <h3 class="wp-block-heading">Test the mobile responsiveness for each pattern</h3>
1184.  
1185.  
1186.  
1187. <figure class="wp-block-jetpack-videopress jetpack-videopress-player" style="" >
1188. <div class="jetpack-videopress-player__wrapper"> <div class="jetpack-video-wrapper"><iframe title='VideoPress Video Player' aria-label='VideoPress Video Player' width='720' height='493' src='https://video.wordpress.com/embed/aYzeSnoq?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent="true"  allow='clipboard-write' ></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142'></script></div></div>
1191. </figure>
1193.  
1194.  
1195. <p>When looking through the library on a desktop or laptop device, you’ll see a gray vertical bar next to each pattern. That’s a nifty little slider that we’ve built into the library which allows you to see how each pattern responds to different screen sizes. Using your cursor to move the bar to the left, you’ll see what that design looks like on a mobile device; in the middle is where most tablets fall; and scroll back all the way to the right for the desktop/laptop version.&nbsp;</p>
1196.  
1197.  
1198.  
1199. <h3 class="wp-block-heading">Copy and paste to your website&nbsp;</h3>
1200.  
1201.  
1202.  
1203. <figure class="wp-block-jetpack-videopress jetpack-videopress-player" style="" >
1204. <div class="jetpack-videopress-player__wrapper"> <div class="jetpack-video-wrapper"><iframe title='VideoPress Video Player' aria-label='VideoPress Video Player' width='720' height='366' src='https://video.wordpress.com/embed/dbzMN94j?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent="true"  allow='clipboard-write' ></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142'></script></div></div>
1207. </figure>
1209.  
1210.  
1211. <p>Like what you see? Simply click the blue “Copy pattern” button, open the WordPress.com editor to the post, page, or template you’re working on, and paste the design. It’s that easy. Once inserted, you can customize each block as needed using the right sidebar.&nbsp;</p>
1212.  
1213.  
1214.  
1215. <h2 class="wp-block-heading">Your new favorite page-building tool</h2>
1216.  
1217.  
1218.  
1219. <p>The Pattern Library is especially useful if you build websites for clients. Each pattern is built to work with any theme that follows our <a href="https://developer.wordpress.com/docs/developer-tools/block-patterns/#building-with-patterns">technical standards</a>, speeding up page-building not just for you but also for your clients—all while maintaining the overall style of your theme.&nbsp;</p>
1220.  
1221.  
1222.  
1223. <p>In concrete terms, this means that our patterns take font, color, and spacing settings from the theme itself rather than using standard presets. This makes it far less likely for a site to break (or just look <em>off</em>) when you—or a client—experiment and make updates.&nbsp;</p>
1224.  
1225.  
1226.  
1227. <p>Our goal is always to make your life both easier and more beautiful. This new resource does just that. Check out the <a href="http://wordpress.com/patterns?ref=blog">WordPress.com Pattern Library</a> today to enhance your website-building experience!&nbsp;</p>
1228.  
1229.  
1230.  
1231. <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
1232. <div class="wp-block-button btn-primary"><a class="wp-block-button__link has-white-color has-text-color has-link-color wp-element-button" href="http://wordpress.com/patterns?ref=blog">Take me to the patterns!</a></div>
1233. </div>
1234. ]]></content:encoded>
1236. <wfw:commentRss>https://wordpress.com/blog/2024/04/10/pattern-library/feed/</wfw:commentRss>
1237. <slash:comments>9</slash:comments>
1239. <enclosure url="http://videos.files.wordpress.com/JU6RmUyb/wordpress.com-pattern-libary-search.mov" length="54680180" type="video/quicktime" />
1240. <enclosure url="http://videos.files.wordpress.com/aYzeSnoq/pattern-library-resize.mov" length="13981755" type="video/quicktime" />
1241. <enclosure url="http://videos.files.wordpress.com/dbzMN94j/add-pattern-via-pattern-library.mov" length="15434695" type="video/quicktime" />
1242.  
1244. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/pattern-library-wordpress-com-1.png" />
1245. <media:content url="https://en-blog.files.wordpress.com/2024/04/pattern-library-wordpress-com-1.png" medium="image">
1246. <media:title type="html">pattern-library-wordpress-com</media:title>
1247. </media:content>
1248.  
1249. <media:content url="https://1.gravatar.com/avatar/4e3b2cd0a23004f91963c6392dccc73190742f52cf93eead2d50ff448860dea2?s=96&#38;d=retro" medium="image">
1250. <media:title type="html">f26d</media:title>
1251. </media:content>
1252.  
1253. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-3.png?w=1017" medium="image">
1254. <media:title type="html">A screenshot of the &#034;Categories&#034; section on the WordPress.com Pattern Library. </media:title>
1255. </media:content>
1256.  
1257. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-4.png?w=1024" medium="image" />
1258. </item>
1259. <item>
1260. <title>10 WordPress Influencers to Follow in 2024  </title>
1261. <link>https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/</link>
1262. <comments>https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/#comments</comments>
1264. <dc:creator><![CDATA[Jeremy Anderberg]]></dc:creator>
1265. <pubDate>Tue, 09 Apr 2024 19:18:02 +0000</pubDate>
1266. <category><![CDATA[Resources]]></category>
1267. <category><![CDATA[videos]]></category>
1268. <category><![CDATA[Learn WordPress]]></category>
1269. <category><![CDATA[WordPress]]></category>
1270. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60723</guid>
1271.  
1272. <description><![CDATA[If you’re at all interested in or curious about WordPress, these are folks to pay attention to.]]></description>
1273. <content:encoded><![CDATA[
1274. <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">
1275. <div class="jetpack-video-wrapper"><iframe class="youtube-player" width="720" height="405" src="https://www.youtube.com/embed/hStluPjpRoI?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></div>
1276. </div></figure>
1277.  
1278.  
1279.  
1280. <p>In this “Build and Beyond” video, <a href="https://www.pootlepress.com/about-pootlepress/" rel="nofollow">Jamie Marsland</a> highlights 10 WordPressers to keep an eye on in 2024.&nbsp;</p>
1281.  
1282.  
1283.  
1284. <p>A couple of weeks ago, we shared a list of <a href="https://wordpress.com/blog/2024/03/26/wordpress-developers-to-follow-2024/">15 WordPress developers you should follow</a> to stay on top of WordPress development news and tips. This video broadens the scope and features folks worth following, regardless of your role or experience with WordPress. If you’re at all interested in or curious about WordPress, these are folks to pay attention to.</p>
1285.  
1286.  
1287.  
1288. <p>Interested in a free trial that allows you to test our all that WordPress.com has to offer? Click below: </p>
1289.  
1290.  
1291.  
1292. <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
1293. <div class="wp-block-button btn-primary"><a class="wp-block-button__link has-white-color has-text-color has-link-color wp-element-button" href="https://wordpress.com/jamie?ref=blog">WordPress.com/Jamie</a></div>
1294. </div>
1295.  
1296.  
1297.  
1298. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="898" height="898" data-attachment-id="60727" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/remkus-devries/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg" data-orig-size="898,898" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="remkus-devries" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=898" alt="" class="wp-image-60727 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg 898w, https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=768 768w" sizes="(max-width: 898px) 100vw, 898px" /></figure><div class="wp-block-media-text__content">
1299. <h3 class="wp-block-heading"><a href="https://remkusdevries.com/">Remkus de Vries</a></h3>
1300.  
1301.  
1302.  
1303. <p>Remkus is a well-known figure in the WordPress community, recognized for his contributions to WordPress development and his overall expertise in web technology.</p>
1304.  
1305.  
1306.  
1307. <p><a href="https://remkusdevries.com/">Website</a> | <a href="https://www.youtube.com/@remkusdevries">YouTube</a></p>
1308. </div></div>
1309.  
1310.  
1311.  
1312. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="900" height="900" data-attachment-id="60729" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/kevin-geary/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg" data-orig-size="900,900" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="kevin-geary" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=900" alt="" class="wp-image-60729 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg 900w, https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=768 768w" sizes="(max-width: 900px) 100vw, 900px" /></figure><div class="wp-block-media-text__content">
1313. <h3 class="wp-block-heading"><a href="https://geary.co/">Kevin Geary</a></h3>
1314.  
1315.  
1316.  
1317. <p>Kevin helps digital agency owners, freelancers, and web designers to learn best practices for UX/UI design, development, and CSS.</p>
1318.  
1319.  
1320.  
1321. <p><a href="https://geary.co/">Website</a> | <a href="https://www.youtube.com/@Gearyco">YouTube</a></p>
1322. </div></div>
1323.  
1324.  
1325.  
1326. <div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div>
1327.  
1328.  
1329.  
1330. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="900" height="900" data-attachment-id="60763" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/tyler-moore/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg" data-orig-size="900,900" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="tyler-moore" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=900" alt="" class="wp-image-60763 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg 900w, https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=768 768w" sizes="(max-width: 900px) 100vw, 900px" /></figure><div class="wp-block-media-text__content">
1331. <h3 class="wp-block-heading"><strong><strong><a href="http://tyler.com">Tyler Moore</a></strong></strong></h3>
1332.  
1333.  
1334.  
1335. <p>Tyler has free video lessons on YouTube that teach people how to create their own professional website without any coding experience.</p>
1336.  
1337.  
1338.  
1339. <p><a href="http://tyler.com">Website</a> | <a href="https://www.youtube.com/channel/UCvG9V9e1s2lN-hoWeHsDCJQ">YouTube</a></p>
1340. </div></div>
1341.  
1342.  
1343.  
1344. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="824" height="694" data-attachment-id="60733" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/screen-shot-2024-04-09-at-9-50-10-am/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png" data-orig-size="824,694" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="screen-shot-2024-04-09-at-9.50.10-am" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=824" alt="" class="wp-image-60733 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png 824w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=768 768w" sizes="(max-width: 824px) 100vw, 824px" /></figure><div class="wp-block-media-text__content">
1345. <h3 class="wp-block-heading"><a href="https://gutenbergtimes.com">Sabrina Zeidan</a></h3>
1346.  
1347.  
1348.  
1349. <p>Sabrina is a WordPress performance engineer, who’s daily work is to speed up WordPress websites, plugins, and themes.</p>
1350.  
1351.  
1352.  
1353. <p><a href="https://www.youtube.com/@SabrinaZeidan">YouTube</a></p>
1354. </div></div>
1355.  
1356.  
1357.  
1358. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="720" height="717" data-attachment-id="60738" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/mike-mcalister-2/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg" data-orig-size="1037,1034" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="Mike McAlister" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=720" alt="" class="wp-image-60738 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=720 720w, https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=768 768w, https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg 1037w" sizes="(max-width: 720px) 100vw, 720px" /></figure><div class="wp-block-media-text__content">
1359. <h3 class="wp-block-heading"><a href="https://mikemcalister.com/">Mike McAlister</a></h3>
1360.  
1361.  
1362.  
1363. <p>Mike is a designer and principal software engineer from the USA. He builds killer products and brands that people love, including the fantastic Ollie WordPress theme.</p>
1364.  
1365.  
1366.  
1367. <p><a href="https://mikemcalister.com/">Website</a> | <a href="https://twitter.com/mikemcalister">X (Twitter)</a></p>
1368. </div></div>
1369.  
1370.  
1371.  
1372. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="225" height="225" data-attachment-id="60741" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/jonathan-jernigan/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg" data-orig-size="225,225" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="jonathan-jernigan" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg?w=225" data-large-file="https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg?w=225" src="https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg?w=225" alt="" class="wp-image-60741 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg 225w, https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg?w=150 150w" sizes="(max-width: 225px) 100vw, 225px" /></figure><div class="wp-block-media-text__content">
1373. <h3 class="wp-block-heading"><a href="https://jonathanjernigan.com/">Jonathan Jernigan</a></h3>
1374.  
1375.  
1376.  
1377. <p>Jonathan runs a small web development agency, creates courses, and makes YouTube videos. He started is WordPress-focused YouTube channel in late 2018.</p>
1378.  
1379.  
1380.  
1381. <p><a href="https://jonathanjernigan.com/">Website</a> | <a href="https://www.youtube.com/@Permaslug">YouTube</a></p>
1382. </div></div>
1383.  
1384.  
1385.  
1386. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="360" height="360" data-attachment-id="60743" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/birgit-pauli-haack/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg" data-orig-size="360,360" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="birgit-pauli-haack" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg?w=360" src="https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg?w=360" alt="" class="wp-image-60743 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg 360w, https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg?w=300 300w" sizes="(max-width: 360px) 100vw, 360px" /></figure><div class="wp-block-media-text__content">
1387. <h3 class="wp-block-heading"><strong><a href="https://gutenbergtimes.com">Birgit Pauli-Haack</a></strong></h3>
1388.  
1389.  
1390.  
1391. <p>Birgit works as developer advocate for WordPress, curates community voices on <em>Gutenberg Times</em>, and co-hosts the <em><a href="https://pca.st/7O43">Gutenberg Changelog</a></em> podcast.</p>
1392.  
1393.  
1394.  
1395. <p><a href="https://gutenbergtimes.com">Website</a> | <a href="https://twitter.com/bph">X (Twitter)</a></p>
1396. </div></div>
1397.  
1398.  
1399.  
1400. <div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div>
1401.  
1402.  
1403.  
1404. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="720" height="720" data-attachment-id="60750" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/david-mccan/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg" data-orig-size="900,900" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="David McCan" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=720" alt="" class="wp-image-60750 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=720 720w, https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=768 768w, https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg 900w" sizes="(max-width: 720px) 100vw, 720px" /></figure><div class="wp-block-media-text__content">
1405. <h3 class="wp-block-heading"><strong><a href="https://www.davidmccan.com/">David McCan</a></strong></h3>
1406.  
1407.  
1408.  
1409. <p>For the past 20 years David has worked professionally developing websites and in IT management.</p>
1410.  
1411.  
1412.  
1413. <p><a href="https://www.davidmccan.com/">Website</a> | <a href="https://www.facebook.com/groups/dynamicwordpress">Facebook</a></p>
1414. </div></div>
1415.  
1416.  
1417.  
1418. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="956" height="955" data-attachment-id="60753" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/paul-charlton/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/paul-charlton.png" data-orig-size="956,955" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="paul-charlton" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=956" alt="" class="wp-image-60753 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/paul-charlton.png 956w, https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=768 768w" sizes="(max-width: 956px) 100vw, 956px" /></figure><div class="wp-block-media-text__content">
1419. <h3 class="wp-block-heading"><strong><a href="https://wptuts.co.uk/">Paul Charlton</a></strong></h3>
1420.  
1421.  
1422.  
1423. <p>Paul has over 15 years of commercial web design and development experience working on a large range of diverse projects, with clients ranging from start-ups to blue-chip companies.</p>
1424.  
1425.  
1426.  
1427. <p><a href="https://wptuts.co.uk/">Website</a> | <a href="https://www.youtube.com/@WPTuts">YouTube</a></p>
1428. </div></div>
1429.  
1430.  
1431.  
1432. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="605" height="603" data-attachment-id="60758" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/matt-medeiros/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg" data-orig-size="605,603" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="matt-medeiros" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg?w=605" src="https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg?w=605" alt="" class="wp-image-60758 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg 605w, https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg?w=300 300w" sizes="(max-width: 605px) 100vw, 605px" /></figure><div class="wp-block-media-text__content">
1433. <h3 class="wp-block-heading"><strong><strong><a href="https://thewpminute.com/">Matt Medeiros</a></strong></strong></h3>
1434.  
1435.  
1436.  
1437. <p>The WP Minute, founded by Matt, is a website dedicated to delivering the most important news and topics from the WordPress ecosystem, keeping WordPress professionals informed, educated, and entertained.</p>
1438.  
1439.  
1440.  
1441. <p><a href="https://thewpminute.com/">Website</a> | <a href="https://thewpminute.com/category/wp-minute-podcast/">Podcast</a></p>
1442. </div></div>
1443.  
1444.  
1445.  
1446. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="900" height="900" data-attachment-id="60761" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/imran-sadiq/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg" data-orig-size="900,900" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="imran-sadiq" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=900" alt="" class="wp-image-60761 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg 900w, https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=768 768w" sizes="(max-width: 900px) 100vw, 900px" /></figure><div class="wp-block-media-text__content">
1447. <h3 class="wp-block-heading"><strong><strong><a href="https://websquadron.co.uk/">Imran Sadiq</a></strong></strong></h3>
1448.  
1449.  
1450.  
1451. <p>Imran has 17+ years of web design and marketing experience. His <a href="https://www.youtube.com/@WebSquadron">YouTube channel</a> has over 55k YouTube subscribers.</p>
1452.  
1453.  
1454.  
1455. <p><a href="https://websquadron.co.uk/">Website</a> | <a href="https://www.youtube.com/@WebSquadron">YouTube</a></p>
1456. </div></div>
1457.  
1458.  
1459.  
1460. <div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div>
1461.  
1462.  
1463.  
1464. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="1024" height="1024" data-attachment-id="60765" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/rich-tabor/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/rich-tabor.png" data-orig-size="1024,1024" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="rich-tabor" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=1024" alt="" class="wp-image-60765 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/rich-tabor.png 1024w, https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
1465. <h3 class="wp-block-heading"><strong><strong><a href="https://rich.blog/">Rich Tabor</a></strong></strong></h3>
1466.  
1467.  
1468.  
1469. <p>Rich describes himself as a multidisciplinary maker specializing in the intersection of product, design, and engineering.</p>
1470.  
1471.  
1472.  
1473. <p><a href="https://rich.blog/">Website</a> | <a href="https://twitter.com/richard_tabor">X (Twitter)</a></p>
1474. </div></div>
1475.  
1476.  
1477.  
1478. <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:36% auto"><figure class="wp-block-media-text__media"><img loading="lazy" width="900" height="900" data-attachment-id="60767" data-permalink="https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/jamie-marsland/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg" data-orig-size="900,900" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="jamie-marsland" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=900" alt="" class="wp-image-60767 size-full" srcset="https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg 900w, https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=768 768w" sizes="(max-width: 900px) 100vw, 900px" /></figure><div class="wp-block-media-text__content">
1479. <h3 class="wp-block-heading"><strong><strong><a href="https://www.pootlepress.com/about-pootlepress/" rel="nofollow">Jamie Marsland</a></strong></strong></h3>
1480.  
1481.  
1482.  
1483. <p>Jamie has trained over 5,000 people on WordPress in the past 10 years, and he also makes WordPress plugins. His <a href="https://www.youtube.com/@jamiewp">YouTube channel</a> is dedicated to helping people with WordPress Blocks. </p>
1484.  
1485.  
1486.  
1487. <p><a href="https://www.pootlepress.com/about-pootlepress/" rel="nofollow">Website</a> | <a href="https://www.youtube.com/@jamiewp">YouTube</a></p>
1488. </div></div>
1489. ]]></content:encoded>
1491. <wfw:commentRss>https://wordpress.com/blog/2024/04/09/10-wordpress-influencers-2024/feed/</wfw:commentRss>
1492. <slash:comments>3</slash:comments>
1496. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/ep7-10-wordpress-influencers403x.jpg" />
1497. <media:content url="https://en-blog.files.wordpress.com/2024/04/ep7-10-wordpress-influencers403x.jpg" medium="image">
1498. <media:title type="html">EP7 - 10 WordPress Influencers@3x</media:title>
1499. </media:content>
1500.  
1501. <media:content url="https://2.gravatar.com/avatar/822767612b7ca877eaa7352271a9787c615bffaea1482ce088eda3d5a1b3196f?s=96&#38;d=retro" medium="image">
1502. <media:title type="html">jeremyanderberg</media:title>
1503. </media:content>
1504.  
1505. <media:content url="https://en-blog.files.wordpress.com/2024/04/remkus-devries.jpeg?w=898" medium="image" />
1506.  
1507. <media:content url="https://en-blog.files.wordpress.com/2024/04/kevin-geary.jpeg?w=900" medium="image" />
1508.  
1509. <media:content url="https://en-blog.files.wordpress.com/2024/04/tyler-moore.jpeg?w=900" medium="image" />
1510.  
1511. <media:content url="https://en-blog.files.wordpress.com/2024/04/screen-shot-2024-04-09-at-9.50.10-am.png?w=824" medium="image" />
1512.  
1513. <media:content url="https://en-blog.files.wordpress.com/2024/04/mike-mcalister-1.jpeg?w=720" medium="image" />
1514.  
1515. <media:content url="https://en-blog.files.wordpress.com/2024/04/jonathan-jernigan.jpeg?w=225" medium="image" />
1516.  
1517. <media:content url="https://en-blog.files.wordpress.com/2024/04/birgit-pauli-haack.jpeg?w=360" medium="image" />
1518.  
1519. <media:content url="https://en-blog.files.wordpress.com/2024/04/david-mccan.jpeg?w=720" medium="image" />
1520.  
1521. <media:content url="https://en-blog.files.wordpress.com/2024/04/paul-charlton.png?w=956" medium="image" />
1522.  
1523. <media:content url="https://en-blog.files.wordpress.com/2024/04/matt-medeiros.jpeg?w=605" medium="image" />
1524.  
1525. <media:content url="https://en-blog.files.wordpress.com/2024/04/imran-sadiq.jpeg?w=900" medium="image" />
1526.  
1527. <media:content url="https://en-blog.files.wordpress.com/2024/04/rich-tabor.png?w=1024" medium="image" />
1528.  
1529. <media:content url="https://en-blog.files.wordpress.com/2024/04/jamie-marsland.jpeg?w=900" medium="image" />
1530. </item>
1531. <item>
1532. <title>Streamlining Your Content Creation: Adding Images From Your Phone With Ease</title>
1533. <link>https://wordpress.com/blog/2024/04/04/fast-media-uploads/</link>
1534. <comments>https://wordpress.com/blog/2024/04/04/fast-media-uploads/#comments</comments>
1536. <dc:creator><![CDATA[Enej Bajgorić]]></dc:creator>
1537. <pubDate>Thu, 04 Apr 2024 19:35:48 +0000</pubDate>
1538. <category><![CDATA[Jetpack]]></category>
1539. <category><![CDATA[Photos]]></category>
1540. <category><![CDATA[blogging]]></category>
1541. <category><![CDATA[Jetpack app]]></category>
1542. <category><![CDATA[WordPress]]></category>
1543. <category><![CDATA[WordPress.com]]></category>
1544. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60652</guid>
1545.  
1546. <description><![CDATA[We’re excited to share a new feature in the desktop editor and Jetpack mobile app that makes it a breeze to upload media to your WordPress posts and pages.   ]]></description>
1547. <content:encoded><![CDATA[
1548. <p>The internet is rife with small annoyances, which often lead to breakthroughs in user experience. For example, needing to hit “refresh” or “next page” led to infinite scroll, which is now baked into our media consumption habits.&nbsp;</p>
1549.  
1550.  
1551.  
1552. <p>Today, we’re excited to share a new feature in the desktop editor and Jetpack mobile app that eliminates one of those small annoyances and makes it a breeze to upload media to your WordPress posts and pages.&nbsp;&nbsp;&nbsp;</p>
1553.  
1554.  
1555.  
1556. <p>While working in the editor on your laptop or desktop device, you can now seamlessly add photos directly from your phone.&nbsp;</p>
1557.  
1558.  
1559.  
1560. <p>Here’s how to do it:&nbsp;</p>
1561.  
1562.  
1563.  
1564. <ol>
1565. <li><strong>Insert an “Image” or “Gallery” Block on your post/page.&nbsp;</strong></li>
1566.  
1567.  
1568.  
1569. <li><strong>Click “Select Image”:</strong> From the dropdown menu, select “Your Phone.”</li>
1570. </ol>
1571.  
1572.  
1573.  
1574. <figure class="wp-block-image"><img data-attachment-id="60662" data-permalink="https://wordpress.com/blog/2024/04/04/fast-media-uploads/image-2-22/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-2.png" data-orig-size="1308,678" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image-2" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-2.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-2.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/image-2.png" alt="" class="wp-image-60662" /></figure>
1575.  
1576.  
1577.  
1578. <ol start="3">
1579. <li><strong>Use your phone to scan the QR code:</strong> This will automatically open the Jetpack app and then your photo library.&nbsp;</li>
1580.  
1581.  
1582.  
1583. <li><strong>Choose your image(s):</strong> From there, simply click the image or images you wish to add to your post/page.</li>
1584.  
1585.  
1586.  
1587. <li><strong>Click “Add”:</strong> Watch your image(s) automagically appear in your desktop editor.</li>
1588. </ol>
1589.  
1590.  
1591.  
1592. <p>Check it out in action below:</p>
1593.  
1594.  
1595.  
1596. <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">
1597. <div class="jetpack-video-wrapper"><iframe class="youtube-player" width="720" height="405" src="https://www.youtube.com/embed/2uH_mlzxkt4?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></div>
1598. </div></figure>
1599.  
1600.  
1601.  
1602. <p>We hope this will inspire you to snap even more photos and share them with the world.&nbsp;</p>
1603.  
1604.  
1605.  
1606. <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
1607. <div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="https://jetpack.com/app/?campaign=wpcom-media-uploads__post" style="background-color:#008710"><strong>Get the app</strong></a></div>
1608. </div>
1609.  
1610.  
1611.  
1612. <div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
1613. ]]></content:encoded>
1615. <wfw:commentRss>https://wordpress.com/blog/2024/04/04/fast-media-uploads/feed/</wfw:commentRss>
1616. <slash:comments>33</slash:comments>
1620. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/wp-cloud-and-bluehost-deal-blog-header-image403x-2.jpg" />
1621. <media:content url="https://en-blog.files.wordpress.com/2024/04/wp-cloud-and-bluehost-deal-blog-header-image403x-2.jpg" medium="image">
1622. <media:title type="html">WP Cloud and Bluehost deal - Blog Header Image@3x (2)</media:title>
1623. </media:content>
1624.  
1625. <media:content url="https://1.gravatar.com/avatar/4219631a4c265c99eeb168b16dda429b30e418fa05c6d16fcd9a58d72a5cf894?s=96&#38;d=retro" medium="image">
1626. <media:title type="html">blab</media:title>
1627. </media:content>
1628.  
1629. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-2.png" medium="image" />
1630. </item>
1631. <item>
1632. <title>A Visit to Where the Cloud Touches the Ground</title>
1633. <link>https://wordpress.com/blog/2024/04/01/data-center-visit/</link>
1634. <comments>https://wordpress.com/blog/2024/04/01/data-center-visit/#comments</comments>
1636. <dc:creator><![CDATA[Zander]]></dc:creator>
1637. <pubDate>Mon, 01 Apr 2024 21:33:29 +0000</pubDate>
1638. <category><![CDATA[Developer Tools]]></category>
1639. <category><![CDATA[Resources]]></category>
1640. <category><![CDATA[data center]]></category>
1641. <guid isPermaLink="false">http://en.blog.wordpress.com/?p=60590</guid>
1642.  
1643. <description><![CDATA[Zander Rose recently took a visit to one of Automattic's data centers. Here's what he learned about what the cloud looks like in person.]]></description>
1644. <content:encoded><![CDATA[
1645. <p>Hi there! I’m Zander Rose and I’ve recently started at Automattic to work on long-term data preservation and the evolution of our <a href="https://wordpress.com/100-year/">100-Year Plan</a>. Previously, I directed <a href="https://longnow.org/">The Long Now Foundation</a> and have worked on long-term archival projects like <a href="https://rosettaproject.org/">The Rosetta Project</a>, as well as advised/partnered with organizations such as <a href="https://archive.org/">The Internet Archive</a>, <a href="https://www.archmission.org/">Archmission Foundation</a>, <a href="https://archiveprogram.github.com/">GitHub Archive</a>, <a href="https://permanent.org/">Permanent</a>, and <a href="https://sdr.library.stanford.edu/">Stanford Digital Repository</a>. More broadly, I see the content of the Internet, and the open web in particular, as an irreplaceable cultural resource that should be able to last into the deep future—and my main task is to make sure that happens.&nbsp;</p>
1646.  
1647.  
1648.  
1649. <p>I recently took a trip to one of Automattic’s data centers to get a peek at what “the cloud” really looks like. As I was telling my family about what I was doing, it was interesting to note their perception of “the cloud” as a completely ephemeral thing. In reality, the cloud has a massive physical and energy presence, even if most people don&#8217;t see it on a day-to-day basis.&nbsp;</p>
1650.  
1651.  
1652. <div class="wp-block-image">
1653. <figure class="aligncenter size-large is-resized"><a href="https://en-blog.files.wordpress.com/2024/04/image.png"><img loading="lazy" width="1024" height="551" data-attachment-id="60591" data-permalink="https://wordpress.com/blog/2024/04/01/data-center-visit/image-80/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image.png" data-orig-size="1600,862" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image.png?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image.png?w=720" src="https://en-blog.files.wordpress.com/2024/04/image.png?w=1024" alt="map of the world with various points marked as data center locations, and lines between to show the connections " class="wp-image-60591" style="width:750px;height:auto" srcset="https://en-blog.files.wordpress.com/2024/04/image.png?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/image.png?w=150 150w, https://en-blog.files.wordpress.com/2024/04/image.png?w=300 300w, https://en-blog.files.wordpress.com/2024/04/image.png?w=768 768w, https://en-blog.files.wordpress.com/2024/04/image.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Automattic&#8217;s data center network. You can see a real-time <a href="https://automattic.com/automattic-data-centers/">traffic map right here</a>.</figcaption></figure></div>
1654.  
1655.  
1656. <h2 class="wp-block-heading">Watch the video interview </h2>
1657.  
1658.  
1659.  
1660. <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">
1661. <div class="jetpack-video-wrapper"><iframe class="youtube-player" width="720" height="405" src="https://www.youtube.com/embed/oAlUu6BNKvQ?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></div>
1662. </div></figure>
1663.  
1664.  
1665.  
1666. <h2 class="wp-block-heading">A trip to the cloud</h2>
1667.  
1668.  
1669.  
1670. <p>Given the millions of sites hosted by Automattic, figuring out how all that data is currently served and stored was one of the first elements I wanted to understand. I believe that the preservation of as many of these websites as possible will someday be seen as a massive historic and cultural benefit. For this reason, I was thankful to be included on a recent meetup for WordPress.com’s Explorers engineering team, which included a tour of one of Automattic’s data centers.&nbsp;</p>
1671.  
1672.  
1673.  
1674. <p>The tour began with a taco lunch where we met amazing Automatticians and data center hosts Barry and Eugene, from our world-class systems and operations team. These guys are data center ninjas and are deeply knowledgeable, humble, and clearly exactly who you would want caring about your data. </p>
1675.  
1676.  
1677.  
1678. <p>The data center we visited was built out in 2013 and was the first one in which Automattic owned and operated its servers and equipment, rather than farming it out. By building out our own infrastructure, it gives us full control over every bit of data that comes in and out, as well as reduces costs given the large amount of data stored and served. Automattic now has a worldwide network of 27 data centers that provide both proximity and redundancy of content to the users and the company itself.&nbsp;</p>
1679.  
1680.  
1681.  
1682. <p>The physical building we visited is run by a contracted provider, and after passing through many layers of security both inside and outside, we began the tour with the facility manager showing us the physical infrastructure. This building has multiple customers paying for server space, with Automattic being just one of them. They keep technical staff on site that can help with maintenance or updates to the equipment, but, in general, the preference is for Automattic’s staff to be the only ones who touch the equipment, both for cost and security purposes.</p>
1683.  
1684.  
1685.  
1686. <p>The four primary things any data center provider needs to guarantee are uninterruptible power, cooling, data connectivity, and physical security/fire protection. The customer, such as Automattic, sets up racks of servers in the building and is responsible for that equipment, including how it ties into the power, cooling, and internet. This report is thus organized in that order.</p>
1687.  
1688.  
1689.  
1690. <h2 class="wp-block-heading">Power</h2>
1691.  
1692.  
1693.  
1694. <p>On our drive in, we saw the large power substation positioned right on campus (which includes many data center buildings, not just Automattic’s). Barry pointed out this not only means there is a massive amount of power available to the campus, but it also gets electrical feeds from both the east and west power grids, making for redundant power even at the utility level coming into the buildings.</p>
1695.  
1696.  
1697. <div class="wp-block-image">
1698. <figure class="aligncenter size-large is-resized"><a href="https://en-blog.files.wordpress.com/2024/04/image.jpeg"><img loading="lazy" width="800" height="600" data-attachment-id="60594" data-permalink="https://wordpress.com/blog/2024/04/01/data-center-visit/image-81/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image.jpeg" data-orig-size="800,600" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=800" alt="two large generators outside a data center " class="wp-image-60594" style="width:696px;height:auto" srcset="https://en-blog.files.wordpress.com/2024/04/image.jpeg 800w, https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=768 768w" sizes="(max-width: 800px) 100vw, 800px" /></a><figcaption class="wp-element-caption">The data center&#8217;s massive generators.</figcaption></figure></div>
1699.  
1700.  
1701. <p>One of the more unique things about this facility is that instead of battery-based instant backup power, it uses flywheel storage by <a href="https://www.activepower.com/technology/">Active Power</a>. This is basically a series of refrigerator-sized boxes with 600-pound flywheels spinning at 10,000 RPM in a vacuum chamber on precision ceramic bearings. The flywheel acts as a motor most of the time, getting fed power from the network to keep it spinning. Then if the power fails, it switches to generator mode, pulling energy out of the flywheel to keep the power on for the 5-30 seconds it takes for the giant diesel generators outside to kick in. </p>
1702.  
1703.  
1704. <div class="wp-block-image">
1705. <figure class="aligncenter size-large is-resized"><a href="https://en-blog.files.wordpress.com/2024/04/image-1.png"><img loading="lazy" width="637" height="720" data-attachment-id="60593" data-permalink="https://wordpress.com/blog/2024/04/01/data-center-visit/image-1-29/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-1.png" data-orig-size="637,720" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image-1" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-1.png?w=265" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-1.png?w=637" src="https://en-blog.files.wordpress.com/2024/04/image-1.png?w=637" alt="flywheel energy storage device" class="wp-image-60593" style="width:481px;height:auto" srcset="https://en-blog.files.wordpress.com/2024/04/image-1.png 637w, https://en-blog.files.wordpress.com/2024/04/image-1.png?w=133 133w, https://en-blog.files.wordpress.com/2024/04/image-1.png?w=265 265w" sizes="(max-width: 637px) 100vw, 637px" /></a><figcaption class="wp-element-caption">Flywheel energy storage diagram. </figcaption></figure></div>
1706.  
1707.  
1708. <p>Those generators are the size of semi-truck trailers and supply four megawatts each, fueled by 4,500-gallon diesel tanks. That may sound like a lot, but that basically gives them 48 hours of run time before needing more fuel. In the midst of a large disaster, there could be issues with road access and fuel shortages limiting the ability to refuel the generators, but in cases like that, our network of multiple data centers with redundant capabilities will still keep the data flowing.</p>
1709.  
1710.  
1711.  
1712. <h2 class="wp-block-heading">Cooling</h2>
1713.  
1714.  
1715.  
1716. <p>Depending on outside ambient temperatures, cooling is typically around 30% of the power consumption of a data center. The air chilling is done through a series of cooling units supplied by a system of saline water tanks out by the generators.&nbsp;</p>
1717.  
1718.  
1719.  
1720. <p>Barry and Eugene pointed out that without cooling, the equipment will very quickly (in less than an hour) try to lower their power consumption in response to the heat, causing a loss of performance. Barry also said that when they start dropping performance radically, it makes it more difficult to manage than if the equipment simply shut off. But if the cooling comes back soon enough, it allows for faster recovery than if hardware was fully shut off.&nbsp;</p>
1721.  
1722.  
1723.  
1724. <p>Handling the cooling in a data center is a complicated task, but this is one of the core responsibilities of the facility, which they handle very well and with a fair amount of redundancy.</p>
1725.  
1726.  
1727.  
1728. <h2 class="wp-block-heading">Data connectivity</h2>
1729.  
1730.  
1731.  
1732. <p>Data centers can vary in terms of how they connect to the internet. This center allows for multiple providers to come into a main point of entry for the building. </p>
1733.  
1734.  
1735.  
1736. <p>Automattic brings in at least two providers to create redundancy, so every piece of equipment should be able to get power and internet from two or more sources at all times. This connectivity comes into Automattic’s equipment over fiber via overhead raceways that are separate from the power and cooling in the floor. From there it goes into two routers, each connected to all the cabinets in that row.</p>
1737.  
1738.  
1739.  
1740. <h2 class="wp-block-heading">Server area</h2>
1741.  
1742.  
1743.  
1744. <p>As mentioned earlier, this data center is shared among several tenants. This means that each one sets up their own last line of physical security. Some lease an entire data hall to themselves, or use a cage around their equipment; some take it even further by obscuring the equipment so you cannot see it, as well as extending the cage through the subfloor another three feet down so that no one could get in by crawling through that space.</p>
1745.  
1746.  
1747. <div class="wp-block-image">
1748. <figure class="aligncenter"><img data-attachment-id="60603" data-permalink="https://wordpress.com/blog/2024/04/01/data-center-visit/shot-of-modern-data-center-with-multiple-rows-of-operational-server-racks-modern-high-tech-database-super-computer-clean-room/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-2.jpeg" data-orig-size="600,338" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;Getty Images\/iStockphoto&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;Shot of Modern Data Center With Multiple Rows of Operational Server Racks. Modern High-Tech Database Super Computer Clean Room.&quot;,&quot;created_timestamp&quot;:&quot;1538352000&quot;,&quot;copyright&quot;:&quot;Gorodenkoff Productions OU&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;Shot of Modern Data Center With Multiple Rows of Operational Server Racks. Modern High-Tech Database Super Computer Clean Room.&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="Shot of Modern Data Center With Multiple Rows of Operational Server Racks. Modern High-Tech Database Super Computer Clean Room." data-image-description="" data-image-caption="&lt;p&gt;Shot of Modern Data Center With Multiple Rows of Operational Server Racks. Modern High-Tech Database Super Computer Clean Room.&lt;/p&gt;
1749. " data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-2.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-2.jpeg?w=600" src="https://en-blog.files.wordpress.com/2024/04/image-2.jpeg" alt="server closet in a data center" class="wp-image-60603" /></figure></div>
1750.  
1751.  
1752. <p>Automattic’s machines took up the central portion of the data hall we were in, with some room to grow. We started this portion of the tour in the “office&#8221; that Automattic also rents to both store spare parts and equipment, as well as provide a quiet place to work. On this tour it became apparent that working in the actual server rooms is far from ideal. With all the fans and cooling, the rooms are both loud and cold, so in general you want to do as much work outside of there as possible.</p>
1753.  
1754.  
1755.  
1756. <p>What was also interesting about this space is that it showed all the generations of equipment and hard drives that have to be kept up simultaneously. It is not practical to assume that a given generation of hard drives or even connection cables will be available for more than a few years. In general, the plan is to keep all hardware using identical memory, drives, and cables, but that is not always possible. As we saw in the server racks, there is equipment still running from 2013, but these will likely have to be completely swapped in the near future.</p>
1757.  
1758.  
1759.  
1760. <p>Barry also pointed out that different drive tech is used for different types of data. Images are stored on spinning hard drives (which are the cheapest by size, but have moving parts so need more replacement), and the longer lasting solid state disk (SSD) and non-volatile memory (NVMe) technology are used for other roles like caching and databases, where speed and performance are most important.</p>
1761.  
1762.  
1763. <div class="wp-block-image">
1764. <figure class="aligncenter size-large is-resized"><a href="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg"><img loading="lazy" width="1024" height="768" data-attachment-id="60595" data-permalink="https://wordpress.com/blog/2024/04/01/data-center-visit/image-1-30/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg" data-orig-size="1345,1010" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image-1" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=1024" alt="Hardware closet for a data center. " class="wp-image-60595" style="width:683px;height:auto" srcset="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=1024 1024w, https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=768 768w, https://en-blog.files.wordpress.com/2024/04/image-1.jpeg 1345w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">Barry showing us all the bins of hardware they use to maintain the servers.</figcaption></figure></div>
1765.  
1766.  
1767. <p>Barry explained that data at Automattic is stored in multiple places in the same data center, and redundantly again at several other data centers. Even with that much redundancy, a further copy is stored on an outside backup. Each one of the centers Automattic uses has a method of separation, so it is difficult for a single bug to propagate between different facilities. In the last decade, there’s only been one instance where the outside backup had to come into play, and it was for six images. Still, Barry noted that there can never be too many backups.</p>
1768.  
1769.  
1770.  
1771. <h2 class="wp-block-heading">An infrastructure for the future&nbsp;</h2>
1772.  
1773.  
1774.  
1775. <p>And with that, we concluded the tour and I would soon head off to the airport to fly home. The last question Barry asked me was if I thought this would all be around in 100 years. My answer was that something like it most certainly will, but that it would look radically different, and may be situated in parts of the world with more sustainable cooling and energy, as more of the world gets large bandwidth connections.</p>
1776.  
1777.  
1778.  
1779. <p>As I thought about the project of getting all this data to last into the deep future, I was very impressed by what Automattic has built, and believe that as long as business continues as normal, the data is incredibly safe. However, on the chance that things do change, I think developing partnerships with organizations like <a href="https://archive.org/">The Internet Archive</a>, <a href="http://permanent.org">Permanent.org</a>, and perhaps national libraries or large universities will be critically important to help make sure the content of the open web survives well into the future. We could also look at some of the long-term storage systems that store data without the need for power, as well as systems that cannot be changed in the future (as we wonder if AI and censorship may alter what we know to be “facts”). For this, we could look at stable optical systems like <a href="https://piql.com/">Piql</a>, <a href="https://www.microsoft.com/en-us/research/project/project-silica/">Project Silica</a>, and <a href="https://stampertech.com/">Stampertech</a>. It breaks my heart to think the world would have created all this, only for it to be lost. I think we owe it to the future to make sure as much of it as possible has a path to survive.</p>
1780.  
1781.  
1782. <div class="wp-block-image">
1783. <figure class="aligncenter is-resized"><img data-attachment-id="60604" data-permalink="https://wordpress.com/blog/2024/04/01/data-center-visit/image-3-17/" data-orig-file="https://en-blog.files.wordpress.com/2024/04/image-3.jpeg" data-orig-size="1600,1200" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="image-3" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/04/image-3.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/04/image-3.jpeg?w=720" src="https://en-blog.files.wordpress.com/2024/04/image-3.jpeg" alt="Group of Automattic employees taking a group picture at a data center. " class="wp-image-60604" style="width:645px;height:auto" /><figcaption class="wp-element-caption">Our group of Automatticians enjoyed the tour—thank you Barry and Eugene! </figcaption></figure></div>]]></content:encoded>
1785. <wfw:commentRss>https://wordpress.com/blog/2024/04/01/data-center-visit/feed/</wfw:commentRss>
1786. <slash:comments>9</slash:comments>
1790. <media:thumbnail url="https://en-blog.files.wordpress.com/2024/04/blog-header-image403x.jpg" />
1791. <media:content url="https://en-blog.files.wordpress.com/2024/04/blog-header-image403x.jpg" medium="image">
1792. <media:title type="html">Blog Header Image@3x</media:title>
1793. </media:content>
1794.  
1795. <media:content url="https://2.gravatar.com/avatar/28fb5941388d89b8b507cdc52195fc114d6dfa49cf20fcfbe3e15ffb3ec21570?s=96&#38;d=retro" medium="image">
1796. <media:title type="html">zanderros3</media:title>
1797. </media:content>
1798.  
1799. <media:content url="https://en-blog.files.wordpress.com/2024/04/image.png?w=1024" medium="image">
1800. <media:title type="html">map of the world with various points marked as data center locations, and lines between to show the connections </media:title>
1801. </media:content>
1802.  
1803. <media:content url="https://en-blog.files.wordpress.com/2024/04/image.jpeg?w=800" medium="image">
1804. <media:title type="html">two large generators outside a data center </media:title>
1805. </media:content>
1806.  
1807. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-1.png?w=637" medium="image">
1808. <media:title type="html">flywheel energy storage device</media:title>
1809. </media:content>
1810.  
1811. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-2.jpeg" medium="image">
1812. <media:title type="html">server closet in a data center</media:title>
1813. </media:content>
1814.  
1815. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-1.jpeg?w=1024" medium="image">
1816. <media:title type="html">Hardware closet for a data center. </media:title>
1817. </media:content>
1818.  
1819. <media:content url="https://en-blog.files.wordpress.com/2024/04/image-3.jpeg" medium="image">
1820. <media:title type="html">Group of Automattic employees taking a group picture at a data center. </media:title>
1821. </media:content>
1822. </item>
1823. </channel>
1824. </rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

1. Download the "valid RSS" banner.

2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

3. Add this HTML to your page (change the image src attribute if necessary):

   <a href="http://www.feedvalidator.org/check.cgi?url=https%3A//wordpress.com/blog/feed/"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=https%3A//wordpress.com/blog/feed/

Home · About · News · Docs · Terms