WordPress Gutenberg Blocks for Beginners.

Demonstrates enqueuing scripts for a basic Gutenberg block, covering the block structure, file naming, and the enqueue function pattern, with pointers to the Gutenberg handbook and GitHub for updates.

Register a WordPress Gutenberg block by creating the block file. Define a prefixed block name, title, icon, category, and the edit and save functions with JSX and inline styles.

Learn how to set up a package.json for a WordPress Gutenburg block by installing npm dependencies, configuring babel and webpack, and adding build and dev scripts.

Set up Webpack for WordPress Gutenberg blocks, configure entry and output. Use Babel loader to transpile JavaScript for React and Babel, and define module rules to bundle dependencies.

Log into WordPress, activate the block example plugins, build and preview your first Gutenberg block with npm run dev, and learn basic block registration, insertion, and styling.

Enqueue scripts and styles for a new Gutenberg block by setting up webpack, creating editor and front-end CSS files, and registering the block with separate editor and front-end assets.

Register a new WordPress Gutenberg block by creating a dedicated block file, reusing code, and using props with destructuring to handle className and localization via __.

Create and configure package.json, install dev dependencies with npm, and set up babel and webpack for building WordPress Gutenberg blocks.

Set up webpack for WordPress Gutenberg blocks by creating a webpack config file, reusing an existing config for the first block, and bundling assets to preview the block in action.

Learn how beginners can create and style a stylesheets block in WordPress Gutenberg, configure npm scripts, enqueue editor and front-end styles, and preview your block.

Learn how to enqueue block assets, set up block directories and scripts, and configure editor and front-end styles for WordPress Gutenberg blocks, with no dependencies required.

Register a WordPress Gutenberg block by using the core rich text component, defining content attributes, and implementing edit and save handlers for editable blocks.

Set up the block's package.json by copying from stylesheets and renaming, then install dependencies with npm. Configure babel and webpack to enable a Gutenberg block workflow.

Set up the webpack file by copying the webpack config and the two style sheets into the current directory, name the config, then confirm nothing else is needed.

Configure webpack development mode and run npm scripts to load the editable block in the inserter, then migrate rich text to wp editor and add a text alignment toolbar.

Enqueue scripts for a new Gutenberg block by duplicating and renaming the editable block to a controls block, updating editor scripts and styles, and removing unused WordPress elements.

Register your block in WordPress Gutenberg by integrating a block controls component with an alignment toolbar. Use an alignment attribute to drive inline styles for left, center, or right text.

Remove the existing node_modules, run npm install to add babel-loader, babel-plugin-transform-react, babel-preset-env, and webpack dependencies, then set the controls block to 0 to continue to the webpack setup video.

Set up webpack for WordPress Gutenberg blocks using a ready, well-packed config that requires no changes. The instructor guides you through the quick setup and offers a friendly hello.

Build a Gutenberg block with a toolbar and alignment tools, learn proper JSX wrapping or array-based components, and add a media uploader to access the media library.

Enrich your WordPress Gutenberg workflow by duplicating and configuring the final media upload block, ensuring dependencies, internationalization, and the editor tools, including the media uploader, for building dynamic blocks.

Register your Gutenberg block by building a recipe-card block with title, ingredients, instructions, and a media upload, using rich text and WordPress components.

Reinstall node modules with npm install --save-dev for your WordPress Gutenberg block project. Rename the block to 0 5 media upload block.

Complete the PAC setup to finish this step in the webpack workflow. Recognize that once PAC is set up, no further action is required.

Explore building and using a media upload block in Gutenberg, including troubleshooting loading issues with WP components, uploading images, and applying editor and front-end styling.

Set up a scalable architecture for WordPress Gutenberg blocks by organizing your project into dist and source directories, enabling simultaneous block development with a single build.

Configure a scalable WordPress Gutenberg blocks workflow by copying block directories with rsync, excluding node_modules and configs, and assembling a single blocks directory with an index file.

enqueue WordPress block editor scripts and styles using a dist folder, an init.php loader, and a single build that compiles editor and front-end assets for scalable blocks.

Set up the package.json to install and organize dependencies for creating WordPress Gutenberg blocks, move main entry to source/blocks/index.js, and configure webpack with babel and css loaders to bundle styles.

Configure Webpack to bundle block JavaScript and CSS, set entry to source blocks, output to dist, enable cheap-eval-source-map, and extract editor and block styles for parallel loading and easier debugging.

Learn how to internationalize WordPress Gutenberg blocks by generating a po/pot template with gettext, navigating macOS and Windows setups, and following the documented workflow.

Build and test a scalable Gutenberg blocks architecture, wiring blocks, css, and webpack; run npm dev to watch and bundle, ensuring all blocks load in the editor.

Learn how source maps help debug WordPress Gutenberg blocks by comparing cheap evil source maps, none, and production maps with webpack, npm dev scripts, and dev tool settings.