安装程序

我们将把应用程序构建为WordPress插件，这意味着您需要安装WordPres本身。一种方法是按照入门第页。设置完成后，您可以继续学习本教程的其余部分。

此外，本教程将重点介绍Redux概念，如状态、操作和选择器。如果你不熟悉它们，你可以从复习开始Redux入门.

创建插件

我们将在WordPress插件中进行所有开发。让我们从创建wp-content/plugins/my-first-gutenberg-app本地WordPress环境中的目录。我们需要在该目录中创建四个文件：

my-first-gutenberg-app.php–创建新的管理页面
src/index.js–用于JavaScript应用程序
style.css–用于最小样式表
package.json–用于构建过程

继续使用以下代码段创建这些文件：

src/index.js：

从“react-dom”导入{createRoot}；函数MyFirstApp（）{return来自JavaScript的您好</span>；}const root=createRoot（document.getElementById（'my-first-gutenberg-app'））；window.addEventListener(“加载”，函数（）{根.根.根(<MyFirstApp/>，);},假);

样式.css：

.toplevel_page_myfirst-gutenberg-app#wpcontent{背景：#fff；高度：1000px；}按钮组件微调器{宽度：15px；高度：15px；边缘顶部：0；边缘-底部：0；边缘左侧：0；}.表单按钮{显示：flex；}.my-gutenberg-form.form-按钮{边距：20px；左边距：1px；}.form-error格式错误{颜色：#cc1818；}.form按钮{边距-右：4px；}.form-buttons.components-spinner格式按钮{边缘顶部：0；}#my-first-gutenberg应用程序{最大宽度：500px；}#my-first-gutenberg-app-ul、，#my-first-gutenberg-app ul li公司{列表样式类型：光盘；}#my-first-gutenberg-app-ul公司{向左填充：20px；}#my-first-gutenberg-app.组件-搜索控制__input{高度：36px；边缘左侧：0；}#my-first-gutenberg-app.列表控制{显示：flex；宽度：100%；}#my-first-gutenberg-app.list-controls.components-search-control公司{弯曲变形：1；边距-右：8px；}

my-first-gutenberg-app.php：

<?php（电话）/***插件名称：我的第一个Gutenberg应用程序**/函数my_admin_menu（）{//为我们的应用程序创建一个新的管理页面。添加菜单页面(__（“我的第一个古腾堡应用程序”，“古腾堡”），__（“我的第一个古腾堡应用程序”，“古腾堡”），'管理选项'，“my-first-gutenberg-app”，函数（）{回声'<h2>页码</h2><div id=“my-first-gutenberg-app”>';},“dashicons-schedule”，三);}add_action（'管理员菜单'，'我的管理员菜单'）；函数load_custom_wp_admin_scripts（$hook）{//仅在上加载？page=my-first-gutenberg-app。if（'toplevel_page_myfirst-gutenberg-app'！==$hook）{回报；}//加载所需的WordPress包。//自动加载导入的依赖项和资产版本。$asset_file=包含plugin_dir_path（__file_）。'build/index.asset.php'；//将CSS依赖项排入队列。foreach（$asset_file['dependencies']作为$style）{wp_enque_style（$样式）；}//加载我们的app.js。wp_注册_脚本(“我的第一个gutenberg应用程序”，plugins_url（'build/index.js'，__FILE__），$asset_file[“依赖关系”]，$asset_file[“版本”]);wp_enqueue_script（“my-first-gutenberg-app”）；//加载style.css。wp注册样式(“my-first-gutenberg-app”，插件url（'style.css'，__FILE__），数组（），$asset_file[“版本”]);wp_enqueue_style（“my-first-gutenberg-app”）；}add_action（'管理员队列脚本'，'加载自定义脚本'）；

package.json包：

{“name”：“09-code-data-basics-esnext”，“版本”：“1.1.0”，“私有”：正确，“description”：“我的第一个古腾堡应用程序”，“作者”：“WordPress贡献者”，“许可证”：“GPL-2.0-or-later”，“关键字”：[“WordPress”，“块”],“主页”：“https://github.com/WordPress/gutenberg-examples网站/",“存储库”：“git+https://github.com/WordPress/gutenberg-examples.git",“错误”：{“url”：“https://github.com/WordPress/gutenberg-examples/问题"},“main”：“build/index.js”，“devDependencies”：{“@wordpress/scripts”：“^24.0.0”},“脚本”：{“构建”：“wp-scripts构建”，“format”：“wp-scripts格式”，“lint:js”：“wp-scripts lint-js”，“包更新”：“wp-scripts包更新”，“start”：“wp-scripts启动”}}