CSS公司
命名
根元素： package目录 子元素： 包-目录_脚本-工具栏
导出默认函数Notice（{children，onRemove}）{ 返回( <div className=“components-notice”> {childrens} <按钮 className=“components-notice_dismiss” icon={check} label={__（'撤销此通知'）} onClick={onRemove} /> </div> ); } 从“clsx”导入clsx； 导出默认函数Notice（{children，onRemove，isDismissible}）{ const classes=clsx（'components-notice'{ “is-dimissible”：是不允许的， } ); return<div className={classes}>{/*…*/}</div>； } 块的SCSS文件命名约定
JavaScript脚本
进口
外部依赖
/** *外部依赖项 */ 从“时刻”导入时刻； WordPress依赖项
/** *WordPress依赖项 */ 从'@wordpress/i18n'导入{__}； 内部依赖性
/** *内部依赖性 */ 从“..”导入VisualEditor/ 可视化编辑'； 传统的实验API、仅插件API和专用API
遗留的实验API
仅插件API
//使用globalThis。 IS_GUTENBERG_PLUGIN允许Webpack排除此 //从WordPress核心导出： 如果（globalThis.IS_GUTENBERG_PLUGIN）{ 从“”导出{doSomethingExciting}/ api’； } 专用API
//在packages/block-editor/private-apis.js中： 从“@wordpress/private-apis”导入{__dangerousOptInToUnstableAPIsOnlyForCoreModules}； 导出常量{锁定，解锁}= __危险的OptInTo不稳定AP仅适用于核心模块( “我承认私有功能不适用于主题或插件，这样做会在下一版本的WordPress中中断。”， “@wordpress/block-editor”//调用__dangerousOptInToUnstableAPIsOnlyForCoreModules的包的名称， //（不是要访问其API的包的名称） ); //假设此对象是从包中导出的： 导出const publicObject={}； //但是，此字符串是内部字符串，不应公开： const privateString='私有信息'； //解决方案：锁定对象的“内部”字符串： 锁（publicObject，privateString）； //字符串未嵌套在对象中，无法从中提取： console.log（publicObject）； // {} //访问字符串的唯一方法是“解锁”对象： console.log（解锁（publicObject））； //“私人信息” //lock（）接受所有数据类型，而不仅仅是字符串： 导出constantanotherObject={}； lock（另一个对象，函数privateFn（）{}）； console.log（解锁（另一个对象））； //函数privateFn（）{} 私有选择器和操作
//在packages/package1/store.js中： 从'导入{privateHasContentRoleAttribute}/ 民选； 从'导入{privateToggleFeature}/ 私人行动； //“lock”函数从内部privateapis.js文件导出，其中 //调用了opt-in函数。 从'导入{lock，unlock}/ 锁定-解锁'； export const store=registerStore（/*…*/）； //将私人操作附加到导出的存储： 解锁（存储）.registerPrivateActions（{ 私有切换功能， } ); //将私人操作附加到导出的存储： 解锁（存储）.registerPrivateSelectors（{ privateHasContentRoleAttribute属性， } ); //在packages/package2/MyComponent.js中： 从“@wordpress/package1”导入{store}； 从“@wordpress/data”导入{useSelect}； //“unlock”函数从内部private-apis.js文件导出，其中 //调用了opt-in函数。 从'导入{unlock}/ 锁定-解锁'； 函数MyComponent（）{ const hasRole=使用选择( （选择）=> //使用专用选择器： 解锁（选择（存储））.privateHasContentRoleAttribute（） //请注意，需要unlock（）。 这一行行不通： //选择（存储）.privateHasContentRoleAttribute（） ); //使用私人操作： 解锁（useDispatch（store））.privateToggleFeature（）； // ... } 私有函数、类和变量
//在packages/package1/index.js中： 从'导入{lock}/ 锁定-解锁'； 导出const privateApis={}； /*将私有数据附加到导出的对象*/ 锁（私人Apis{ privateCallback:函数（）{}， privateReactComponent:函数PrivateComponent（）{ 返回<div/>； }, privateClass:class privateClass{}， privateVariable:5， } ); //在packages/package2/index.js中： 从“@wordpress/package1”导入{privateApis}； 从'导入{unlock}/ 锁定-解锁'； 常数{ 私人回拨， 私有反应组件， privateClass、， 私有变量， }=解锁（privateApis）； export const store=createReduxStore（store_NAME，storeConfig（））； //“register”使用从“createReduxStore”创建的相同“store”对象。 寄存器（存储）； 解锁（存储）.registerPrivateActions（{ // ... } ); export const store=createReduxStore（store_NAME{ …storeConfig， persist:[“首选项”]， } ); const registeredStore=寄存器存储（STORE_NAME{ …storeConfig， persist:[“首选项”]， } ); 解锁（registeredStore）.registerPrivateActions（{ // ... } ); 私有函数参数
//在@wordpress/package1/index.js中： 从'导入{lock}/ 锁定-解锁'； //私有函数包含所有逻辑 函数privateValidateBlocks（公式，privateIsStrict）{ let isValid=false； // ... 复杂的逻辑，我们不想重复。。。 if（privateIsStrict）{ // ... } // ... 复杂的逻辑，我们不想重复。。。 返回有效； } //稳定公共函数是调用 //禁用专用功能的专用功能 导出函数validateBlocks（块）{ privateValidateBlocks（块，false）； } 导出const privateApis={}； 锁（privateApis，{privateValidateBlocks}）； //在@wordpress/package2/index.js中： 从“@wordpress/package1”导入{privateApis作为package1PrivateApis}； 从'导入{unlock}/ 锁定-解锁'； //给定稳定的功能，私有功能可能会被“解锁”： const{privateValidateBlocks}=解锁（package1PrivateApis）； privateValidateBlocks（块，true）； Private React组件属性
//在@wordpress/package1/index.js中： 从'导入{lock}/ 锁定-解锁'； //私有组件包含所有逻辑 const PrivateMyButton=（{title，privateShowIcon=true}）=>{ // ... 复杂的逻辑，我们不想重复。。。 返回( <按钮> {privateShowIcon&&<图标src={someIcon}/>}{title} </按钮> ); }; //稳定公共组件是调用 //禁用专用功能的专用组件 export const MyButton=（{title}）=>( <PrivateMyButton title={title}privateShowIcon={false}/> ); 导出const privateApis=｛｝； 锁（privateApis，{PrivateMyButton}）； //在@wordpress/package2/index.js中： 从“@wordpress/package1”导入{privateApis}； 从'导入{unlock}/ 锁定-解锁'； //给定稳定组件，私有组件可能会“解锁”： const{PrivateMyButton}=解锁（privateApis）； 导出函数MyComponent（）{ return<PrivateMyButton data={data}privateShowIcon={true}/>； } 私人编辑器设置
const privateSettings=[ '插入媒体类别'， //在此处列出块编辑器设置以使其私有 ]; 私有block.json和主题.json API
在thunks中内联小动作
导出函数toggleFeature（scope，featureName）{ 返回函数（{dispatch}）{ 调度（{type:'__private_BEFORE_TOGGLE'}）； // ... }; } 公开公开私有API
//此函数不能由任何上下文中的扩展器使用： 函数privateEverywhere（）{} //此函数可以由带有Gutenberg插件的扩展器使用，但不能在vanilla WordPress Core中使用： 函数privateInCorePublicInPlugin（）{} //古腾堡在内部将这两种功能视为私有API： const privateApis={}； 锁（privateApis，{privateEverywhere，privateInCorePublicInPlugin}）； //privateInCorePublicInPlugin函数显式导出， //但由于以下原因，此导出不会合并到WordPress核心中 //全球This。 IS_GUTENBERG_PLUGIN检查。 if（全局This.IS_GUTENBERG_PLUGIN）{ 导出常量privateInCorePublicInPlugin= 解锁（privateApis）.privateInCorePublicInPlugin； } 物体
常数a=10； //错误： 常量对象={ a： a、， performAction:函数（）{ // ... }, }; //好： 常量对象={ a、， 执行操作（）{ // ... }, }; 串
//错误： const name=“马特”； //良好： const name='Matt'； //错误： const pet=“马特的狗”； //同样糟糕（不使用撇号）： const pet=“马特的狗”； //良好： const pet=“马特的狗”； //也很好： const oddString=“她说‘这很奇怪。’”； const name='Stacey'； //错误： alert（'我的名字是'+name+'.'）； //良好： alert（`我的名字是$｛name｝。`）； 可选链接
否定时( ! )使用可选链接评估的值的结果，您应该注意，如果可选链接到达无法继续的点，它将生成一个 假值 将转换为 真的 当被否定时。 在许多情况下，这并不是预期的结果。 分配布尔值时，注意可选链接可能会产生以下值 虚伪的 ( 未定义 , 无效的 )，但不严格 假 。当值以预期为布尔值的方式传递时，这可能会成为一个问题( 真的 或 假 ). 虽然布尔值很常见，因为布尔值通常用于逻辑广泛考虑真实性和虚假性的方式，但当急切地假设属性访问链末端产生的类型时，其他可选链也会出现这些问题。 类型检查 可能有助于防止此类错误。
反应组分
使用JSDoc的JavaScript文档
自定义类型
/** *块选择对象。 * *@typedef WPBlockSelection * *@property{string}clientId块客户端ID。 *@property{string}attributeKey块属性键。 *@property｛number｝offset属性值偏移量，基于富 *文本值。 */ /** *命名断点大小。 * *@typedef{“巨大”|“宽”|“大”|“中等”|“小”|“移动”}WPBreakpoint */ 导入和导出类型
/**@typedef{import（'@wordpress/data'）.WPDataRegistry}WPDataRegustry*/ //包/data/src/index.js /**@typedef{import（'./registry'）.WPDataRegistry}WPDataRegustry*/ 外部依赖
泛型类型
//错误： /**@类型{对象}*/ /**@type{Function}（类型{函数}）*/ /**@类型{Promise}*/ //良好： /**@type｛Record＜string，number＞｝*//*或*//*@type｛｛[setting:string]：任意｝｝*/ /**@type{（key:string）=>布尔}*/ /**@type{Promise<string>}*/ /** *apiFetch中间件处理程序。 传递了获取选项，中间件是 *期望在“下一个”中间件完成处理后调用该中间件。 * *@typedef{（选项：WPAPIFetchOptions，下一个：WPAPIFetchMiddleware）=>void} */ /** *命名断点大小。 * *@typedef{“巨大”|“宽”|“大”|“中等”|“小”|“移动”}WPBreakpoint */ /** *具有像素宽度的断点名称散列，在该散列处生效。 * *@type{Record<WPBreakpoint，number>} */ 常量断点={巨大：1440/*，…*/}； 可为null、未定义和void类型
/** *返回给定键的配置值（如果存在）。 如果返回null *没有配置的值。 * *@param{string}key要检索的配置密钥。 * *@return{？*}配置值（如果存在）。 */ 函数getConfigurationValue（键）{ return config.hasOwnProperty（密钥）？ config[key]：空； } /** *如果下一个HTML标记关闭当前标记，则返回true。 * *@param{WPHTMLToken}currentToken要比较的当前标记。 *@param{WPHTMLToken|undefined}nextToken要比较的下一个标记。 * *@return{boolean}如果`nextToken`关闭`currentToken'，则为True，否则为false。 */ /** *渲染工具栏。 * *@param{Object}props组件props。 *@param{string}[props.className]要在容器`<div/>`上设置的类。 */ /** *返回给定键的配置值（如果存在）。 * *@param{string}key要检索的配置密钥。 * *@return{*|void}配置值（如果存在）。 */ 函数getConfigurationValue（键）{ if（config.hasOwnProperty（键））{ 返回配置[key]； } } /** *apiFetch中间件处理程序。 传递了获取选项，中间件是 *预计在完成处理后调用next中间件。 * *@typedef{（选项：WPAPIFetchOptions，下一个：WPAPIFetchMiddleware）=>void} */ 记录示例
/** *给定已注册存储的名称，返回存储的 *选择器。 选择器函数已预先绑定以传递当前 *自动状态。 作为消费者，您只需要传递 *选择器（如果适用）。 * *@param{string}name存储名称。 * *@示例 *```js *select（'my-shop'）.getPrice（'hammer'）； * ``` * *@return{Record<string，WPDataSelector>}包含存储的 *选择器。 */ 记录React组件
/** *将块的配置标题呈现为字符串，如果标题 *无法确定。 * *@示例 * *```jsx *<BlockTitle clientId=“afd1cb17-2c08-4e7a-91be-007ba7ddc3a1”/> * ``` * *@param{Object}道具 *@param{string}props.clientId块的客户端ID。 * *@return{？string}块标题。 */ 菲律宾比索