共享扩展公用事业

块编辑器扩展使用的工具函数.

这个软件包是密码的新主机 页:1 extensions/shared 目录 ,使插件可以共享。 首先,我们行动 用于 Publicize 编辑器扩展名的代码,但目标是将 所有共享代码.

从仓库获取模块数据

软件包依赖 控件 财务报告和审定财务报表 解析器 从 API 中提取模块数据,并将其放入软件包的 Redux 商店.

基本用途

为了让所有模块相关数据在不同的软件包中同步,让我们利用这个Redux存储作为真理的来源,既获取数据又更新数据.

使用 withSelect, (中文(简体) ), withDispatch 调取数据的更高顺序组件或 useSelect 钩从商店取出数据直接取入组件. 示例

// Imports.
import { withSelect, withDispatch } from '@wordpress/data';
import { JETPACK_MODULES_STORE_ID } from '@automattic/jetpack-shared-extension-utils';

const SampleComponent = props => {
    const { isModuleActive, isLoadingModules, isChangingStatus, updateJetpackModuleStatus } = props;

    if ( isModuleActive ) {
        return <div>Module is active</div>;
    }

    if ( isLoadingModules ) {
        return <div>Loading modules...</div>;
    }
    
    if ( !isModuleActive ) {
        return <button onClick={ () => updateJetpackModuleStatus( 'contact-form', true ) }>
            Activate module
        </button>;
    }

    return <div>Active contact form module</div>;
}

// We wrap `SampleComponent` into the composition of `withSelect` and `withDispatch` HOCs,
// which will pull the data from the store and pass as a parameter into the component.
// Jetpack modules will be pulled after first selection `isModuleActive`.
export default compose( [
    withSelect( ( select, props ) => {
        const { isModuleActive, areModulesLoading, isModuleUpdating } = select( 'jetpack-modules' );
        return {
            isModuleActive: isModuleActive( 'contact-form' ),
            isLoadingModules: areModulesLoading(),
            isChangingStatus: isModuleUpdating( 'contact-form' ),
        };
    } ),
    withDispatch( dispatch => {
        const { updateJetpackModuleStatus } = dispatch( 'jetpack-modules' );
        return { updateJetpackModuleStatus };
    } ),
] )( ( SampleComponent ) );

如何安装共享扩展功能

从 Git Repo 安装

贡献

获得帮助

警卫

需要报告安全弱点吗? 转到 https://automattic.com/security/ (中文(中国大陆) ) 或者直接到我们的安全漏洞赏金网站 https://hackerone.com/自失常症。 。 。 .

许可证

共享扩展使用许可证 GNU 通用公共许可证 v2( 或以后)