Developing Blocks without React - Part 2

Nov 18, 2022Download as PPTX, PDF0 likes25 views

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 or styling 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.

Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Developing Blocks without React! - Part 2

2
👋🏽
Welcome!
As you join, please make sure you have your local
development environment ready:
• A local WordPress installation
• A code editor like VSCode or Sublime
• The part 1 block code -
https://github.com/jonathanbossenger/wp-
learn-javascript/releases/download/0.0.2/wp-
learn-javascript.0.0.2.zip
Then, let everyone know in the chat where you’re
joining us from…
Hello!
○ My name is Jonathan Bossenger
○ From Cape Town, South Africa
○ Ex-developer turned code instructor
○ Sponsored contributor at Automattic
○ @jon_bossenger in Twitter

Learn.WordPress.org
Let's code!
Developing Blocks
without React!
Jonathan Bossenger

Announcements
○ Welcome, and thank you to Alvaro for co-hosting today!
○ We’ll be presenting in focus mode, but please consider enabling your video.
○ You are welcome to ask questions.
○ You are welcome to post questions in the chat, or unmute to ask questions.

Announcements
○ Please consider taking the Learn WordPress Learner Survey
• https://learn.wordpress.org/individual-learner-survey/
○ Make sure your local install is ready
• https://github.com/jonathanbossenger/wp-learn-
javascript/releases/download/0.0.2/wp-learn-javascript.0.0.2.zip
○ If I am going too fast, please let me know!
○ We will be posting this session to https://wordpress.tv/ afterwards
○ For more WordPress focused content please visit https://learn.wordpress.org/

Learning Outcomes
1. Review of last week’s block code
2. Cover some general developer tools/principles for block development
3. Add an attribute to the block
4. Make it possible to edit and save the block attributes
5. Implement the RichText component for a better user experience

Objectives 1
1. Review developer tools and clearing the browser cache
2. Change the element for the edit function.
3. Add the string attribute to the block
4. Learn about the difference between the block props and blockProps
5. Make use of the attribute’s content in the edit function
a. Access the object items manually
b. Access the object items by using the destructuring assignment syntax
7

Objectives 2
1. Update the save function to access the same attribute
2. Add the onChange functionality to the element in the edit function
3. Implement the RichText component to provide a better user experience
8

Resources
○ https://learn.wordpress.org/individual-learner-survey/
○ https://learn.wordpress.org/tutorial/using-the-create-block-tool/
○ https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/
○ https://developer.wordpress.org/block-editor/how-to-guides/block-
tutorial/introducing-attributes-and-editable-fields/
○ https://developer.wordpress.org/block-editor/reference-guides/block-api/block-
attributes/
○ https://developer.wordpress.org/block-editor/reference-guides/richtext/

Resources
○ https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
○ https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
○ https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName
○ https://github.com/jonathanbossenger/wp-learn-javascript

JSX is the React extension to JavaScript that allows you to create components using a syntax similar to HTML. While most block editor tools and tutorials on the web provide JSX examples for creating blocks, not many folks know that it is not required. You can use plain JavaScript. In part 1, 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.

Developing Blocks without React - Controls.pptxJonathan Bossenger

Developing Blocks without React - Part 1Jonathan Bossenger

JSX is the React extension to JavaScript that allows you to create components using a syntax similar to HTML. While most block editor tools and tutorials on the web provide JSX examples for creating blocks, not many folks know that it is not required. You can use plain JavaScript. In fact, the initial block editor documentation for building a basic block contains both JSX and Plain JavaScript examples, as does the Gutenberg Examples repository. This series of workshops intends to cover what this might look like.

Internationalisation in Block Themes.pptxJonathan Bossenger

Global Styles Variations in Block Themes.pptxJonathan Bossenger

One of the great benefits of the Global Styles system in WordPress block themes is the ability to create multiple variations that users can choose from. With variations, theme developers can create multiple different websites using the same base theme code, providing a wider range of options to their users. In this session, we'll be taking a block theme, and creating a new Global Style variation for it, to ship with the theme.

Developing Blocks without React - Block Supports.pptxJonathan Bossenger

The document provides information about a live coding session on developing blocks without React in WordPress. It includes announcements about the session format and objectives, as well as resources for the code examples. The session objectives are to review the current block code, introduce block schema and block supports, and demonstrate how to add block supports like colors and padding through the block.json file.

Gutenberg (WidgiLabs Training Sessions)Nuno Morgadinho

The document discusses the new Gutenberg block editor in WordPress. It explains that the editor treats posts as composed of distinct blocks of content that are easy to insert and manipulate. Blocks will replace the old content blob approach. The editor is built with React.js and in the future blocks may be used for more than just content, like themes. Nine priorities are outlined for further developing the block editor, including creating blocks for navigation menus, widgets, and directories for finding new blocks.

Let's code: developing WordPress User Roles and CapabilitiesJonathan Bossenger

This document provides an introduction to a live coding session on developing WordPress user roles and capabilities. The session will cover how roles and capabilities work in WordPress, how to assign capabilities to existing roles and create custom roles. Participants are instructed to install a test bed plugin and set up their local development environment before the session. The session objectives are outlined as reviewing the plugin, WordPress roles and capabilities, inspecting the user roles array, assigning admin capabilities to the editor role, and creating an assistant role.

WordPress Coding StandardsJonathan Bossenger

Writing code, especially in a collaborative environment like open source, requires all participants to follow specific standards. Coding standards help avoid common coding errors, improve the readability of code, and simplify modification. In this workshop, you'll learn about the WordPress Coding Standards, where to find information about them, as well as how to automate the process of formatting your code to meet the coding standards.

Let's code! Diving into theme.jsonJonathan Bossenger

One of the more exciting additions to WordPress theme development that block themes make possible is the inclusion of the theme.json file. This file allows the theme developer to enable and configure everything from CSS presets to custom fonts, and more. In this session, we'll be taking a dive into the theme.json file for the new twentytwentythree default WordPress theme, to understand how it works, and what's possible.

Let's code: extending the WP REST API - modifying responsesJonathan Bossenger

The WordPress REST API provides an interface for applications to interact with your WordPress site by sending and receiving data as JSON (JavaScript Object Notation) objects. By default, it provides REST endpoints (URLs) representing the posts, pages, taxonomies, and other built-in WordPress data types. Your application can send and receive JSON data to these endpoints to query, modify and create content on your site. However, it is also possible to extend the WP REST API, in order to perform specific actions that are outside of the scope of the default routes and endpoints. In this session, you will learn about one of the ways you can extend the WP REST API, by modifying REST responses.

Shortcodes vs Widgets: Which one and how?Amanda Giles

Using the WP REST APIJonathan Bossenger

The WordPress REST API provides an interface for applications to interact with your WordPress site by sending and receiving data as JSON (JavaScript Object Notation) objects. It is the foundation of the WordPress Block Editor. However, it also provides a more predictable and structured way to interact with your site’s content than using admin-ajax. In this session, you will learn how to use the WP REST API in place of using admin-ajax, in order to interact with existing WordPress data.

Introduction to Gutenberg- Imran SayedImran Sayed

Gutenberg is the new block-based editor being developed for WordPress that aims to improve the editing experience. It allows content to be organized using blocks, providing a more visual layout. The need arose from limitations in the classic editor, such as difficulties aligning images and text. Gutenberg's block-based approach aims to make content creation simpler and more focused. The editor has progressed from an initial plugin to being integrated into WordPress core. Future plans include expanding blocks beyond posts to other areas like widgets and menus.

Let's code: custom content & custom capabilitiesJonathan Bossenger

The WordPress User Roles and Capabilities system provides a robust way to control user access to sensitive data on your WordPress site. It's not only possible to create custom roles and assign capabilities to those roles, but it's also possible to assign content type capabilities to your custom post types. This adds another layer of control over your site content, especially if you require different levels of access. In this session, we'll be taking a look at the specific functionality that exists in the register_post_type function that pertains to post type capabilities, learn how this works, and how to best make use of it.

Creating a WordPress multisite networkJonathan Bossenger

Wordpress ShortcodeBinh Dang Ngoc

Wordpress shortcodes allow users to easily format content using simple code tags. Shortcodes can be used to insert things like buttons, galleries, and videos into page and post content. They also allow non-developers to easily change layouts and styles. The document outlines what shortcodes are, why they are useful, how to use built-in and custom shortcodes, best practices, and demonstrates shortcodes through examples.

Interacting with the WP REST APIJonathan Bossenger

Bitbucket Devops PPT.pptxXIE2020Students

BitBucket is an online code hosting platform that allows for collaboration on code repositories. It provides version control through Git or Mercurial and allows users to store code repositories privately or publicly. The document outlines the benefits of hosting code online through source control, including having backups, allowing collaboration and receiving feedback. It then defines key terms related to BitBucket and version control like repository, fork, clone, commit, push and pull. Finally, it provides step-by-step instructions for creating a repository, cloning a repository locally, adding code to a repository and cloning a forked repository. The benefits of BitBucket are listed as having backups of code, avoiding conflicts through collaboration, and its effectiveness for large open source projects.

Creating Customizable Widgets for Unpredictable NeedsAmanda Giles

Let's code! Converting a Shortcode into a BlockJonathan Bossenger

Testing plugins for PHP 8Jonathan Bossenger

Let's code! Creating your Primary Templates in the Editor.pptxJonathan Bossenger

WordPress theme development follows the WordPress template hierarchy, which determines which templates are used depending on the content being rendered. Fortunately for the new block theme developer, the Site Editor allows you to create all the primary templates you might need, right from your WordPress install. In this session, we'll start with a quick review of the WordPress template hierarchy. Then we'll create a blank block theme, using the Create Block Theme plugin, apply some ready-made default styles via theme.json, and create all the primary templates a WordPress theme would need.

WP REST API Authentication, custom fields and updating resourcesJonathan Bossenger

How to Contribute to the WooCommerce Ecosystem as a DeveloperElightwalk Technology PVT. LTD.

Creating Custom Templates and Template PartsJonathan Bossenger

WordPress 6.1 will include ways to create custom templates and template parts for your block theme from the Site Editor. These custom templates and template parts are useful when you need to display specific posts or pages using templates that don't form part of the template hierarchy. In this session, we'll look at both how you can register and create custom templates and template parts from the editor, as well as how to register them in your theme.json file when distributing your new block theme.

Live Coverage at The New York TimesScott Taylor

The summary discusses challenges faced with blogs and live blogging at The New York Times and solutions developed over time. Key points: - Old blogs code at NYT assumed jQuery and Prototype would always load, causing conflicts as needs changed. Inline HTML and widgets added their own jQuery versions. - Live blogging was done with custom database tables duplicating WP functionality. Posts couldn't leverage custom post types until later. - New systems like Dashboards had per-blog tables, adding 100s of tables for 10 new blogs. - NYT5 codebase required changes like putting WP in global scope and capturing output. This allowed leveraging shared modules while keeping WP backend.

New WordPress Developer APIs The Interactivity APIJonathan Bossenger

The main goal of the Interactivity API is to provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks. This standard would make it easier for developers to create rich, interactive user experiences, from simple cases like counters or popups to more complex features like instant search, or carts and checkouts. In this session, you will learn more about this new developer API, through a live coding example.

The WordPress HTML APIJonathan Bossenger

This document summarizes a presentation on the new WordPress HTML API. It introduces the speaker and where they are from. It then outlines what will be covered in the presentation, including an overview of the problem the HTML API solves, alternative solutions, how to use the API, and additional resources. Requirements to follow along with the presentation are also listed, including having a local WordPress install and the test custom image plugin.

More Related Content

Similar to Developing Blocks without React - Part 2 (20)

Let's code: developing WordPress User Roles and CapabilitiesJonathan Bossenger

WordPress Coding StandardsJonathan Bossenger

Let's code! Diving into theme.jsonJonathan Bossenger

Let's code: extending the WP REST API - modifying responsesJonathan Bossenger

Shortcodes vs Widgets: Which one and how?Amanda Giles

Using the WP REST APIJonathan Bossenger

Introduction to Gutenberg- Imran SayedImran Sayed

Let's code: custom content & custom capabilitiesJonathan Bossenger

Creating a WordPress multisite networkJonathan Bossenger

Wordpress ShortcodeBinh Dang Ngoc

Interacting with the WP REST APIJonathan Bossenger

Bitbucket Devops PPT.pptxXIE2020Students

Creating Customizable Widgets for Unpredictable NeedsAmanda Giles

Let's code! Converting a Shortcode into a BlockJonathan Bossenger

Testing plugins for PHP 8Jonathan Bossenger

Let's code! Creating your Primary Templates in the Editor.pptxJonathan Bossenger

WP REST API Authentication, custom fields and updating resourcesJonathan Bossenger

How to Contribute to the WooCommerce Ecosystem as a DeveloperElightwalk Technology PVT. LTD.

Creating Custom Templates and Template PartsJonathan Bossenger

Live Coverage at The New York TimesScott Taylor

Let's code: developing WordPress User Roles and CapabilitiesJonathan Bossenger

WordPress Coding StandardsJonathan Bossenger

Let's code! Diving into theme.jsonJonathan Bossenger

Let's code: extending the WP REST API - modifying responsesJonathan Bossenger

Shortcodes vs Widgets: Which one and how?Amanda Giles

Using the WP REST APIJonathan Bossenger

Introduction to Gutenberg- Imran SayedImran Sayed

Let's code: custom content & custom capabilitiesJonathan Bossenger

Creating a WordPress multisite networkJonathan Bossenger

Wordpress ShortcodeBinh Dang Ngoc

Interacting with the WP REST APIJonathan Bossenger

Bitbucket Devops PPT.pptxXIE2020Students

Creating Customizable Widgets for Unpredictable NeedsAmanda Giles

Let's code! Converting a Shortcode into a BlockJonathan Bossenger

Testing plugins for PHP 8Jonathan Bossenger

Let's code! Creating your Primary Templates in the Editor.pptxJonathan Bossenger

WP REST API Authentication, custom fields and updating resourcesJonathan Bossenger

How to Contribute to the WooCommerce Ecosystem as a DeveloperElightwalk Technology PVT. LTD.

Creating Custom Templates and Template PartsJonathan Bossenger

Live Coverage at The New York TimesScott Taylor

More from Jonathan Bossenger (20)

New WordPress Developer APIs The Interactivity APIJonathan Bossenger

The WordPress HTML APIJonathan Bossenger

The WordPress Create Block toolJonathan Bossenger

This document outlines a presentation on using the WordPress Create Block tool. It introduces the presenter and learning outcomes which are to explain what Create Block is, the requirements to use it, how to scaffold a new block plugin, and review the generated file structure and Create Block options. It also lists some announcements like encouraging questions and noting the session is being recorded. Resources for Create Block, Node.js, and installing for local development are provided.

PHP compatibility testing with PHPCompatibilityWPJonathan Bossenger

Common WordPress APIs_ Settings APIJonathan Bossenger

Common WordPress APIs - Options APIJonathan Bossenger

Common WordPress APIs_ HTTP API.pptxJonathan Bossenger

Common WordPress APIs: MetadataJonathan Bossenger

What’s new for developers_ (August 2023).pptxJonathan Bossenger

Testing your plugins for PHP version compatibilityJonathan Bossenger

Common WordPress APIs_ Global VariablesJonathan Bossenger

Global variables are a concept in PHP that allow you to access these variables from any scope during a page request. WordPress ships with a specific set of global variables, and it's useful to know what they are, and how to use them correctly. In this session you'll learn how global variables work, the list of global variables available in a typical WordPress request, and now to correctly use and interact with them.

Common WordPress APIs_ InternationalizationJonathan Bossenger

Internationalization is the process of developing your application in a way it can easily be translated into other languages. WordPress is used all over the world, by people who speak many different languages. If you're building a plugin or theme, you need add any text strings in your code in such a way that they can be easily translated into other languages. The process of translating those strings is known as localization. In this session, we will define what Internationalization and localization is, why it's important, and show you examples of how to implement this in your code.

Testing WordPress 6.3 - Developer editionJonathan Bossenger

With WordPress 6.3 due on August 8, 2023, now would be a great time to help test the release candidate, as well as confirm that your plugins and themes are ready for the 6.3 release. In this session we'll be installing the WordPress Beta Tester plugin, convert a local install to WordPress 6.3 for testing, test it against a theme that is in active development, and then revert it back to WordPress 6.2.

Common WordPress APIs: Responsive ImagesJonathan Bossenger

Common WordPress APIs - Dashboard WidgetsJonathan Bossenger

Custom Tables in WordPressJonathan Bossenger

While the default WordPress database schema is perfect for most content related data types, there may be instances where you need to create custom tables in a WordPress database. One example of this is when a plugin has a specific use case that extends beyond what the custom post type functionality of WordPress offers. In this session, we will look at what you need to know to create and manage custom WordPress database tables, how to create and interact with these tables, and some maintenance considerations.

The WordPress DatabaseJonathan Bossenger

Managing a WordPress Multisite NetworkJonathan Bossenger

Debugging in WordPressJonathan Bossenger

When developing WordPress plugins or themes, it's a good idea to have tools in place to help improve your code quality and debug your code in the case of errors. Enabling error logs, inspecting the values of variables during code execution, and looking at the database queries being run are all tools that developers can use to find and fix problems. In this workshop, we'll dive into some of the options built into WordPress that you have at your disposal, learn about various debugging plugins and their uses, as well as look at one or two third-party tools to consider.

Introduction to WordPress Multisite NetworksJonathan Bossenger

New WordPress Developer APIs The Interactivity APIJonathan Bossenger

The WordPress HTML APIJonathan Bossenger

The WordPress Create Block toolJonathan Bossenger

PHP compatibility testing with PHPCompatibilityWPJonathan Bossenger

Common WordPress APIs_ Settings APIJonathan Bossenger

Common WordPress APIs - Options APIJonathan Bossenger

Common WordPress APIs_ HTTP API.pptxJonathan Bossenger

Common WordPress APIs: MetadataJonathan Bossenger

What’s new for developers_ (August 2023).pptxJonathan Bossenger

Testing your plugins for PHP version compatibilityJonathan Bossenger

Common WordPress APIs_ Global VariablesJonathan Bossenger

Common WordPress APIs_ InternationalizationJonathan Bossenger

Testing WordPress 6.3 - Developer editionJonathan Bossenger

Common WordPress APIs: Responsive ImagesJonathan Bossenger

Common WordPress APIs - Dashboard WidgetsJonathan Bossenger

Custom Tables in WordPressJonathan Bossenger

The WordPress DatabaseJonathan Bossenger

Managing a WordPress Multisite NetworkJonathan Bossenger

Debugging in WordPressJonathan Bossenger

Introduction to WordPress Multisite NetworksJonathan Bossenger

Recently uploaded (20)

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Build Your Own Copilot & Agents For DevsBrian McKeiver

Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdfTelecoms Supermarket

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Web and Graphics Designing Training in RajpuraErginous Technology

Web & Graphics Designing Training at Erginous Technologies in Rajpura offers practical, hands-on learning for students, graduates, and professionals aiming for a creative career. The 6-week and 6-month industrial training programs blend creativity with technical skills to prepare you for real-world opportunities in design. The course covers Graphic Designing tools like Photoshop, Illustrator, and CorelDRAW, along with logo, banner, and branding design. In Web Designing, you’ll learn HTML5, CSS3, JavaScript basics, responsive design, Bootstrap, Figma, and Adobe XD. Erginous emphasizes 100% practical training, live projects, portfolio building, expert guidance, certification, and placement support. Graduates can explore roles like Web Designer, Graphic Designer, UI/UX Designer, or Freelancer. For more info, visit erginous.co.in , message us on Instagram at erginoustechnologies, or call directly at +91-89684-38190 . Start your journey toward a creative and successful design career today!

Unlocking the Power of IVR: A Comprehensive Guidevikasascentbpo

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-und-verwaltung-von-multiuser-umgebungen/ HCL Nomad Web wird als die nächste Generation des HCL Notes-Clients gefeiert und bietet zahlreiche Vorteile, wie die Beseitigung des Bedarfs an Paketierung, Verteilung und Installation. Nomad Web-Client-Updates werden “automatisch” im Hintergrund installiert, was den administrativen Aufwand im Vergleich zu traditionellen HCL Notes-Clients erheblich reduziert. Allerdings stellt die Fehlerbehebung in Nomad Web im Vergleich zum Notes-Client einzigartige Herausforderungen dar. Begleiten Sie Christoph und Marc, während sie demonstrieren, wie der Fehlerbehebungsprozess in HCL Nomad Web vereinfacht werden kann, um eine reibungslose und effiziente Benutzererfahrung zu gewährleisten. In diesem Webinar werden wir effektive Strategien zur Diagnose und Lösung häufiger Probleme in HCL Nomad Web untersuchen, einschließlich - Zugriff auf die Konsole - Auffinden und Interpretieren von Protokolldateien - Zugriff auf den Datenordner im Cache des Browsers (unter Verwendung von OPFS) - Verständnis der Unterschiede zwischen Einzel- und Mehrbenutzerszenarien - Nutzung der Client Clocking-Funktion

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

AI and Data Privacy in 2025: Global TrendsInData Labs

Build Your Own Copilot & Agents For DevsBrian McKeiver

Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdfTelecoms Supermarket

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Web and Graphics Designing Training in RajpuraErginous Technology

Unlocking the Power of IVR: A Comprehensive Guidevikasascentbpo

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Developing Blocks without React - Part 2

1. Jonathan Bossenger Let’s Code Learn.WordPress.org Developing Blocks without React! - Part 2

2. 2 👋🏽 Welcome! As you join, please make sure you have your local development environment ready: • A local WordPress installation • A code editor like VSCode or Sublime • The part 1 block code - https://github.com/jonathanbossenger/wp- learn-javascript/releases/download/0.0.2/wp- learn-javascript.0.0.2.zip Then, let everyone know in the chat where you’re joining us from… Hello! ○ My name is Jonathan Bossenger ○ From Cape Town, South Africa ○ Ex-developer turned code instructor ○ Sponsored contributor at Automattic ○ @jon_bossenger in Twitter

3. Learn.WordPress.org Let's code! Developing Blocks without React! Jonathan Bossenger

4. Announcements ○ Welcome, and thank you to Alvaro for co-hosting today! ○ We’ll be presenting in focus mode, but please consider enabling your video. ○ You are welcome to ask questions. ○ You are welcome to post questions in the chat, or unmute to ask questions.

5. Announcements ○ Please consider taking the Learn WordPress Learner Survey • https://learn.wordpress.org/individual-learner-survey/ ○ Make sure your local install is ready • https://github.com/jonathanbossenger/wp-learn- javascript/releases/download/0.0.2/wp-learn-javascript.0.0.2.zip ○ If I am going too fast, please let me know! ○ We will be posting this session to https://wordpress.tv/ afterwards ○ For more WordPress focused content please visit https://learn.wordpress.org/

6. Learning Outcomes 1. Review of last week’s block code 2. Cover some general developer tools/principles for block development 3. Add an attribute to the block 4. Make it possible to edit and save the block attributes 5. Implement the RichText component for a better user experience

7. Objectives 1 1. Review developer tools and clearing the browser cache 2. Change the element for the edit function. 3. Add the string attribute to the block 4. Learn about the difference between the block props and blockProps 5. Make use of the attribute’s content in the edit function a. Access the object items manually b. Access the object items by using the destructuring assignment syntax 7

8. Objectives 2 1. Update the save function to access the same attribute 2. Add the onChange functionality to the element in the edit function 3. Implement the RichText component to provide a better user experience 8

9. 9 Let’s code.

10. Resources ○ https://learn.wordpress.org/individual-learner-survey/ ○ https://learn.wordpress.org/tutorial/using-the-create-block-tool/ ○ https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/ ○ https://developer.wordpress.org/block-editor/how-to-guides/block- tutorial/introducing-attributes-and-editable-fields/ ○ https://developer.wordpress.org/block-editor/reference-guides/block-api/block- attributes/ ○ https://developer.wordpress.org/block-editor/reference-guides/richtext/

11. Resources ○ https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ○ https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign ○ https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName ○ https://github.com/jonathanbossenger/wp-learn-javascript

Editor's Notes

#2: TITLE SLIDE: Make a copy of this presentation to your Google Drive, and edit to replace with your details.

Developing Blocks without React - Part 2

Recommended

More Related Content

Similar to Developing Blocks without React - Part 2 (20)

More from Jonathan Bossenger (20)

Recently uploaded (20)

Developing Blocks without React - Part 2

Editor's Notes