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/

Learning Gutenberg: What is Gutenberg, Anyway?

Gutenberg is the new React-driven SPA editing experience in WordPress. Oh wait, a string of buzzwords doesn’t count for a viable explanation of software? We’re going to unpack that string of buzzwords as we explain what Gutenberg is.

Article Series:

Series Introduction

What is Gutenberg, Anyway? (This Post)

A Primer with create-guten-block (Coming Soon!)

Modern JavaScript Syntax (Coming Soon!)

React 101 (Coming Soon!)

Setting up a Custom webpack (Coming Soon!)

A Custom “Card" Block (Coming Soon!)

First, a before-and-after screenshot …
The post Learning Gutenberg: What is Gutenberg, Anyway? appeared first on CSS-Tricks.

Link: https://css-tricks.com/learning-gutenberg-2-what-is-gutenberg/

Five of My Favorite Features of Jetpack

Jetpack is an official WordPress plugin directly from Automattic. It’s an interesting plugin in that it doesn’t just do *one thing* — it does a whole slew of things that enhance what your WordPress site can do. *Any* WordPress site, that is, and often with extremely little effort. Those easy win features Jesse Friedman calls light switch features, meaning you literally flip a switch in Jetpack’s settings and start benefitting. I love that.
There are dozens of features in …
The post Five of My Favorite Features of Jetpack appeared first on CSS-Tricks.

Link: https://css-tricks.com/five-of-my-favorite-features-of-jetpack/

Kinsta: Dedicated WordPress Hosting in the Google Cloud

Dedicated WordPress hosting has been on the rise for the past few years, with Kinsta’s approach probably being the most interesting one. It is different from the competition in nearly every aspect. Kinsta: Up-and-Comer on the Google Cloud Plattform Kinsta was founded by WordPress developer Mark Gavalda in 2013, and has its headquarters in London, with…

Link: https://www.noupe.com/wordpress/kinsta-wordpress-hosting.html