README

Thor, WordPress 插件模板

Thor 是基于 Mjolnir 框架的 WordPress 插件模板

如果您认为这种方法不起作用，请提出问题并让我们讨论 :)

先决条件

在进一步操作之前，我建议您阅读以下文档：

要求

本模板的要求包括：

PHP 7.1+
Composer

安装

您可以通过 composer 安装框架

composer create-project codebjorn/thor <pluginName>

结构

模板的结构如下：

|-- app                   // Folder where is stored all Facades,Services,Providers
|   |--Facades            // Folder that stores all facades used to get utilities & services from container
|   |--Providers          // Folder that stores all your providers
|   |--App.php            // Container file
|   |--Helpers.php        // File that store all functions need it for project
|-- assets                // Folder where all builded assets are stored
|-- blocks                // Folder where are stored all Gutenberg blocks
|   |-- <blockFolder>     // Folder with block
|       |-- components    // Folder where are stored all js components for Gutenberg
|       |-- data          // Folder where are stored json files such as attributes
|       |-- view          // Folder where is stored blade files for render
|       |-- index.jsx     // Block configuration file
|   |-- blocks.js         // File where is imported all blocks
|   |-- blocks.php        // File where are registered blocks using Block Facade
|-- config                // Folder where are stored configurations
|-- hooks                 // Folder where is stored all hooks
|   |-- actions.php       // File where are created new action hooks using Action Facade
|   |-- filters.php       // File where are created new filter hooks using Filter Facade
|-- resources             // Folder that stores all js,scss,views elements of theme
|   |-- js                // Folder for js of theme
|   |-- scss              // Folder for scss of theme
|   |-- views             // Folder for blade templates
|-- vendor                // Composer packages folder
|-- thor.php              // Default plugin file
|-- webpack.mix.js        //Laravel Mix configuration file

所有工作原理

将服务添加到钩子

在 app 文件夹中创建一个新命名空间并添加新的 PHP 服务类
使用 app/Providers 文件夹中的 Service Provider 解决此服务，您可以将它添加到 AppServiceProvider.php 或创建一个新的 provider 并将其添加到 config/app.php 以加载。更多关于 service providers 的信息
解决服务后，您可以在另一个服务中注入它或将其添加到 hooks 文件夹中的钩子，例如 action 钩子

Action::add('wp_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'front']);
Action::add('admin_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'admin']);

创建 Gutenberg 块

所有块都存储在 blocks 文件夹中。创建新块时，我们需要以下内容：

在 blocks 文件夹中创建一个新文件夹
在您的文件夹中创建 index.jsx

import {__} from '@wordpress/i18n';
import {Fragment} from '@wordpress/element';
import Controls from "./components/controls";
import Editor from "./components/editor";
import Inspector from "./components/inspector";
import * as attributes from "./data/attributes.json";

const {registerBlockType} = wp.blocks;

export default registerBlockType('namespace/name', {
    title: __('Name', 'name'),
    attributes: attributes,
    edit: props => {
        return (
            <Fragment>
                <Controls {...props} />
                <Editor {...props} />
                <Inspector {...props} />
            </Fragment>
        );
    },
    save() {
        //gutenberg will save attributes we can use in server-side callback
        return null;
    },
});

在组件文件夹中创建所有组件

controls.jsx - 块的工具栏

import {BlockControls} from '@wordpress/block-editor';

function Controls() {
    return (
        <BlockControls>
        </BlockControls>
    );
}

export default Controls;

editor.jsx - 块的主要区域

function Editor({attributes, setAttributes}) {
    console.log(attributes)
    return (
        <div className="name">
            <h1>Hello, {attributes.title}</h1>
        </div>
    );
}

export default Editor;

inspector.jsx - 侧边栏面板

import {__} from '@wordpress/i18n';
import {InspectorControls} from '@wordpress/block-editor';
import {PanelBody, PanelRow} from '@wordpress/components';

function Inspector({attributes, setAttributes}) {
    return (
        <InspectorControls>
            <PanelBody title={__('Name')}>
                <PanelRow>

                </PanelRow>
            </PanelBody>
        </InspectorControls>
    );
}

export default Inspector;

创建 data 文件夹和新的 attributes.json 文件

{
  "classNames": {
    "default": "hero",
    "type": "string"
  },
  "title": {
    "default": "This is title",
    "type": "string"
  }
}

您还可以使用数据文件夹来存储其他 JSON 文件夹，这些文件夹可以在您的块中使用。

创建 view 文件夹，用于存储您的块的 blade 模板，默认模板为 block.blade.php

<div class="{{$attributes->classNames}}">
 <h1>{{$attributes->title}}</h1>
 @include('hero.view.partials.element')
</div>

将块导入主 blocks.js
使用块外观将块添加到主 blocks.php

\Namespace\Facades\Block::add('namespace', 'name');

测试

//TODO

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

贡献

有关详细信息，请参阅 CONTRIBUTING

安全

如果您发现任何安全问题，请通过电子邮件 quotesun@gmail.com 而不是使用问题跟踪器。

致谢

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件

codebjorn / thor

维护者

详细信息