Create Gutenberg Blocks Without Writing JavaScript

Rachel McCollinJul 17, 2020Lessons: 10Length: 51 minutes

WordPress

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

1.1 Introduction

In this course, I'll show you how to create custom blocks for WordPress Gutenberg without coding any JavaScript. Let's get started!

1.Introduction
2 lessons, 04:13

1.2
Why Create Blocks Without JavaScript?
03:25

2.Registering a Block
2 lessons, 11:00

2.1
Setting Up the ACF Plugin
04:43

2.2
Registering a Gutenberg Block With the ACF API
06:17

3.Adding Fields to the Block
2 lessons, 08:05

3.1
Creating a Field Group and Adding Fields
04:16

3.2
Adding Block Settings
03:49

4.Outputting the Block
3 lessons, 25:20

4.1
Setting Up the Block Class and Values
08:17

4.3
Adding the Block to a Post or Page
10:49

5.Conclusion
1 lesson, 02:16

1.1 Introduction

Hello, and welcome to this Tuts+ course on creating Gutenberg blocks in WordPress without JavaScript. My name is Rachel McCollin. And I'm gonna show you how you can create your own Gutenberg blocks without writing a word of JavaScript, using the Advanced Custom Fields plugin. So we'll write a plugin that creates a block that we can use to create a field group, and it will be a type of field group in Advanced Custom Fields. We'll then add that to a page, which you can see here, with an image, a title, some text, and a link, and then we'll output it to our homepage. And we'll spend some time styling it and getting it to look good. Watch this course, and find out how to create blocks using PHP and not JavaScript.

Back to the top

Rachel McCollin

Rachel McCollin is a WordPress developer who writes books, articles and tutorials about web design and development, with a focus on WordPress and on responsive and mobile development. She runs a web design agency in Birmingham, UK and has published three books on WordPress, including WordPress: Pushing the Limits, an advanced resource for WordPress developers. She's currently writing her fourth book.

rachelmccollin

Create Gutenberg Blocks Without Writing JavaScript

Next lesson playing in 5 seconds

1.1 Introduction

1.Introduction
2 lessons, 04:13

1.1
Introduction
00:48

1.2
Why Create Blocks Without JavaScript?
03:25

2.Registering a Block
2 lessons, 11:00

2.1
Setting Up the ACF Plugin
04:43

2.2
Registering a Gutenberg Block With the ACF API
06:17

3.Adding Fields to the Block
2 lessons, 08:05

3.1
Creating a Field Group and Adding Fields
04:16

3.2
Adding Block Settings
03:49

4.Outputting the Block
3 lessons, 25:20

4.1
Setting Up the Block Class and Values
08:17

4.2
Writing the HTML
06:14

4.3
Adding the Block to a Post or Page
10:49

5.Conclusion
1 lesson, 02:16

5.1
Conclusion
02:16

1.1 Introduction

Create Gutenberg Blocks Without Writing JavaScript

Next lesson playing in 5 seconds

1.1 Introduction

1.Introduction2 lessons, 04:13

2.Registering a Block2 lessons, 11:00

3.Adding Fields to the Block2 lessons, 08:05

4.Outputting the Block3 lessons, 25:20

5.Conclusion1 lesson, 02:16

1.1 Introduction

1.Introduction
2 lessons, 04:13

2.Registering a Block
2 lessons, 11:00

3.Adding Fields to the Block
2 lessons, 08:05

4.Outputting the Block
3 lessons, 25:20

5.Conclusion
1 lesson, 02:16