Loki is WordPress Theme Boilerplate using as a base Mjolnir Framework
If you think this approach is not working, please open an issue and let's discuss :)
Before we proceed further, I suggest you to read documentation for:
- Mjolnir Framework.
- Laravel Blade
- Laravel Mix
Requirements for this boilerplate are:
- PHP 7.1+
- Composer
You can install framework via composer:
composer create-project codebjorn/loki
Structure of boilerplate is:
|-- 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
|-- templates // Folder where default wordpress templates are stored
|-- vendor // Composer packages folder
|-- functions.php // Default WP Functions.php
|-- webpack.mix.js //Laravel Mix configuration file
- Create a new namespace in
app
folder and add new php service class - Resolve this service using Service Provider in
app/Providers
folder, you can add it toAppServiceProvider.php
or create a new provider and add it toconfig/app.php
to load. More info about service providers - After resolving a service you can inject it in
another service or add it into hook in
hooks
folder, for example action hook:
Action::add('wp_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'front']);
Action::add('admin_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'admin']);
By default, all WordPress templates are stored in templates
folder, you can change folder or disable this feature
in config/theme.php
.
To use templates and laravel blade engine we can use templates as kind of controller that will store all data that we need but render will make template engine, for example:
- Let's say we want to create/update template
single.php
, we create a new filetemplates/single.php
<?php
$post = \Mjolnir\Utils\Post::current();
$postTitle = $post->getTitle();
$postContent = $post->getContent();
\Loki\Facades\View::render('single', ['title' => $postTitle, 'content' => $postContent]);
- We create blade file in
resources/views/single.blade.php
@extends('layout.app')
@section('content')
<h1>{{$title}}</h1>
{!! $content !!}
@endsection
All blocks are stored in blocks
folder. For creating a new block we will need:
- Create a folder inside
blocks
folder - Create
index.jsx
in your new folder
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;
},
});
- Create all components inside components folder:
controls.jsx
- Toolbar of block
import {BlockControls} from '@wordpress/block-editor';
function Controls() {
return (
<BlockControls>
</BlockControls>
);
}
export default Controls;
editor.jsx
- Main area of block
function Editor({attributes, setAttributes}) {
console.log(attributes)
return (
<div className="name">
<h1>Hello, {attributes.title}</h1>
</div>
);
}
export default Editor;
inspector.jsx
- Sidebar panels
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;
- Create
data
folder and new attributes.json file:
{
"classNames": {
"default": "hero",
"type": "string"
},
"title": {
"default": "This is title",
"type": "string"
}
}
Also, you can use data folder to store and other json folder that can be used in you block.
- Create
view
folder where will be stored blade templates for your block, default one isblock.blade.php
:
<div class="{{$attributes->classNames}}">
<h1>{{$attributes->title}}</h1>
@include('hero.view.partials.element')
</div>
- Import you block in main
blocks.js
- Add block in main
blocks.php
using block facade:
\Namespace\Facades\Block::add('namespace', 'name');
//TODO
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email quotesun@gmail.com instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.