README

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

本包是 Jetpack 插件中 extensions/shared 目录 代码的新家，以便插件可以共享它。最初，我们将移除 Publicize 编辑器扩展使用的代码，但目标是迁移所有共享代码。

从商店获取模块数据

本包依赖于 controls 和 resolvers 来从 API 拉取模块数据，并将其放入包的 Redux store。

基本用法

为了在不同的包中同步所有相关模块数据，让我们使用这个 Redux store 作为数据源，用于获取和更新数据。

使用 withSelect、withDispatch 高阶组件或 useSelect 钩子从 store 中拉取数据，并将其直接拉入组件。示例

// 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 ) );

如何安装 shared-extension-utils

从 Git 仓库安装

贡献

获取帮助

安全性

需要报告安全漏洞？请访问 https://automattic.com/security/ 或直接访问我们的安全漏洞赏金网站 https://hackerone.com/automattic。

许可

shared-extension-utils 在 GNU 通用公共许可证 v2（或更新版本） 下授权。