DataViews y DataForm 🔗 **Source:** [DataViews y DataForm](https://www.youtube.com/watch?v=L38OA4aSfoQ) > [!note]+ Document Notes > tags: [wordpress, data-views, data-form, gutenberg] > author: Julio Potier > source: YouTube > reference: https://www.youtube.com/watch?v=L38OA4aSfoQ > date created: 2025-01-04 00:00 > > # 🏷️ Title: DataViews y DataForm - WordPress Components Deep Dive > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Explore DataViews component implementation in WordPress plugins — live coding example #wordpress - [H2] Test field validation and form handling with DataForm — validation examples #development - [H3] Review latest WordPress 6.9 cycle enhancements for data components — documentation #core ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [WordPress DataViews Documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/) - [DataViews Storybook Examples](https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs) ## 📝 Summary - Spanish-language livestream exploring WordPress DataViews and DataForm components - Live coding demonstration of plugin development using these components - Discussion of latest enhancements in WordPress 6.9 development cycle - Key focus on practical implementation, validation, and API usage - Components are used in WordPress core UI (templates, pages) and available for plugin developers ## 📖 Main Content This stream provides an in-depth exploration of WordPress's DataViews and DataForm components, which are powerful React components used throughout the WordPress admin interface. The presenter demonstrates how these components work in core WordPress (like in the template and page management screens) and how plugin developers can leverage them in their own projects. The DataViews component handles data display with multiple layout options (table, grid, list), while DataForm manages data editing and validation. Both components share a common fields API, making them complementary tools for data management interfaces. The stream includes live coding examples showing plugin development, field configuration, validation setup, and the relationship between these components and WordPress's data layer. ## 🗒️ Notes #### ⏱️ [00:01:23](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=83) — [H1] Stream Introduction and Technical Setup - Key idea: Presenter resolves technical issues with background music service - Evidence: "I use a service that is called YouTube no cookies that allows me to play a video in the background for the music" #### ⏱️ [00:03:45](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=225) — [H1] DataViews Component Overview in WordPress Core - Key idea: DataViews components are used throughout WordPress admin interface - Evidence: "If we go to templates, this is another database page. So this is the database component" #### ⏱️ [00:05:12](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=312) — [H2] Component Philosophy and Reusability - Key idea: WordPress core teams create tools for internal use that are also available to plugin developers - Evidence: "The team developing the core create like a little tools that can be used inside WordPress core but also they are available for any plug-in developer" #### ⏱️ [00:06:30](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=390) — [H2] DataViews and DataForm Relationship - Key idea: DataViews displays data while DataForm edits data, working as complementary components - Evidence: "We have on one side a component to display the data and on the other hand we have a component to edit the data" #### ⏱️ [00:07:45](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=465) — [H1] WordPress 6.9 Enhancements Available Now - Key idea: Latest component enhancements are available via NPM without waiting for WordPress 6.9 release - Evidence: "There's some work that has been done for these components during the WordPress 6.9 cycle, but those enhancements are already available" #### ⏱️ [00:09:15](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=555) — [H2] NPM Package Installation - Key idea: Components are available as standalone NPM package for external use - Evidence: "We can install it and then we can use it in our projects" #### ⏱️ [00:12:00](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=720) — [H1] Documentation Review and Layout Options - Key idea: DataViews offers three layout types for displaying data sets - Evidence: "Data views to render the data set using different types of layouts table grid list" #### ⏱️ [00:15:30](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=930) — [H3] Critical Import Warning for WordPress Scripts - Key idea: Plugin developers must import from specific path to avoid version conflicts - Evidence: "You need to import the components from WordPress database dbp instead of WordPress database" #### ⏱️ [00:18:45](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=1125) — [H1] Component Architecture and Data Flow - Key idea: Consumer is responsible for data manipulation and updating based on view changes - Evidence: "It's our responsibility to actually order the data set every time we change filters, every time we change sorts" #### ⏱️ [00:22:10](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=1330) — [H2] OnChange View Callback Pattern - Key idea: All user interactions trigger onChangeView callback requiring manual state management - Evidence: "Every time we change anything in the layout, the onchange view callback is triggered" #### ⏱️ [00:25:30](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=1530) — [H1] Fields API Shared Between Components - Key idea: Both DataViews and DataForm use the same fields API for consistency - Evidence: "This fields API is shared by the data views and the data form component" #### ⏱️ [00:28:45](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=1725) — [H2] New Grouping and Infinite Scroll Features - Key idea: Recent updates include grouping by field and infinite scroll capabilities - Evidence: "Now we are able to group by a specific field and also we can implement now this infinite scroll" #### ⏱️ [00:32:15](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=1935) — [H1] Live Coding Plugin Example Setup - Key idea: Demonstrates practical plugin development using DataForm component - Evidence: "What I have here in WordPress studio is a very simple plugin that registers a new menu option" #### ⏱️ [00:35:40](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=2140) — [H2] Form Layout Configuration Options - Key idea: DataForm supports multiple layout types including panel, card, row, and regular - Evidence: "Layout represent the type of layout used to render the field. It'll be one of regular panel card row" #### ⏱️ [00:41:20](https://www.youtube.com/watch?v=L38OA4aSfoQ?t=2480) — [H1] Form Validation Implementation - Key idea: DataForm includes built-in validation with useFormValidity hook - Evidence: "Hook to determine the form validation status returns an object containing is valid" ## 📚 References - [WordPress DataViews Package](https://www.npmjs.com/package/@wordpress/dataviews) - [Block Editor Handbook - DataViews](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/) - [DataViews Storybook Examples](https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs) - [WordPress Developer Blog Articles on DataViews](https://developer.wordpress.org/news/) ## 🗣️ Paraphrase - WordPress provides DataViews and DataForm as powerful React components for managing data display and editing in admin interfaces - These components are used internally by WordPress core but are also available to plugin developers through NPM packages - The components share a common fields API and work together - DataViews for display, DataForm for editing with built-in validation ## 📰 Newsletter 🎯 **New WordPress DataViews Components Now Available for Plugin Developers** WordPress has made its powerful DataViews and DataForm components available to the broader development community. These React components power the template and page management interfaces you see in WordPress admin, and now you can use them in your own plugins. **What's Available:** - **DataViews**: Display data in table, grid, or list layouts with built-in filtering, sorting, and pagination - **DataForm**: Handle data editing with validation and multiple layout options - **Shared Fields API**: Consistent field definitions across both components **Key Benefits:** - Production-ready components used in WordPress core - Available via NPM without waiting for WordPress 6.9 - Recent enhancements include grouping and infinite scroll **Getting Started:** Install via NPM: `npm install @wordpress/dataviews --save` Remember to import from `@wordpress/dataviews/wp` when using WordPress Scripts to avoid version conflicts. Resources: [DataViews Documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/), [Storybook Examples](https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs), [Developer Blog](https://developer.wordpress.org/news/) ## ✅ Action Items #### WordPress - Core: Document import path requirements for WordPress Scripts users - Core: Expand DataViews examples in official documentation - Documentation: Create migration guides for developers adopting DataViews - Community: Promote DataViews availability in developer newsletters #### DevRel - Developer advocacy: Create tutorial series on DataViews implementation - Education: Develop workshop curriculum for component usage - Developer experience: Improve NPM package documentation - Developer marketing: Highlight DataViews in plugin development campaigns ## 🧪 Hypotheses - DataViews adoption will increase among plugin developers due to consistency with WordPress core UI - Shared fields API between DataViews and DataForm will reduce development complexity - NPM availability enables faster adoption than waiting for WordPress releases - Component reusability will lead to more consistent admin interfaces across plugins ### 📊 Methodology - Survey plugin developers on DataViews adoption rates and usage patterns - Analyze GitHub usage statistics for @wordpress/dataviews package - Track documentation engagement and developer feedback - Monitor WordPress plugin directory for DataViews implementations ### ❓ Questions - How will DataViews component updates be coordinated between WordPress core and external plugins? - What are the performance implications of using DataViews in plugins with large datasets? - How does DataViews integration affect plugin compatibility across WordPress versions? ### 🔮 Future Research - Component performance optimization for large datasets - Integration patterns with popular WordPress frameworks - Accessibility enhancements for complex data interfaces ### 💡 Implications - Practice: Plugin developers can create more consistent and professional admin interfaces - Policy: Need for clear versioning and compatibility guidelines for WordPress components - Education: Demand for comprehensive training materials on modern WordPress component development - Community: Potential for shared component libraries and patterns among plugin developers ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: Live coding demonstrations, WordPress admin interface screenshots - Improve: Component architecture diagrams, data flow visualizations #### 🔊 Aural learners - Present: Live narration and explanation throughout coding - Improve: Audio-only version focusing on concepts rather than visual code #### 🗣️ Verbal learners - Present: Detailed explanations of terminology and API concepts - Improve: Glossary of terms, analogies comparing to familiar web patterns #### 🧩 Kinesthetic learners - Present: Live coding session, hands-on plugin development - Improve: Step-by-step checklist, downloadable starter templates #### 🧠 Logical learners - Present: Clear component hierarchy, API structure explanation - Improve: Decision trees for choosing layouts, systematic comparison tables #### 🧑‍🤝‍🧑 Social learners - Present: Live stream format with chat interaction - Improve: Community challenges, peer code review opportunities #### 🧘‍♀️ Solitary learners - Present: Self-paced coding examples, documentation review - Improve: Personal project ideas, individual reflection prompts #### 🌿 Naturalistic learners - Present: Real-world WordPress development context - Improve: Examples showing component evolution, ecosystem connections ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Good code structure explanation for development context - Improve: Alt text for code screenshots, ARIA label discussions #### Keyboard navigation - Present: Focus on WordPress admin keyboard patterns - Improve: Demonstration of keyboard-only component navigation #### Contrast and readability - Present: High contrast code editor themes - Improve: Discussion of color accessibility in data tables #### Media and captions - Present: Live narration in Spanish - Improve: English subtitles, transcript with code snippets #### Standards reference - WordPress accessibility guidelines for admin interfaces ### 🌍 DEIB Assessment #### Cultural breadth - Present: Spanish-language content serving Spanish-speaking developer community - Improve: Cross-cultural plugin development examples #### Inclusive language - Present: Technical terminology clearly defined - Improve: Avoid region-specific development assumptions #### Neurodiversity support - Present: Structured approach to component explanation - Improve: Consistent pacing, clear section breaks #### Representation - Present: Diverse WordPress community participation via chat - Improve: Examples from various plugin types and use cases ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear progression from WordPress core usage to plugin implementation - Inductive strength: Examples support broader claims about component utility - Causal reasoning: Well-established connection between shared APIs and development consistency #### Fallacies - None detected: Technical demonstration supports all claims made #### Tone of voice - Overall tone: Educational and collaborative, appropriate for developer audience ### 🛡️ DARVO Analysis - No DARVO patterns detected - purely technical educational content ## 🎯 Conclusion This livestream effectively demonstrates the practical value of WordPress's DataViews and DataForm components for plugin developers. The key takeaway is that these production-ready components, used in WordPress core, are now accessible to the broader developer community via NPM packages. Developers should prioritize learning these components as they represent the future direction of WordPress admin interfaces and can significantly improve the consistency and quality of plugin UIs. The shared fields API between DataViews and DataForm reduces development complexity while providing powerful features like validation, filtering, and multiple layout options. The next practical step for developers is experimenting with the components using the NPM package, keeping in mind the critical import path requirements when using WordPress Scripts, and exploring the extensive documentation and examples available in the WordPress developer resources. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] WordPress DataViews enable plugin developer interfaces > [!quote] [DataViews y DataForm](https://www.youtube.com/watch?v=L38OA4aSfoQ) by [[Julio Potier]] via [[YouTube]]. Published 2025- <!-- deep-read:sections end --> ## 📺 Video  --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=L38OA4aSfoQ)* **[00:44]** Hey, hey, hey. [music] **[01:16]** Hey, **[01:52]** hey. **[03:37]** And we are in. We are live. Are the volumes right? Yeah, I think so. had an issue like five minutes before the stream for the the music they use in the in the background because I use a service that is called YouTube no cookies that allows me to play um **[04:09]** a video in the background for the music. And obvious has a thing that when you play a page, you cannot access the the page you are um you are accessing. So for a video for example, if you get a message like accept the cookies, h you cannot really play the video. Well, it's like a technical thing that is super annoying. But luckily there is a service that allows you to **[04:39]** to skip that issue. But today it wasn't working like five minutes before I wanted to start it wasn't working. So I had to improvise. I very quickly asked JPT and I'm finally found service. Well like problems of the streamers. Okay. So yeah, I think that volumes are right and **[05:12]** I would like to focus today's stream to data views and data form which are like really powerful uh components provided by WordPress that they are actually used in the in the UI of WordPress. For example, in the templates, let me let me show you. If we go to, for example, to **[05:44]** if we go to a playground instance, there are some sections and I think there will be more in time. For example, if we come here um pages. So this is a database component. And also if we go to templates, this is another database um page. So this is the database component. **[06:16]** So the thingy the thing um the way these things work in WordPress uh development like the development of the of the product is that the team developing the core of develop of WordPress they create like a little tools that can be used or with uh the use of those components um inside WordPress core in mind but **[06:49]** also they are available for any plug-in developer to to use them in their project. So this component that is used in WordPress core, you can actually use them in your in your plugins, in your own projects. And this is really cool because any type of uh list or um table you need to provide to to the users of your plug-in, you can use this uh component. **[07:19]** And as you can see, we have different views. All of this is provided by the by the by the components and also there's a combo actually in in these components that we have on one side a component to display the the data and on the other hand we have a a component to edit the data. I'm not sure if here I'm pretty **[07:51]** sure that let me see if I go to if I go to posts I think this is an example of the other component of the data form component. So what I want to do today is to explore this a little bit and I'm actually working on a a set of examples. **[08:23]** So I want to continue working on this live. And um while we are working on this I can comment things and I can um one of the things I would like to talk about is the latest updates on these components. So there's some work that has been done for these components in the during the WordPress 6.9 cycle, but um those enhancements are already **[08:56]** available. So we don't need to wait until WordPress 6.9 is released because these components are available through an MPM package. So we can go actually if we go to mpmjs we can see this component here we can install it and then we can use it in our uh projects. I'm going to share this in the chat. **[09:31]** So where do we start? I think that a good place to start is by reviewing the documentation. That's always a a good place to start. So, we can review the documentation from here or from the block editor handbook, which is what I'm going to do. We go to reference guides. We go to package in data views. What is this here? Data **[10:02]** views. So we are going to review the documentation a little bit then um I think in the documentation there are already some some of the uh latest updates of the component. So maybe we can comment that while we review the docs and then we can see some examples uh of how these things are actually uh used. So let's start with the documentation. **[10:33]** The data views package offers two react components and a few utilities to work with a list of data. So data views to render the data set using different types of layouts table grid list. So as we mentioned this, if we go to appearance themes and no sorry if we go to appearance editor templates we have I'm going to put this in another other window **[11:03]** table grid list. So we have um table this is the table view this is the grid view and this is the list view. The list view is um is meant to be used as a sidebar. So whenever you click an element on the right side the actual component is uh loaded. So we have these three um layouts we can use with a list **[11:37]** of data. Nice. How do we install this package? Well, like any other MPM package, we do mpm install um WordPress data views and and save. So in the documentation it points to the story book where there are actually a lot of examples of uh data views. If we **[12:09]** go to here data views, we have here a lot of examples and the the repository I'm working on is it actually contain these examples but I think that is more clear from a plug-in because here um there are some things specific to storybook Um, **[12:40]** and most of the times you cannot simply copy and paste this in in your project. So I'm working on a repository where I think it's closer to the use of these components uh from a plug-in. Um but yeah here you can see that um the data views you can define actions which are uh this delete item. This is **[13:10]** an action for each one of the items. Then we can define a config. we can define the specific um data list like the the items we want to display with the data views component. What else? Then we have a view which is the the object or represents the view **[13:41]** which includes the the layout but also [music] the order the filters um the page the uh items per page a lot of things. So every time we [music] change any of these elements, we need to update this object. So with that we get a view like um like this **[14:11]** and yeah here you have a lot of examples. For example, one of the latest updates is uh this now we are able to group by a specific uh field and also we can implement now um this is one of the of the new things uh that has been worked during the WordPress [music] 6.9 cycle. This is the now we can implement an infinite scroll with this H **[14:44]** database. For example, here you can see and then all items are loaded. Okay, let's continue reviewing the documentation. Okay, very important. I actually want to make a a pull request to to highlight this even more. Maybe convert this into a warning because this is very important. If you're trying to use the database component in a WordPress **[15:15]** plug-in or theme and you're building your scripts using the WordPress scripts package, which is something I always do, you need to import the components from WordPress database dbp instead of WordPress database. There's a reason because um this is to avoid conflicts between versions because WordPress um bear with me one minute. **[15:54]** Okay. Bless me. [snorts] So yeah, I was saying that if we don't do this, we can get some conflicts from workers. So if you want to use this component from a plug-in, take this into account and we will see that in the examples later. Okay. So usage the the WS component receives a data and some other configuration to render the data set. It will call the onchain view call back **[16:25]** every time the user has interacted with the data set in some way. Sorted, filter, change, layout. Let's review this. Okay, so we have a data source that can come from anywhere. WordPress API endpoint, CSV. The consumer prepares data fields and view based on user interactions. So we need to provide to the data views component we need to provide a data um **[16:58]** property the list of items to be displayed. This list should be filtered and sorted by the consumer based on the view property. So this is something that we need to do before passing that to the component fields data description. Think of this as declaring each column of the data set. And then the view configures the view how the data is displayed. Table grid list with filters are in place. How is it sorted? Pagination BC and then on change view is actually the **[17:29]** the the function that is triggered every time we change something. So every time we change uh something we prepare the the we update this properties accordingly and then we pass them again to the to the data views. This is a this is a good good diagram. **[18:00]** So as you can see here we have the component we have to pass data fields and view. Optionally we can optionally we can add some actions uh pagionation info. Well we need this if we want the the pagionation to work [music] default layouts but then very important on change view. Every time we change anything in the layout, for example **[18:32]** here, we can we can decide that for example, we don't need the description or that we want to um hide the preview. No, we want to show the preview. We don't want to hide it. And that we want this to be order uh in a descending order. So every time **[19:05]** I click in these things, the onchange view um call back is triggered. And every time I the unchange view call back is triggered and it re so it generates like a new data fields or view depending on the change that we have done and those uh because we are in **[19:38]** our react component every time this um these elements are updated the whole lus component is rendered. So this is how how it works. So then we have uh some properties. We have we have an actions API which is the way the different properties that we can use to define an action. So we will review **[20:09]** this later. Then we have the fields API which is the way we define like the columns of the database. This is important because this fields API is shared by the data views and the data form component. And then we have the form field API which is um related to the data form and we can review this later. I'm not uh **[20:42]** 100% sure about how this works. So so this is a good opportunity to review it. Okay. Okay. Okay. Now we can review the data. Okay. So the data is a onedimensional array of objects. So we uh create an array of objects. This is the data. This is the the items. The data can come from anywhere from a static JSON to a dynamic source like an HTTP request. **[21:12]** This is very powerful. I would really like to to implement something like this. I have an example. I actually wrote a I actually wrote um a post in the developer blog. If we do data views, we have these two examples. I'm going to share them in the the chat. This is article number one and this is the article number two. **[21:55]** where yeah. So what I want to say is that is that in this um in this articles of the developer blog, I explain how to create a a project like a plug-in that implements the data view component to display a list of data and also uh so the project is there's a static **[22:25]** source of data like a JSON with a bunch of uh photographies that are displayed in the in the data view. Let me show you because I think we have a playground here available. Let me see somewhere here. Yeah, there's a live demo here and um the source of data is a static but it would be great if we can if we could adapt this to to be um dynamic. So **[22:56]** right now we have this and we have different layouts table grid and the idea of this project is that um library is empty but from this list of elements this is we have pagination but we can um well this is the first version where we display the data but the second version is like a an improved version of this **[23:29]** first uh project. And in this second version, we added actions. So we have like the list of uh photographs, but then we can actually add those uh those photos to the to the media library. So they are I think I use that pause the first time I get into that abuse. Hey. **[24:03]** Yeah. Well, happy happy that that um it was helpful. I'm actually thinking on writing a a second a second um another article that maybe uh more focus on the data form. [music] So so yeah uh hopefully it's also it's also useful. Um, **[24:36]** by the way, um, Alfredo, how did it go? Your talk about, um, what abilities API, but I think it was like more about, um, a generic view of of AI, right? It was in what, the Mala, I think. Well, I hope it went well. Um, [music] it was awesome. Yeah. Like showing. Yeah. Nice. Nice. Okay. Like showing what WordPress has to offer. You see WordPress TV the talk. **[25:11]** Let me see [snorts] if I can find it. H today is the WordPress and Jose contributor day. Ah, so you are you must be busy. Nice. Nice. Yes. Yeah, I can imagine. So, um, **[25:45]** uh, WordPress and Jose. Okay, let's Word, uh, WordPress San Jose 2025. Where is it? WordPress San Jose. I looking for the Ah, I thank you. Thank you. It's here. Yeah. **[26:17]** So, this is the WordPress the work where Alfredo is right now. And and this is the agenda. I see. So today is contributor day. Okay. Nice. Um I'm going to be at work camp Valencia. Work camp **[26:48]** Balenthia 2025. next weekend actually and I'm also going to lead one of the tables. Wow, 350 people. That's a lot. Congratulations. Yeah, Alfredo is is saying in the chat that he's one of the lead organizer and they sold out 350 people. That's a lot of that's a lot of people. **[27:18]** Congratulations. Nice. So yeah, I will be at work on Valenthia next uh weekend and I'm also going to lead one of the tables at contributor day by which by the way, Alfredo, now that I have you here, I have a a tool for you. Let me see if I can find it because it's a um where is it? Um, **[27:52]** let me see. It's a tool. Yeah. Uh, this tool I'm going to share it in. Maybe you can maybe you can give it a try. I have shared the tool in the chat. So **[28:22]** this is an experimental tool um created by Adam. Adam is the mastermind behind Playground. And this tool is um created with the goal of um reducing the the friction points of contributors. So for contributor day is a is a really cool tool to **[28:56]** to keep in mind. I I I want to to propose it for contributor day at work on Valencia. But uh yeah, have a look at it and give it a try. Let me know let me know how it goes. The thing is very simple. You install install this tool and you should be able to contribute to WordPress core without having g without having node without having mpm installed **[29:26]** because this tool um downloads the latest version of WordPress, launch a server, you can do changes and through the tool you can actually create a div that you can um attached to a track issue. So in theory everything is uh provided by the tool and and in one of the last conversations I **[29:56]** had with uh Adam about this tool, he told me that he was planning into expanding expanding this tool to also allow a contribution to Woodenber. I don't know if he has done anything uh yet, but it's on the on the road map. So, so yeah, Alfredo, let me know. Let me know. Let me know how it goes because um if it goes well, I think that um **[30:28]** I think that uh it can be prioritized and and really make this a um a recommended tool in all the the contributors day. Okay, let's continue with the with the data views. We were reviewing the okay so we have the data and is the consumer responsibility to query the data source appropriately and update the data data set. This is important because **[30:59]** we provide the data set but it's our responsibility to actually update a data set every time we change. So this is an important uh concept. the data view and the data form is just like um a tool to display data. It doesn't manipulate the data. We need to do that work in whatever form we provide the data. So if we provide the data from the rest API, **[31:29]** every time we change filters, every time we change sorts or whatever, it's our responsibility to maybe do another request to get an updated uh version of that uh data list. If we are using uh static data, it's also our responsibility to manipulate the data. So this is an important idea. Each record should have an ID that identifies them uniquely. H if they **[32:00]** don't, the consumer should provide the get item ID property to data views, a function that returns a unique identifier for the record. So we have get item ID. Where are we? We are in data. We are in Yeah, in properties we are checking the properties. Uh let me see. I have here um **[32:33]** yeah I have here um plugin that is really useful because it provides me a a table of contents uh from the from the headings. So that's that for me is really handy. So we are here we these are the okay these are the properties that we pass to the to the database component. **[33:06]** We have the get item ID. A function that receives an item returns a unique identifier. This is optional. the field will get a default implementation by database that returns the value of the item ID. Okay, this is optional because if we uh provide an ID, we don't need uh this but if we don't provide an ID field, we need **[33:37]** to provide this function. Okay, get item level. A function that receives an item and returns its hierarchical level is optional, but this property must be passed for data views to display the hierarchical levels of the data view if view shows is true. Okay, I haven't used this before. So I'm going to skip it for now. Fields. This is important. Uh the fields describe I think the most important ones are view well are the **[34:08]** ones that are here in the example [music] h in this example right here the most important properties are data fields and view. Okay, so we were fields. The fields describe the the visible items for each record in the data set and how they behave, how to sort them, **[34:40]** display them. See fields API for a description of every property. So the fields is an array of objects that each object um defines like each column of the table. And for each uh column that we want to display, we can define like a lot of things like for example how do we want to to render the value? Um if we want to **[35:14]** allow that um field to be filtered by want to enable sorting um and yeah several things all the properties we use to define each field um is part of the fields API. So we need to come here and these are the properties we use to define each one of the columns. So if we go to **[35:45]** uh if we go to here for example um let me see I'm going to going to show everything. So these properties these are fields template preview description author and for each field we can um we can set a few things. For example template is locked so we cannot really hide that but we the rest we can. **[36:22]** So we have the fields then we have the view the view object configures how the data set is visible to the user. Okay. So here we have um different values the type which is table grid of list like what we have here table grid of list. We can um we can allow **[36:53]** we can provide like these three the three layouts available but only one the only two uh whatever we we define here um and the type is the actual one. So every time we change this we need to manually update this property. So the data views displays the data in a specific uh specific way. then search if there's a search item. Every **[37:23]** time we um do a search like for example here this property will be updated and we need to manually update the the set of data. Then filters apply to the data set. So every time we h apply a filter for example here author is any is none **[37:59]** is any um so for example if I add that a template uh or maybe I can duplicate here let me see if I go to grid and this is Not the latest version. Let me see. Ah, this is the one. So, we can try from **[38:32]** playground. We can try the the beta that has been launched like a few days ago. So, I'm going to apply settings and reset playground because I want to try one of the new features that is this one. Uh, okay. Go away. If we come here to appearance to the editor and then here in templates we can come to so right now we can filter and **[39:02]** by author and right now we only have an author which is the the the templates that are provided by the theme. But but what we can do is uh duplicate. This is something new. We can duplicate. I'm going to duplicate and I'm going to create uh my version. So now we should have two authors. **[39:32]** Um okay because here single let me see created templates 325. Ah but here this is a filter here we only have like the active templates. So what we can do is come here activate this one. I want to use my version not the theme version. And now if we come here we will have **[40:06]** a mix of the templates provided by the theme but I might buy templates and what we can do here is to filter and show only these ones. So coming back to the that every time I change this I need to manually uh update the data set per page number of records to show per page. This is another configuration that can be done here. So every time I change this I need to also update the the view **[40:38]** object page the page that is visible again every time that uh well I don't have here more pages but for example I have in this example every time I change this I need to change the current page. So the proper set of data is displayed. Uh sort field direction again every time **[41:10]** I change every time I change uh this we need to update the view object with with that. Okay. This is there is entire field meta field description field. Uh here we can um define the fields um that represents the title, image or description. And with that we can get a a very cool view **[41:40]** of the of the information of the item. We will see that in in an example uh later. Show title, show media, show description. Okay, true by default, but we can uh put it to false. Show levels whether to display the hierarchical levels for the data. Okay, I'm not going to enter into this group by field. The we can now we can **[42:12]** group by field. The ID of the field used for grouping the data set supported by the grid and table layouts. And then we have fields um a list of remaining field ID that are visible in the UI. So every time I come here and I select if I want to hide or show we will update the view view component. Remember that we are here **[42:42]** um we are here in the view component. And uh we need to pass that updated object to the datab layout config that is specific to a particular layout type. Okay. Then the unchange view very very important the callback executed when the view has changed. It receives the new view object as a parameter. **[43:14]** So every time I do a change the every time I do a chain okay let me see the view is a representation of the visible state of the data set. So the view represents the the visible state of the data set. What type of layout is used to display? How the data how the data set is filtered? how it is sorted or pagenated. The **[43:46]** consumer is responsible for using the view config to query the data provider and ensure the user decision. Sort pagionation filter. This means that we need to actually order the data um um set the view object with the with the proper information like if it's stable, if it's a grid, we need to do that and then pass that information to the component. The following example shows how a view object is used to to query the **[44:19]** how a view object is used to query the WordPress press API via the entity substraction. The same can be done with any other data provider. So we have a a view a default view which is the subject that represents the how the data is going to be displayed in the data views component and we have a default [music] uh layout table five elements per page only one page the we need to actually calculate this if we if we get um a list **[44:49]** of items the default uh sort by date and descendant and no no search uh terms the filters that are uh available or that are actually active uh title field the fields and the layout. Okay. And then on change view we use set view. So set view receipts **[45:20]** is this company. Um so set view receives the H. Okay. So every time, okay, every time I change the I change any any of the elements of the data view, what happens is that **[45:50]** this view state variable is updated. When this state variable is updated, we um call this use memo function that actually cache the results for the same uh view object and it generates like a whole new set of data which include the filters **[46:21]** and the Okay. And I'm generating a new query arcs that um ah this is really cool. So it generates a new query arcs and this updated query arcs is the one we use to do the recipe request via the um data **[46:51]** data layer. For those who doesn't know what the data layer is, I created a actually yeah, I have here a WordPress data series. I'm going to share this where I um went **[47:22]** I went through a a tutorial that uses a lot of the like the selectors and the dispatchers provided by the WordPress data. So yeah, this is really really cool. Mhm. [music] Okay. Then then we have actions. With actions and the actions [music] they have the an actions API to define each one of the actions. The actions API is this one. ID label is **[47:55]** primary icon is eligible callback. Then we have pagenation info. All of these are properties that we need to pass to the database. The pagenation info the total items. Total pages um search where the search uh is enabled search label what text to show in the search input uh whether the data is loading. So we need to combine this with uh the rest of our logic. So if we are **[48:28]** processing something what we can do is to to pass like a a loading component here. I know it's a it's a boolean so it's just true or false. I guess that the the component displays that react component uh internally default layouts the this property limits the available layouts and and provides layout information about active view types. So here we can limit the available uh layouts. Um if it's empty **[49:08]** if empty disable all layout types. So if we don't do if we do nothing uh the three layout types will be available. But if we want to limit we need to specify here the layouts we want to to provide to the user. Selection the list of select selected items ids. If selection and unchange selection are provided. **[49:43]** So if selection and unchange selection are provided the data views component behaves like a controlled component otherwise it behaves like an uncontrolled component. Okay, I don't understand this exactly but yeah uh we can uh we can select actually I think this is related to let me see here in data views there is a **[50:14]** database speaker I think it's related to this if we come here to the inspect we can see that see. No. Yeah. But every time I select I guess that **[50:45]** something happens internally. So when I confirm that selection is uh registered internally. on chain selection is item clickable render item link. This is new. This is one of the new things and this is a render function that we can use to render clickable items and we can like wrap the links into other uh components **[51:17]** and maybe use some React components uh needed for a React router application. So it's really cool. um another vot component that we can uh use to for the display of the of the field. We are here and these are the properties that we pass remember to the data views the config um with the configuration for **[51:49]** the pagionation. So we um this object contains the number of pages and the items per page. And then empty which is a react component we can pass we can pass if the if there are no results. Okay. Composition modes. The database component supports two composition modes. [snorts] Yeah. This is really cool because this **[52:19]** is new. This is one of the new things. Um the database component supports two composition modes. Control is the default usage mode. So database renders a full layout out out of the box. We don't need to worry about where is each one of the parts. Where is the search box? Where is the um the filter section? Where is the the view switcher? But then we have free composition. So there are available uh all the sub components are **[52:50]** available as children that we can use and we can actually uh we can actually create or use or a custom layout using this uh this children. For example, here I think there's an example uh free composition. Yeah. So here the things are ordered in a different way because it's using **[53:22]** it's using these children this [music] sub components we can see the the code here let me see data views data views um recomposition here and show Oh, this is not clear at all. **[53:54]** Re composition data views empty. So in theory we should have here data views this only this okay this doesn't seem like the code of **[54:27]** uh this because I think this is using No this doesn't seem let's let's check the code because if we go to Gutenberg and we look for data views and we go to the **[55:00]** to the stories and data views. story and there is like a free composition here custom composition example ah here yeah it's using database filters toggle datab search datab pagination use config so this is example **[55:32]** Okay, accessibility configurations. Okay, then we have datab speaker which is like a a variant of uh the database database pick the component is very similar to a regular database component but it's optimized for selection of picking of items. So this is a this is this is this **[56:03]** Okay. And then let's uh spend some more time with the data form. And I have here an example that maybe we can play with a little bit. Let me see. What are you? What are you? Um cursor data form example. Okay. **[56:37]** Uh yes. So this example that I have here I have actually um let me see local host it's a let's check WPM **[57:10]** start I think it's already it's already started but let me check although I also have uh okay uh no worries because I have this also in WordPress studio. So what I have here in WordPress studio is um **[57:42]** if I go to WP content plugins yeah this data form example is linked to to my project. So what we can do is just check this uh component from here. And what I'm going to do is uh **[58:14]** yeah data form. Okay. Nice. Okay. So, what do we have here? We have here a a very simple plugin. We have here a very simple plug-in that registers a new menu option. **[58:52]** So it registers a new menu option called data form sample for that page. it uh renders a specific page with an ID which is this one and it also encq a specific JavaScript file. This JavaScript file is generated with a build process **[59:23]** that we can launch by doing MBM room build or MPM start. can remove this for example and what we can do here is um mpm start. So we can do changes here and this m this build process what it's going to do is going to take the indexjs uh that is available in the src folder which is this one and it's going to generate the build **[60:00]** version which is this Okay. So this is a a very simple data form. So the fields this is the data just um title author order. This is the data. **[60:33]** Then we have the fields and this fields array is defined using the fields API using the fields API which is this one. So it's the same API for the data views and for the uh data form. **[61:04]** And then we have the form which uh is an object with uh I think this is the form fields API. Let me see. Form fill API. Let me see. Form fill **[61:35]** API. So okay let's start with uh from the beginning data form. So the main idea is we have data views to to display data and data form to edit **[62:08]** data. They share an API to define the the fields and that fields API for the data views will be used as the columns as the definition of each item and for the data form it can be used also to a lot of things. For example, if we define a type um I think it uh generates some kind of internal validation for data form and **[62:41]** for data views it automatically provides like sorting functions. Okay. Anyway, let's uh review this. So data a single item to be edited. It can be thought of as a single record coming from the data property of data views. Good. So it doesn't need to be. It can be totally separated or a mix of records. Uh if your app supports bulk editing nice. **[63:12]** So we are where are we? We are here data form fields. The fields describe which parts of the data are visible and how they behave, how to edit them, validate them. See fields API for a description of every **[63:44]** property. So this is uh shared by the by the um data views component. And then we have form form object. So we have the form. Okay. Form layout and fields. So the form layout an object describing the layout used to **[64:14]** render the top level fields present in fields. C layout prop in form field API. So the layout. Okay. So here the data form will automatically display the the elements um without us uh needing to think about the specific layout specific UI. So layout represent the type of layout **[64:45]** used to render the field. It it'll be one of regular panel card row. This prop is the same as the form layout prop. So for example in here we have a okay so the form have layout and fields. **[65:19]** So if layout is empty, if layout is empty, it is empty. I guess it's regular. Type regular required. **[65:52]** H this is per per field. Let me see how does this work. So okay, this is the layout. **[66:26]** Apper fields. Okay. Form an object describing the layout used to render the top level fields present in field. C layout prop. Okay. and then fields a list of fields ID that should be rendered. Fields ID can also be defined as an object that allow you to define a layout, layer position or children. Okay. Okay. So, we can define um layout for all the fields but then also for specific fields. So, **[66:57]** let's play with this a little bit [music] in our example here. What happens if I do this? Okay. So, we have the layout panel. **[67:32]** Then we have the regular the regular H. So we have panel regular. Then we have uh card. **[68:10]** We have card. Nice. And then we have row and then we have row this is for all the fields but then what I'm going to do have row one row but then what I'm going **[68:43]** to do is I we can define also Maybe I want to say the title. Okay. So the fields the fields API I need to say ID. Okay. So now I need to make this an array. **[69:16]** of objects with the string as the value of an ID property. Okay, I think this is the same and we can do here for example uh **[69:46]** panel side. Mhm. But then what I can do here is for a specific ID fields API. No layout layout for a specific I can say layout regular **[70:29]** and layout panel. well panel. No, because this is the one I'm using. So, let's make it card. Yep. **[71:01]** So we can have like a configuration by default for all the fields but also also for individual fields. Nice. So where were we? Data form data fields which is the fields API and then the form **[71:34]** layout and object describing the layout used to render the top level fields present in fields. C layout prop and then a list of fields that should be rendered. Fields ids can also be defined as an object and allow you to define a layout label position or children if displaying combined fields. Then on change a callback function that receives an object with the edits uh done by the user. **[72:04]** So let's add an unchange here. Well, in our case, the onchange we can just add here console lock. So every time we change, we can see how the new value is received here and also here. **[72:42]** So through this callback we can actually update the data from the source of data validity. So validity data views I'm going to collapse this database speaker collapse this change validity object that determines the **[73:13]** validation status of each field. There's a use for validity hook that can be used to create the validity object. See the utility below. This section documents the validity object in case you want to create it by other means. The top level props of the validity object are the field ids. Ah so this is the ID **[73:45]** fields declare de declare their validity status for each of the validation rule supported required elements custom. If a rule is valid it should not be present in the object. If a field is valid for all the rules it should not be present in the object either. Each rule can have a type and a message. >> [music] >> The message is the text to be displayed in the UI controls. The message for the required rule is optional. **[74:19]** Okay. So let's see how this works. Um Mhm. So this is H. This is really cool. Let's check. Okay. So this is the data **[74:53]** and then the fields we have ah children and children. Okay. So here name, phone, and email, which is what I **[75:26]** name phone and email. This is the children name, phone, and email. We have the ID, label, contact, a layout, label, position, top type, panel. Uh and this corresponds ID name iPhone corresponds to the um to the ID of data we can change. **[75:58]** Okay. So we display only one but when we h click we actually we actually see all the all the fields. Okay, let's update our example with this data. Our data now is going to be this. or fields now is going to be this. **[76:40]** Our fields is going to be this. And our form now is going to be this. Our form is going to be this. **[77:13]** Okay. So we have um we have here the first one the so the fields so we have fields **[77:45]** and form this is the children. Okay. So, we have type card customer and uh why this is ID payments. **[78:23]** Um, payments not displayed. Okay. Payments. Payments. Payments. Okay. This payments. I'm missing this. Um, let's look for this. Okay. **[78:59]** No. Yeah, the customer. Um, I want to look for this here under database. **[79:35]** Yeah, here data form. Uh so we have the field. Okay. So we have **[80:05]** fields. We have name, phone, email. Name, phone, email, plan. I'm going to copy this. **[80:41]** the field. Uh, okay. And now I need to import the batch from uh component. **[81:12]** Okay, I think it's because of the batch. So, um, I'm going to replace this with a paragraph and this with a paragraph and get out. Okay. And now we have the the payments. Okay. Alfredo, see you. **[81:43]** Hope the the contributor day is going well and yeah see you in other stream. Okay. Um, so we have here we have here well the layout here is not **[82:15]** really nice. I'm not sure the customer and this is the um this is the form that we have a layout fields **[82:46]** Fields, fields, fields, fields, fields, fields, fields, fields. Um, this an array fields fits and um fields. **[83:20]** We have filled I know we have fields here. All right. Yeah. **[83:53]** No, no, this is already fine. Okay, let's let's review what we have here so far. We have the data. This is the information we want to edit. Then we have the fields which describes each one of the data provided here in order to add validation. So I think that um I think that maybe if I add here uh I **[84:24]** don't know uh there is no validation here at all. Then maybe I can remove this. I can remove this and I can remove this. There's no validation at all here. So maybe this is something that we can add. Let's see. Let's see if we can add this **[84:55]** with the validity validity. And I'm going to check here validity. Okay. Isn't this [music] something data form validity? Validity. Okay. **[85:28]** The validity with here use form valid validity. Okay. And what? So this is a hook. Use form validity. Let's check what's this about. This is in utilities. Okay. Hook to determine the form validation status. Item. The item being edited. Fields. The **[85:59]** fields config as described in the fields property of data views form. The form config as described in the form property of data views [music] returns an object containing is valid. A boolean indicating if the form is valid validity an object containing the error search property is a field ID containing description of each or type C validity prop. for more info **[86:35]** hook to determine the form validation status. So I guess that we can add here a validity. And what we can do here as well is to maybe uh is valid. **[87:10]** So let's see if we can cross validity is valid just form validity and we need to import this validity is what we are passing here. So, this comes here **[87:40]** and then it's valid. Maybe I can just say here. Okay. Because post is not defined and post is what is post is data. **[88:11]** So it's data in my case is data. So this is data. This is fields and this is form. Little form form is invalid. And what we can do is console lock. Uh but it is valid. **[88:45]** I know it's valid. It's true. Uh but then it's false because in the first iteration is true but and the error is customer card children plan elements. Uh so the plan where are what is the plan? **[89:26]** Okay. in customer card here. The plan. Okay. And the plan **[90:04]** Uh basic and define true the form is valid. Ah the form is valid because because the plan needs to be one of these values and I **[90:35]** was actually assigning the basics. So for example, if I assign to if I assign here a uh value that is not one of these elements, then automatically the form is invalid and I get here the error. **[91:08]** value must be one of the elements. Cool. Cool. Nice. Okay, let's continue. Let's continue. I'm going to this here. Continue checking the documentation. **[91:39]** actions API form field API. Okay. So this is the API for the form property of data form. And this form property is this. We can pass a layout which is like the default um way of displaying these values for all **[92:12]** the the fields. But then we can also specify a layout for each one of the fields. And this is interesting because because we have here So we have here customer **[92:46]** which is a card ID customer card. This is just an ID because this doesn't represents any of the it's like a a way to to grab all this information. It's going to be a card with an ID with a label which is customer is collapsible true. So we can do this summary plan summary. **[93:18]** What is this? Summary. Plan summary. Huh? Plan summary summary. Plan summary. And and this is one of the fields summary plan summary. **[93:53]** Let me see if I can add here. Ah nice. So summary is what appears here uh when we collapse. So this is like the plan. **[94:28]** Okay. So we have here what we have here is um we have here the first element of the fields is the subject represents this card with a summary is collapsible. This is the layout. This is just a wrapper and plan summary **[94:59]** is one of the fields defined. But this this can correspond to one of the data or not. It can be just a field that we can use to then um specify a specific render uh fields. So fields corresponds to the the the elements that we render even when they are not part of the the data here. **[95:33]** Okay. So, we have um this card that has children and these children are the plan, the shipping address, the billing address and display payments. and display playments is a boolean. If **[96:05]** we put this to false, this is not uh and as you can see we need to update uh the data on our own. So here we just have access to the to the actions to the to the events that are triggered when we click on on the elements. But we need to update the data ourselves. So for example, if I do click **[96:35]** here somehow I would update this information here and we would pass this to the to the element. We can actually do that. So maybe what we can do is okay const uh update data. Um because indeed uh **[97:07]** what we can do is uh con data say data use state and then we can do here import use state from element and update data update uh **[97:39]** cost. Um what we can do here is uh what we get here is updated data. And what we can do here is something like this. **[98:25]** See canot access that before initialization. Ah yeah. Okay. So maybe what we can do is this. So this is the default value of data and now **[99:02]** ah and everything nice. So what we are doing because we are getting the the element that has been changed what we are doing is updating data with the original object and then we are just updating the property that has changed. **[99:33]** Nice. Nice. Okay. Um and then the validity I want to see if I for example here I want to avoid this to be removed to be empty because I need this value. So let's see here required **[100:09]** validity here title required. Okay. Object that determines the validation status fit field. Okay. Object uh that determines the validation status of each field. There's a use form validity hook that can be used to create the validity object. See the utility below. This section **[100:41]** recommends the validity object in case you want to create it via other means. The top level props of the bad object are the field ids. Fields declare the validity status for each of the validation rules supported required elements custom. How do I apply these rules? Um each rule can have a type and a message. **[101:22]** Um let me see validation I'm console log I define true data fields and form. I guess that somehow in the fields **[101:53]** somehow in the fields or in the form I can let me see in the here. Here it is. So in the fields API we can define so object that considers the validation rules for the field. If a rule is not met the control will be marked as invalid and a message will be displayed. So we can **[102:26]** okay so it's an object. So an object that can have required elements and custom. So here in the so it's the customer card and here contact right ID label **[102:58]** we have is valid Fields API is valid. ID label. We have ID label layout. This is the fields API. Okay, this is something specific for the **[103:29]** children and then form field and the form field can be ID layout. This is this is only this is only um valid for the form field but **[104:02]** but one thing that we can do is is valid. So here is valid object that contains so I'm going to required **[104:32]** true beauty. This is how >> and the fine true. So it says is valid. Okay, let me create a custom. I just **[105:06]** want to check and define true. true means that it's valid. So, this is not really working. **[105:39]** >> Let's see if I can create a custom item and field. I'm going to return true because I just want to just want to check Oh, **[106:16]** that was valid. But what I want to do is console lock this Okay. Now, in theory, every time I change this **[106:48]** uh Console log is valid contact **[107:18]** because this customer contact. I know because it's the name. So, customer contact top. Okay. So, **[107:50]** This is going to be um this. No, this is not working here. And if I do this and is valid um **[108:23]** required true see what happens. Um okay what we can do is check the here require require H **[109:21]** elements elements equal none. Okay, let's add this required. So require is uh true somewhere. Con required equal true. Require is passed here. **[109:54]** Um elements since it's not defined a sync or a sink or none. **[110:34]** Okay. What is this elements thing here? Wow. Elements. Okay. What is this? list. Okay. Object that determines the validation status of each field. There's a use form validity hook that can be **[111:04]** used to create the validity object. See the utility below. This section documents the validity object in case you want to create it via other means. The top level props of the validity object are the field ids h okay so I define a specific **[111:37]** um rule for each field and then the validity is what I get with This hook returns an object with the ID of the field as the property name and then an object containing the error and the the rule that is uh related to that **[112:09]** error. Okay, the top level props of the validity object are the field ids. Fields declare their validity status for each of the validation rules supported which can be required elements or custom. If a rule, if a rule is valid, okay, if a rule is valid, it should not be present if the object if a field is **[112:41]** valid for all the rules, it should not be present in the object either. Okay, each rule can have a type and a message. The message is the text to be displayed in the UI controls. The message for the required rule is optional. And the built-in browser message will be used if not provided. The type can be validating when the value has been validated. Customizing rule invalid when the value is invalid or valid when the **[113:13]** valid note the valid status. This is useful for displaying a valid message when the field transitions transition frame valid valid. Okay. And then in the fields API we have is valid. **[113:43]** Okay. Object that contains the validation rules for the field. If a rule is not met, the console will will be marked as invalid and a message will be displayed. Okay. Console lock and console lock data. So if I mark this as required true **[114:23]** and the name this name is empty uh but the the validity is uh still true. So boolean indicating whether the field is **[114:53]** required or not disabled by default. elements boolean restricting selection to the provided list of elements only enabled. By default, the array edit control uses it to restrict the input values as well. Custom a function that validates a fields value. If the value is invalid, the function should return a string **[115:23]** explaining why the value is invalid. Otherwise the function must return null not true to null. So null and I receive here an item and a field. **[116:00]** Okay. This is not really. Ah no. Uh go through and No, this is not being **[116:31]** executed. is valid and let's check the validation. So required please fill in this field. You know what? We are going to **[117:01]** get this validation data form. The validation example is validation this one. Okay. Show code data form. So this is the data boolean true categories fields elements true require true. So for example the **[117:33]** the password [music] the password for the email elements true require true is valid. **[118:04]** name undefined. True. Okay. So, the rules are fine, I guess. But then there. **[118:50]** And the data, the fields. Okay, let's have a look at the validation. Okay, this is something that I need to **[119:26]** data adapter compon validation render validation component arch types required elements Okay. Validation text required. Select **[119:58]** required. **[120:37]** validation component. So here we have the items. Custom text. Custom text rule. A custom text rule. Custom text rule. **[121:08]** So we have ID. Ah because uh I think I need to No, **[121:40]** I know. This is This is in the fields. This in the fields. Uh, okay. It was here. Oh **[122:10]** fails is valid required. True. Um, **[122:45]** so is Spanish required elements type text label text. Okay, these are the fields. All the field blah blah blah post field form validity on change. **[123:17]** In theory, this should work, but um I'm not sure what's going on here. Maybe we can try this with other um for example the email as well. The email as well. See? **[123:54]** Uhhuh. Please fill in the field. Uh but the validity is not working well because it says that the form is valid. when it's not **[124:29]** um use form [music] validity is valid. Eight. Okay. In theory, every time I change the **[125:02]** values, the data with the fields and the fields contains is valid and the data contains the data. So, no, I don't know what's going on here or what's the What's the **[125:37]** behavior expected? Submit is okay. So there are a lot of options that are checked here. **[126:14]** A boolean required. And is there any console here? No. Toggle required. No. Okay, let's review this again. And yeah, I think I'm going to to end the stream and I will check this um with more calm. Let's do a a final review of uh **[126:46]** what could be going on here. Custom text rule. Custom text rule. Okay, this is part of this validation component. This is the data we have. Text post set post make a sync. **[127:19]** Okay. Custom text rule. But these are the rules that are passed here. But in theory, see if it's required get elements. Okay. But this is okay. Nice. And the fields. **[127:51]** And the fields I pass this text text is valid required. In theory I wouldn't I don't need anything else just required. But um the form has the fields here and this is the key. In theory, this should return is valid as false because **[128:22]** I'm passing the data and the fields. So, let's do a final check. And after that, I'm going to end the session because it's enough for the Friday. Okay. Um, console log data. Console log filter. **[128:59]** Okay. Fields. Okay. Fields name is valid require. Maybe it's because uh it's **[129:31]** true. It's only this. And I'm going to add this to this and to this. **[130:02]** So true, true true. No, shouldn't be true. Okay. And the field is properly marked, but um should be true. Okay. I don't know what is going on, but I will investigate this. But for now, I think uh it's enough. So yeah, that's uh been all we've been **[130:35]** checking today the We've been checking today the data form and data view here. This uh data view and data form these are components react components provided by WordPress and they are used internally by WordPress core. For **[131:08]** example here this is a data views and as you can see we can use them in our own plugins. I will I'm working on this repository with all a bunch of examples but also I will upload to the streams repository the this specific example that we have **[131:40]** been working on today like uh this and I will also share in the streams. But here, in case you don't know, here I compile all the all the information about the streams that I've been doing uh during this year. As you can see here, I'm switching every week and one **[132:12]** week I do the stream in Spanish and the other week I do it in English. So h last week I did I did one about uh datab data form in Spanish. So I will update this with the information all the resources that we have used during the stream the project and yeah any other information. So that's all for today. H hope you have a a great weekend and yeah, see you see you next week. Okay, **[132:45]** bye. **[133:19]** Shin weather is good. **[134:15]** Shin shin.