آموزش بلوک های گوتنبرگ برای توسعه دهندگان وردپرس و React

سرفصل ها و درس ها

مقدمه ای بر ویرایشگر بلوک An Introduction to the Block Editor

• قبل از تماشای دوره Before Watching the Course

• قبل از تماشای دوره Before Watching the Course

• نصب قالب وردپرس استارتر Installing a Starter WordPress Theme

• رابط ویرایشگر بلوک The Block Editor Interface

• رابط ویرایشگر بلوک The Block Editor Interface

• رهنمودهای رابط و طراحی بلوک The Block Interface & Design Guidelines

• رهنمودهای رابط و طراحی بلوک The Block Interface & Design Guidelines

• چگونه یک پست در ویرایشگر بلوک در پایگاه داده ذخیره می شود؟ How is a Post in the Block Editor Saved in the Database

• چگونه یک پست در ویرایشگر بلوک در پایگاه داده ذخیره می شود؟ How is a Post in the Block Editor Saved in the Database

• چگونه ویرایشگر ویژوال از HTML ساده بازسازی می شود How the Visual Editor is Reconstructed From Plain HTML

• معرفی مختصری بر ذخیره‌سازی داده‌های مشابه Redux در ویرایشگر بلاک A Brief Introduction to the Redux-like Data Stores in the Block Editor

• آرایه وضعیت پست در عمل The Post State Array in Action

• آرایه وضعیت پست در عمل The Post State Array in Action

مقدمه ای بر ویرایشگر بلوک An Introduction to the Block Editor

• نصب قالب وردپرس استارتر Installing a Starter WordPress Theme

• چگونه ویرایشگر ویژوال از HTML ساده بازسازی می شود How the Visual Editor is Reconstructed From Plain HTML

• معرفی مختصری بر ذخیره‌سازی داده‌های مشابه Redux در ویرایشگر بلاک A Brief Introduction to the Redux-like Data Stores in the Block Editor

بیایید اولین بلوک خود را ایجاد کنیم Let's Create our First Block

• ایجاد یک افزونه جدید وردپرس Creating a New WordPress Plugin

• ثبت اولین بلوک ما Registering our First Block

• ثبت اولین بلوک ما Registering our First Block

• بازگرداندن اجزای React در توابع ویرایش و ذخیره Returning React Components in the Edit & Save Functions

• بازگرداندن اجزای React در توابع ویرایش و ذخیره Returning React Components in the Edit & Save Functions

• کامپایل ESNext به ES5 با wp-scripts Compiling ESNext to ES5 with wp-scripts

• کامپایل و بارگذاری فایل های SASS Compiling & Loading SASS Files

• ایجاد یک بلوک با @wordpress/create-block Generating a Block with @wordpress/create-block

• ایجاد یک بلوک با @wordpress/create-block Generating a Block with @wordpress/create-block

• پیکربندی ESLint & Prettier برای فایل های جاوا اسکریپت Configuring ESLint & Prettier for JavaScript Files

• پیکربندی ESLint & Prettier برای فایل های جاوا اسکریپت Configuring ESLint & Prettier for JavaScript Files

• پیکربندی Stylelint برای پر کردن فایل‌های SCSS ما Configuring Stylelint for Linting our SCSS Files

• پیکربندی Stylelint برای پر کردن فایل‌های SCSS ما Configuring Stylelint for Linting our SCSS Files

• اضافه کردن یک قلاب Git Pre-commit با هاسکی Adding a Pre-commit Git Hook with Husky

بیایید اولین بلوک خود را ایجاد کنیم Let's Create our First Block

• ایجاد یک افزونه جدید وردپرس Creating a New WordPress Plugin

• کامپایل ESNext به ES5 با wp-scripts Compiling ESNext to ES5 with wp-scripts

• کامپایل و بارگذاری فایل های SASS Compiling & Loading SASS Files

• اضافه کردن یک قلاب Git Pre-commit با هاسکی Adding a Pre-commit Git Hook with Husky

اضافه کردن پشتیبانی تم برای ویرایشگر بلوک Adding Theme Support for the Block Editor

• اضافه کردن سبک های سفارشی به ویرایشگر بلاک Adding Custom Styles to the Block Editor

• اضافه کردن سبک های سفارشی به ویرایشگر بلاک Adding Custom Styles to the Block Editor

• افزودن پشتیبانی برای Align Wide و Align Full Adding Support for Align Wide and Align Full

• افزودن پشتیبانی برای Align Wide و Align Full Adding Support for Align Wide and Align Full

• اضافه کردن پالت های رنگی سفارشی Adding Custom Colour Pallets

• اضافه کردن پالت های رنگی سفارشی Adding Custom Colour Pallets

• اضافه کردن اندازه فونت سفارشی Adding Custom Font Sizes

• اضافه کردن اندازه فونت سفارشی Adding Custom Font Sizes

• اندازه و واحدهای سفارشی Custom Sizing & Custom Units

اضافه کردن پشتیبانی تم برای ویرایشگر بلوک Adding Theme Support for the Block Editor

• اندازه و واحدهای سفارشی Custom Sizing & Custom Units

کاوش ویژگی های بلوک با ایجاد یک بلوک ساده Exploring Block Features by Creating a Simple Block

• ایجاد یک کلون جدید از Boilerplate به درستی Creating a New Clone from our Boilerplate Properly

• ایجاد یک کلون جدید از Boilerplate به درستی Creating a New Clone from our Boilerplate Properly

• ویرایش فراداده های Boilerplate Editing the Boilerplate's Metadata

• سفارشی کردن نماد بلوک Customizing the Block's Icon

• مؤلفه RichText The RichText Component

• مؤلفه RichText The RichText Component

• افزودن گزینه‌ها در نوار ابزار Block با استفاده از BlockControls Adding Options in the Block Toolbar Using BlockControls

• جزء AlignmentToolbar The AlignmentToolbar Component

• افزودن گزینه ها در نوار کناری با استفاده از InspectorControls Adding Options in the Sidebar Using InspectorControls

• افزودن گزینه ها در نوار کناری با استفاده از InspectorControls Adding Options in the Sidebar Using InspectorControls

• افزودن گزینه ای برای تغییر رنگ پس زمینه و متن Adding an Option to Change the Background and Text Colours

• افزودن گزینه ای برای تغییر رنگ پس زمینه و متن Adding an Option to Change the Background and Text Colours

• با استفاده از مولفه withColors Higher Order Using the withColors Higher Order Component

• تغییر رنگ پس زمینه و متن با استفاده از پشتیبانی بلوک Changing the Background and Text Colours using Block Supports

• افزودن گزینه ای برای تغییر پد بلوک Adding an Option to Change the Block's Padding

• افزودن گزینه ای برای تغییر حالت Box Shadow Adding an Option for toggling Box Shadow

• افزودن گزینه ای برای تغییر حالت Box Shadow Adding an Option for toggling Box Shadow

• اضافه کردن پشتیبانی برای گزینه های سبک های مختلف Adding Support for Different Style Options

• اضافه کردن پشتیبانی برای گزینه های سبک های مختلف Adding Support for Different Style Options

• نمونه ها و تغییرات Examples & Variations

• نمونه ها و تغییرات Examples & Variations

• تبدیل بلوک ها به بلوک های دیگر Transforming Blocks into Other Blocks

• افزودن نسخه های منسوخ شده برای بلوک ما Adding Deprecated Versions for our Block

• افزودن نسخه های منسوخ شده برای بلوک ما (قسمت 2) Adding Deprecated Versions for our Block (Part. 2)

کاوش ویژگی های بلوک با ایجاد یک بلوک ساده Exploring Block Features by Creating a Simple Block

• ویرایش فراداده های Boilerplate Editing the Boilerplate's Metadata

• سفارشی کردن نماد بلوک Customizing the Block's Icon

• افزودن گزینه‌ها در نوار ابزار Block با استفاده از BlockControls Adding Options in the Block Toolbar Using BlockControls

• جزء AlignmentToolbar The AlignmentToolbar Component

• با استفاده از مولفه withColors Higher Order Using the withColors Higher Order Component

• تغییر رنگ پس زمینه و متن با استفاده از پشتیبانی بلوک Changing the Background and Text Colours using Block Supports

• افزودن گزینه ای برای تغییر پد بلوک Adding an Option to Change the Block's Padding

• تبدیل بلوک ها به بلوک های دیگر Transforming Blocks into Other Blocks

• افزودن نسخه های منسوخ شده برای بلوک ما Adding Deprecated Versions for our Block

• افزودن نسخه های منسوخ شده برای بلوک ما (قسمت 2) Adding Deprecated Versions for our Block (Part. 2)

بیایید یک بلوک تودرتو پیچیده ایجاد کنیم! Let's Create a Complex Nested Block!

• بلوک نمای کلی Block Overview

• بلوک نمای کلی Block Overview

• راه اندازی یک پلاگین جدید برای بلوک ما Initializing a New Plugin for Our Block

• راه اندازی یک پلاگین جدید برای بلوک ما Initializing a New Plugin for Our Block

• ویرایش فراداده های Boilerplate Editing the Boilerplate's Metadata

• استفاده از InnerBlocks برای ایجاد یک بلوک تودرتو Using InnerBlocks to Create a Nested Block

• استفاده از InnerBlocks برای ایجاد یک بلوک تودرتو Using InnerBlocks to Create a Nested Block

• ثبت بلاک اعضای تیم Registering the Team Member Block

• ثبت بلاک اعضای تیم Registering the Team Member Block

• ایجاد توابع ویرایش و ذخیره برای نام و بیو Creating the edit and save functions for the name and bio

• ایجاد توابع ویرایش و ذخیره برای نام و بیو Creating the edit and save functions for the name and bio

• اضافه کردن قالب برای اعضای تیم ما Adding templates for our team members

• افزودن گزینه ای برای تغییر تعداد ستون ها Adding an option for changing the number of columns

• افزودن گزینه ای برای تغییر تعداد ستون ها Adding an option for changing the number of columns

• طراحی قسمت جلویی بلوک Styling the Front-end of the Block

• طراحی قسمت جلویی بلوک Styling the Front-end of the Block

• اضافه کردن سبک های ویرایشگر برای بلوک ما Adding the Editor Styles for our Block

• اضافه کردن سبک های ویرایشگر برای بلوک ما Adding the Editor Styles for our Block

• معرفی مولفه ImagePlaceholder Introducing the ImagePlaceholder Component

• ذخیره و نمایش تصویر اعضای تیم Storing & Displaying the Team Member Image

• درج تصویر از یک URL خارجی Handiling Inserting an Image from an External URL

• درج تصویر از یک URL خارجی Handiling Inserting an Image from an External URL

• نمایش خطاهای مربوط به تصویر Displaying Image Related Errors

• نمایش خطاهای مربوط به تصویر Displaying Image Related Errors

• نمایش تصویر در تابع ذخیره (از جلو) Displaying the Image in the Save Function (Front-end)

• نمایش تصویر در تابع ذخیره (از جلو) Displaying the Image in the Save Function (Front-end)

• Blob URL Edge Case & Memory Optimization Blob URL Edge Case & Memory Optimization

• Blob URL Edge Case & Memory Optimization Blob URL Edge Case & Memory Optimization

• جایگزینی تصویر با یک گزینه نوار ابزار Replacing the Image with a Toolbar Option

• جایگزینی تصویر با یک گزینه نوار ابزار Replacing the Image with a Toolbar Option

• حذف تصویر با یک گزینه نوار ابزار Removing the Image with a Toolbar Option

• افزودن یک گزینه نوار کناری برای تغییر متن جایگزین تصویر Adding a Sidebar Option to Modify the Alt Text of the Image

• اضافه کردن گزینه ای برای تغییر اندازه تصویر Adding an Option for Changing the Image Size

• تمرکز روی ورودی نام پس از انتخاب یک تصویر Focusing on the Name Input After Selecting an Image

• افزودن گزینه های تراز برای بلوک اعضای تیم Adding Alignment Options for the Team Members Block

• افزودن گزینه های تراز برای بلوک اعضای تیم Adding Alignment Options for the Team Members Block

• افزودن و نمایش یک ویژگی برای پیوندهای اجتماعی Adding & Displaying an Attribute for the Social Links

• شکل دادن به پیوندهای اجتماعی برای صفحه ویرایشگر Styling the Social Links for the Editor Page

• وضعیت پیوند و استایل انتخاب شده Selected Link State & Styling

• وضعیت پیوند و استایل انتخاب شده Selected Link State & Styling

• افزودن موارد جدید به پیوندهای اجتماعی Adding New Items to the Social Links

• نشانه گذاری تابع ذخیره برای پیوندهای اجتماعی The Save Function Markup for the Social Links

• استخراج آرایه پیوندهای اجتماعی از HTML برای بهبود کارایی Extracting the Social Links Array from the HTML to Improve Efficiency

• استخراج آرایه پیوندهای اجتماعی از HTML برای بهبود کارایی Extracting the Social Links Array from the HTML to Improve Efficiency

• اضافه کردن نشانه گذاری برای فرم ویرایش پیوند Adding the Markup for the Edit Link Form

• اضافه کردن نشانه گذاری برای فرم ویرایش پیوند Adding the Markup for the Edit Link Form

• ویرایش پیوندها و نمادهای رسانه های اجتماعی Editing the Social Media Links & Icons

• ویرایش پیوندها و نمادهای رسانه های اجتماعی Editing the Social Media Links & Icons

• حذف لینک های اجتماعی Removing Social Links

• مرتب سازی پیوندهای اجتماعی ما (قسمت 1) Making our Social Links Sortable (Part. 1)

• مرتب سازی پیوندهای اجتماعی ما (قسمت 1) Making our Social Links Sortable (Part. 1)

• مرتب سازی پیوندهای اجتماعی ما (قسمت 2) Making our Social Links Sortable (Part. 2)

• افزودن یک مثال برای پیش‌نمایش بلوک Adding an Example for the Block Preview

• افزودن یک مثال برای پیش‌نمایش بلوک Adding an Example for the Block Preview

• اضافه کردن تحولات برای بلوک اعضای تیم Adding Transformations for the Team Members Block

بیایید یک بلوک تودرتو پیچیده ایجاد کنیم! Let's Create a Complex Nested Block!

• اضافه کردن قالب برای اعضای تیم ما Adding templates for our team members

• معرفی مولفه ImagePlaceholder Introducing the ImagePlaceholder Component

• ذخیره و نمایش تصویر اعضای تیم Storing & Displaying the Team Member Image

• حذف تصویر با یک گزینه نوار ابزار Removing the Image with a Toolbar Option

• افزودن یک گزینه نوار کناری برای تغییر متن جایگزین تصویر Adding a Sidebar Option to Modify the Alt Text of the Image

• اضافه کردن گزینه ای برای تغییر اندازه تصویر Adding an Option for Changing the Image Size

• تمرکز روی ورودی نام پس از انتخاب یک تصویر Focusing on the Name Input After Selecting an Image

• افزودن و نمایش یک ویژگی برای پیوندهای اجتماعی Adding & Displaying an Attribute for the Social Links

• شکل دادن به پیوندهای اجتماعی برای صفحه ویرایشگر Styling the Social Links for the Editor Page

• افزودن موارد جدید به پیوندهای اجتماعی Adding New Items to the Social Links

• نشانه گذاری تابع ذخیره برای پیوندهای اجتماعی The Save Function Markup for the Social Links

• حذف لینک های اجتماعی Removing Social Links

• مرتب سازی پیوندهای اجتماعی ما (قسمت 2) Making our Social Links Sortable (Part. 2)

• اضافه کردن تحولات برای بلوک اعضای تیم Adding Transformations for the Team Members Block

بلوک های پویا Dynamic Blocks

• مقدمه ای بر بلوک های پویا Introduction to Dynamic Blocks

• راه اندازی بلوک آخرین پست های ما Initializing our Latest Posts Block

• ویرایش فراداده های Boilerplate Editing the Boilerplate's Metadata

• ویرایش فراداده های Boilerplate Editing the Boilerplate's Metadata

• نمایش محتوای پویا در فرانت اند Displaying Dynamic Content in the Front-end

• نمایش محتوای پویا در فرانت اند Displaying Dynamic Content in the Front-end

• نمایش آخرین پست ها در فرند اند با استفاده از PHP Displaying the Latest Posts in the Frond-end Using PHP

• آماده سازی داده های ما برای حلقه ویرایشگر Preparing Our Data for the Editor Loop

• آماده سازی داده های ما برای حلقه ویرایشگر Preparing Our Data for the Editor Loop

• نمایش آخرین پست ها در ویرایشگر Displaying the Latest Posts in the Editor

• سبک دادن به پست ها در ویرایشگر و فرانت اند Styling the Posts in the Editor and Front-end

• افزودن گزینه هایی برای تعداد پست ها و تصویر ویژه Adding Options for Number of Posts and Featured Image

• افزودن گزینه ای برای تغییر ترتیب پست ها Adding an Option for Changing the Order of the Posts

• فیلتر کردن پست ها بر اساس دسته ها Filtering Posts by Categories

• فیلتر کردن پست ها بر اساس دسته ها Filtering Posts by Categories

بلوک های پویا Dynamic Blocks

• مقدمه ای بر بلوک های پویا Introduction to Dynamic Blocks

• راه اندازی بلوک آخرین پست های ما Initializing our Latest Posts Block

• ویرایش فراداده های Boilerplate Editing the Boilerplate's Metadata

• نمایش آخرین پست ها در فرند اند با استفاده از PHP Displaying the Latest Posts in the Frond-end Using PHP

• نمایش آخرین پست ها در ویرایشگر Displaying the Latest Posts in the Editor

• سبک دادن به پست ها در ویرایشگر و فرانت اند Styling the Posts in the Editor and Front-end

• افزودن گزینه هایی برای تعداد پست ها و تصویر ویژه Adding Options for Number of Posts and Featured Image

• افزودن گزینه ای برای تغییر ترتیب پست ها Adding an Option for Changing the Order of the Posts

ایجاد پلاگین Boilerplate برای ویژگی های Block Editor Creating a Plugin Boilerplate for Block Editor Features

• یادداشت سریع! Quick Note!

• ایجاد یک پلاگین جدید برای ویرایشگر بلاک Creating a New Plugin Boilerplate for the Block Editor

• ادغام wp-scripts در Boilerplate ما Integrating wp-scripts in our Boilerplate

• ادغام wp-scripts در Boilerplate ما Integrating wp-scripts in our Boilerplate

ایجاد پلاگین Boilerplate برای ویژگی های Block Editor Creating a Plugin Boilerplate for Block Editor Features

• یادداشت سریع! Quick Note!

• ایجاد یک پلاگین جدید برای ویرایشگر بلاک Creating a New Plugin Boilerplate for the Block Editor

افزودن فروشگاه های داده جهانی سفارشی Adding Custom Global Data Stores

• فروشگاه های داده اصلی The Core Data Stores

• فروشگاه های داده اصلی The Core Data Stores

• استفاده از داده های ذخیره شده در داخل بلوک ها Using the Data Stored Inside the Blocks

• نمای کلی فروشگاه Todos Todos Store Overview

• نمای کلی فروشگاه Todos Todos Store Overview

• ثبت فروشگاه سفارشی Registering a Custom Store

• ثبت فروشگاه سفارشی Registering a Custom Store

• پر کردن اطلاعات فروشگاه ما از یک API خارجی Populating Our Store Data from an external API

• رسیدگی به خطاهای API Handling API Errors

• نمایش Todos در بلوک Todo List Displaying the Todos in the Todo List Block

• نمایش Todos در بلوک Todo List Displaying the Todos in the Todo List Block

• افزودن فرمی برای افزودن کارهای جدید Adding a Form for Adding New Todos

• افزودن فرمی برای افزودن کارهای جدید Adding a Form for Adding New Todos

• استفاده از API برای افزودن کارهای جدید Using the API to Add New Todos

• استفاده از API برای افزودن کارهای جدید Using the API to Add New Todos

• استفاده از API برای جابجایی Todos Using the API to Toggle the Todos

• ایجاد بلوک اطلاعات لیست کارها Creating the Todo List Info Block

افزودن فروشگاه های داده جهانی سفارشی Adding Custom Global Data Stores

• استفاده از داده های ذخیره شده در داخل بلوک ها Using the Data Stored Inside the Blocks

• پر کردن اطلاعات فروشگاه ما از یک API خارجی Populating Our Store Data from an external API

• رسیدگی به خطاهای API Handling API Errors

• استفاده از API برای جابجایی Todos Using the API to Toggle the Todos

• ایجاد بلوک اطلاعات لیست کارها Creating the Todo List Info Block

مدیریت فراداده و افزودن نوارهای جانبی سفارشی Managing Metadata & Adding Custom Sidebars

• روش قدیمی PHP برای مدیریت متادیتا The Old PHP Way of Managing Metadata

• روش قدیمی PHP برای مدیریت متادیتا The Old PHP Way of Managing Metadata

• دستکاری فیلدهای متا با استفاده از فروشگاه های داده Manipulating Meta Fields Using the Data Stores

• دستکاری فیلدهای متا با استفاده از فروشگاه های داده Manipulating Meta Fields Using the Data Stores

• مدیریت فیلدهای متا با استفاده از بلوک ها Managing Meta Fields Using Blocks

• مدیریت فیلدهای متا با استفاده از بلوک ها Managing Meta Fields Using Blocks

• افزودن نوار کناری سفارشی با استفاده از افزونه ها Adding a Custom Sidebar using Plugins

• افزودن نوار کناری سفارشی با استفاده از افزونه ها Adding a Custom Sidebar using Plugins

• سفارشی کردن رابط کاربری ویرایشگر موجود Customizing the Existing Editor UI

• افزودن گزینه ای برای ویرایش فیلدهای متا در نوار کناری Adding an Option to Edit Meta Fields in the Sidebar

• افزودن گزینه ای برای ویرایش فیلدهای متا در نوار کناری Adding an Option to Edit Meta Fields in the Sidebar

مدیریت فراداده و افزودن نوارهای جانبی سفارشی Managing Metadata & Adding Custom Sidebars

• سفارشی کردن رابط کاربری ویرایشگر موجود Customizing the Existing Editor UI

سخنرانی های جایزه Bonus Lectures

• انتقال ویژگی ها از والدین به فرزند با استفاده از زمینه Passing Attributes from Parent to Child using Context

• انتقال ویژگی ها از والدین به فرزند با استفاده از زمینه Passing Attributes from Parent to Child using Context

• اضافه کردن الگوهای از پیش تعریف شده برای انواع پست Adding Predefined Templates for Post Types

• اضافه کردن الگوهای بلوک از پیش تعریف شده Adding Predefined Block Patterns

• اضافه کردن الگوهای بلوک از پیش تعریف شده Adding Predefined Block Patterns

• استفاده از Formatting API برای افزودن قالب‌های متن جدید Using the Formatting API to add New Text Formats

• استفاده از Formatting API برای افزودن قالب‌های متن جدید Using the Formatting API to add New Text Formats

• اصلاح رفتار موجود با فیلترهای PHP Modifying Existing Behaviour with PHP Filters

• اصلاح رفتار موجود با فیلترهای جاوا اسکریپت Modifying Existing Behaviour with JavaScript Filters

• اصلاح رفتار موجود با فیلترهای جاوا اسکریپت Modifying Existing Behaviour with JavaScript Filters

• بین المللی سازی - تولید و بارگذاری فایل های ترجمه Internationalization - Generating & Loading Translation FIles

• سخنرانی جایزه BONUS LECTURE

سخنرانی های جایزه Bonus Lectures

• اضافه کردن الگوهای از پیش تعریف شده برای انواع پست Adding Predefined Templates for Post Types

• اصلاح رفتار موجود با فیلترهای PHP Modifying Existing Behaviour with PHP Filters

• بین المللی سازی - تولید و بارگذاری فایل های ترجمه Internationalization - Generating & Loading Translation FIles

• سخنرانی جایزه BONUS LECTURE