‘Block Development’ Videos

  • Let’s code: developing blocks without React! – Controls

    Speakers: Jonathan Bossenger, Leo Gopal

    December 2, 2022 — This series of workshops looks at building a WordPress block, without using React JSX.

    So far, we’ve built a WordPress block using plain JavaScript which supports custom styles via a stylesheet, and which uses block attributes and the RichText component to allow the user to edit the block content. Next, we will add a block control and an additional attribute to allow the user to edit the block alignment.

    Presentation Slides »

  • Customizing core blocks for clients

    WordCamp US 2022Speaker: Alex Ball

    November 27, 2022 — Using core blocks in a custom site helps streamline development and keep the customer’s cost down, but it can also give clients too much ability to break a carefully crafted design.

    This lightning talk is for anyone developing WordPress sites for clients or WordPress themes for the public. Learn more about the various ways of customizing core Gutenberg blocks in order to keep a site’s administrators and content editors within the guard rails established by the designer.

  • Let’s code: developing blocks without React! – Attributes and RichText

    Speaker: Jonathan Bossenger

    November 25, 2022 — In the previous session, we built a simple WordPress block using plain JavaScript. However, the block was static. A user couldn’t edit the content in any way.

    In this session, we add support for attributes, as well as implement the pre-existing RichText component. These changes enable a user to edit the content of the block.

    Presentation Slides »

  • Let’s code: developing blocks without React! – All about Attributes

    Speakers: Jonathan Bossenger, Álvaro Gómez

    November 18, 2022 — In the previous session, we built a simple WordPress block using plain JavaScript. However, the block was static, in that a user couldn’t edit the content in any way.

    This week we will add support for attributes, as well as implement the pre-existing RichText component. These will enable a user to edit the content of the block.

    Presentation Slides »

  • Let’s code: developing blocks without React! – Block Basics

    Speaker: Jonathan Bossenger

    November 11, 2022 — This series of workshops will cover what developing blocks without React might look like.

    In part 1 we cover the initial files needed to register a block, go over some of the JavaScript syntax and WordPress dependencies, and then add some styling to our block via a useBlockProps and custom stylesheets.

    Presentation Slides »

  • Block and theme global styles customization

    Block & Theme Global Styles CustomizationSpeaker: Destiny Kanno

    September 25, 2022 — Block Themes have introduced more versatility to our site design than ever before. With the highly customizable theme.json file, themes can now hold multiple design styles, giving users flexibility to quickly change their site’s aesthetic. From there, individual blocks can be further customized to a site owner’s design needs.

    In this session we will discuss the global styles feature and explore editing block styles for a personal site.

    Target Audience
    Beginner -> Intermediate

    Presentation Slides »

  • Using block attributes to enable user editing

    Speaker: Jonathan Bossenger

    September 23, 2022 — Giving users the ability to edit block elements is an important part of block development. In this tutorial, you will learn all about block attributes, and how you can use them to create blocks that your users can edit.

    Presentation Slides »

  • Let’s Build a Custom Block in One Hour

    Speaker: Nick Diego

    September 21, 2022 — Block development can be challenging, but getting started with block development has never been easier. In the past few years, WordPress contributors have created tools to simplify the process and make building blocks more accessible to those without advanced knowledge of JavaScript and React. Coupled with core components, native block supports, and a bit of guidance, every WordPress builder can add custom blocks to their toolset.

    This online workshop is a follow-up to my WordCamp US presentation “Let’s Build a Custom Block in 15 Minutes”. We will walk through the process of building a custom block using the Create Block tool in more detail and add a few additional features. For our block example, we will be “blockifying” the original Hello Dolly plugin by Matt Mullenweg.

  • Lee Shadle: Blazing fast block development

    WordCamp Europe 2021Speaker: Lee Shadle

    July 4, 2021 — This talk offers some recommendations for faster and easier block development.

  • Eileen Violini: Theme of the Future — Creating Block Themes And Patterns

    WordCamp Kent 2020Speaker: Eileen Violini

    June 25, 2020 — This talk examines the current status of theme development (in May 2020). Create stunning themes for the future by learning how to take advantage of blocks, block templates, and block patterns.

    topics include:
    – explaining the difference between block templates and patterns
    – adding templates and patterns to your existing themes improves user experience
    – building block templates and patterns for existing themes
    – planning to take advantage of upcoming core enhancements like full site editing

    Presentation Slides »