WordPress Gutenberg Blocks for Beginners.

Focused View

Lee Shadle

4:12:14

66 View

1 - Introduction and Setup

1 - Introduction.mp4

07:44

2 - Setting up Mamp.mp4

02:58

2 - mamp website.zip

3 - Setting up and using the Command Line.mp4

04:31

3 - command line cheat sheet.zip

3 - for windows use cmder.zip

4 - Installing Nodejs.mp4

02:21

4 - nodejs download.zip

5 - Getting a Text Editor.mp4

02:56

5 - sublime text.zip

5 - visual studio code.zip

6 - Installing WordPress.mp4

08:44

6 - download wordpress.zip

7 - Installing Gutenberg.mp4

01:40

7 - the gutenberg plugin.zip

8 - Creating a WordPress plugin.mp4

04:30

8 - the source code for the 3 plugins well be building throughout the course.zip

8 - wordpress plugin handbook.zip

2 - Creating Your First Block

9 - Enqueuing Scripts.mp4

09:25

9 - enqueuing block scripts.zip

9 - gutenberg blocks github documentation.zip

10 - Registering your Block.mp4

09:17

10 - es6 for everyone course.zip

10 - introducing jsx.zip

10 - react for beginners.zip

10 - wordpress dashicons.zip

10 - wtf is jsx.zip

11 - Setting up packagejson.mp4

12:25

11 - npm.zip

11 - npm getting started.zip

12 - Setting up Webpack.mp4

04:55

12 - webpack.zip

12 - webpack documentation.zip

13 - Using your First Block.mp4

07:23

3 - Applying Styles with Stylesheets

14 - Enqueuing Scripts.mp4

09:35

14 - applying styles with stylesheets.zip

15 - Registering your Block.mp4

05:25

16 - Setting up packagejson.mp4

03:30

17 - Setting up Webpack.mp4

00:54

18 - Using your Stylesheets Block.mp4

03:46

4 - Creating a Block with the RichText Component

19 - Enqueuing Scripts.mp4

04:05

20 - Registering your Block.mp4

17:42

20 - attributes documentation.zip

20 - jsx in depth.zip

20 - more about jsx.zip

20 - richtext github documentation.zip

20 - the richtext component.zip

21 - Setting up packagejson.mp4

01:57

22 - Setting up Webpack.mp4

00:44

23 - Using your Editable Block.mp4

07:15

5 - Creating a Block with a Toolbar

24 - Enqueuing Scripts.mp4

02:27

25 - Registering your Block.mp4

08:18

25 - alignmenttoolbar and blockcontrols components.zip

26 - Setting up packagejson.mp4

01:46

27 - Setting up Webpack.mp4

00:15

28 - Using your Block with a Toolbar.mp4

04:27

6 - Creating a Block with a Media Uploader

29 - Enqueuing Scripts.mp4

03:19

30 - Registering your Block.mp4

30:10

30 - mediaupload component documentation.zip

31 - Setting up packagejson.mp4

01:32

32 - Setting up Webpack.mp4

00:09

33 - Using your Block with a Media Uploader.mp4

06:35

33 - style.zip

7 - BONUS Creating a Scalable Architecture for your Blocks

34 - Creating the File Structure.mp4

03:14

35 - Adding your Blocks.mp4

07:21

35 - setting up rsync on windows.zip

35 - using rsync on mac.zip

36 - Enqueuing Scripts.mp4

07:05

37 - Setting up packagejson.mp4

04:58

38 - Setting up Webpack.mp4

09:21

38 - extract text webpack plugin documentation.zip

39 - Internationalizing your Blocks.mp4

06:00

39 - adding homebrew.zip

39 - gettext for windows.zip

39 - how to internationalize your plugin.zip

39 - more on wordpress i18n tools and svn.zip

39 - using subversion.zip

40 - Using All Your Blocks.mp4

09:34

41 - Using Source Maps.mp4

04:18

41 - webpack devtool property.zip

8 - Where do I go from here

42 - Using Blocks in Production and Next Steps.mp4

07:43

Description

Learn how to code blocks from scratch for Gutenberg, the new WordPress editor.

What You'll Learn?

You'll be able to build blocks from scratch for Gutenberg, the new WordPress editor.
You'll be able to set up your development environment for building Gutenberg blocks.
You'll feel very comfortable using the command line to copy, create, delete, and move files and directories.
You'll be able to build a WordPress plugin from scratch.
You'll know how to create an easy to maintain, scalable architecture for your Gutenberg blocks.
You'll know how to use your blocks in both plugin and production environments.

Who is this for?

Anyone who wants to learn how to build blocks from scratch, for the new Gutenberg editor for WordPress.

Anyone beginning block development for the new Gutenberg editor for WordPress.

Anyone who wants to learn how to build a WordPress plugin.

Anyone who wants to get more familiar with using React and WordPress.

Anyone who wants to get more comfortable with using the command line, the NPM package ecosystem, and webpack.

More details

Description
This course is for anyone who wants to learn how to build Gutenberg blocks from scratch.Â Are you a WordPress theme developer?Â Are you a WordPress plugin developer?Â Do you build WordPress websites?Â Then you really need to check this course out.
In the not so distant future WordPress is going to be releasing a new editor codenamed Gutenberg.Â This new editor will replace the existing TinyMCE wysiwyg editor with the goal of making it easy to create rich page and post layouts.
What the heck is a Gutenberg block?Â Great question!Â These new rich page and post layouts will be built using a collection of blocks.Â A Gutenberg block is then just a piece of a website.Â A block could be as simple as a button.Â Or a button with different customization options.Â Or a button with a form to subscribe to a newsletter.Â Or a header with a customizable background image.Â Get it?!
In this course we walk you through every step of creating a block, from setting up your local development environment to installing WordPress, building your first block in development, and finally preparing your your block plugin for production with lots of opportunities to get really comfortable with the command line and other modern javascript dependencies such as webpack and the Node.js package manager NPM.Â Â
We teach you everything you need, and nothing you don't.Â
Who this course is for:
Anyone who wants to learn how to build blocks from scratch, for the new Gutenberg editor for WordPress.
Anyone beginning block development for the new Gutenberg editor for WordPress.
Anyone who wants to learn how to build a WordPress plugin.
Anyone who wants to get more familiar with using React and WordPress.
Anyone who wants to get more comfortable with using the command line, the NPM package ecosystem, and webpack.

User Reviews

Rating

average 0

Total votes0

Focused display

WordPress

Lee Shadle

Instructor's Courses

I’ve been designing and coding websites for the past 10 years. I am OBSESSED with building blocks for the WordPress block editor. They offer the perfect canvas for constraint and creativity. Every block we’ll build in my courses solves a unique problem and presents a new challenge and opportunity to learn.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.