Delivering WordPress in 7KB

Over the past six months, I’ve become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based.

The web in a warming world
As a brief recap, I attended MozFest in London last year. In between sessions, I was scanning a noticeboard to see what was coming up, and …
The post Delivering WordPress in 7KB appeared first on CSS-Tricks.

Link: https://css-tricks.com/delivering-wordpress-in-7kb/

Pagely: Managed WordPress Hosting on Amazon Web Services

Dedicated WordPress hosting is the new black. The last five years saw a rapid rise in the numbers of providers that offer WordPress-focused hosting solutions. Pagely sticks out from this competition. Pagely: The Fast Are The Enemy of The Slow Why does Pagely stick out from the competition, you will undoubtedly ask. The answer is…

Link: https://www.noupe.com/business-online/pagely-managed-wordpress-hosting-aws.html

Learning Gutenberg: Building Our Custom Card Block

We’ve got some base knowledge, we’ve played with some React and now we’ve got our project tools set up. Let’s dive into building our custom block.

Article Series:

Series Introduction

What is Gutenberg, Anyway?

A Primer with create-guten-block

Modern JavaScript Syntax

React 101

Setting up a Custom webpack

A Custom “Card" Block (This Post)

What we’re building
We’re going to build a custom card block that features an image, a title and a summary. It’s a really common design pattern …
The post Learning Gutenberg: Building Our Custom Card Block appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-7-building-our-block-custom-card-block/

Learning Gutenberg: Setting up a Custom webpack Config

Gutenberg introduces the modern JavaScript stack into the WordPress ecosystem, which means some new tooling should be learned. Although tools like create-guten-block are incredibly useful, it’s also handy to know what’s going on under the hood.

Article Series:

Series Introduction

What is Gutenberg, Anyway?

A Primer with create-guten-block

Modern JavaScript Syntax

React 101

Setting up a Custom webpack (This Post)

A Custom “Card" Block (Coming Soon!)

The files we will be configuring here should be familiar from what we covered…
The post Learning Gutenberg: Setting up a Custom webpack Config appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-6-setting-up-a-custom-webpack-config/

Learning Gutenberg: React 101

Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s roll-up our sleeves and make something cool.

Article Series:

Series Introduction

What is Gutenberg, Anyway?

A Primer with create-guten-block

Modern JavaScript Syntax

React 101 (This


The post Learning Gutenberg: React 101 appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-5-react-101/

Learning Gutenberg: Modern JavaScript Syntax

One of the key changes that Gutenberg brings to the WordPress ecosystem is a heavy reliance on JavaScript. Helpfully, the WordPress team have really pushed their JavaScript framework into the present and future by leveraging the modern JavaScript stack, which is commonly referred to as ES6 in the community. It’s how we’ll refer to it as in this series too, to avoid confusion.
Let’s dig into this ES6 world a bit, as it’s ultimately going to help us understand how …
The post Learning Gutenberg: Modern JavaScript Syntax appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-4-modern-javascript-syntax/

Learning Gutenberg: A Primer with create-guten-block

Welcome back! We’ve just taken a look at what Gutenberg is and how it operates from the admin side. Gutenberg is certainly going to have a massive impact on the WordPress world. If you are just arriving here and have no idea what we’re talking about, I recommend at least skimming Part 1 to make sure you have the appropriate background.
Let’s create a custom block with a bit of help from a wonderful tool called create-guten-block. Onward!

Article

The post Learning Gutenberg: A Primer with create-guten-block appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-3-primer-with-create-guten-block/

Learning Gutenberg: Series Introduction

Hey CSS-Tricksters! 👋 We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do for your site, and how you can actually develop for it.

Who this is for
This series is more for developers who are curious about this new world …
The post Learning Gutenberg: Series Introduction appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-1-series-intro/