Giter VIP home page Giter VIP logo

block-modules's Introduction

Block Modules

Plugin backbone for modular block building using Laravel Blade and React.

Usage

  • Install this.

  • Scaffold your block plugin:

plugins/example-block
├── example-block.php
└── src
    ├── blade
    │   └── render.blade.php
    └── index.js

The important bit is that the registration process assumes your blade partials and JS can be found in the {plugin-name}/src directory.

Register a block

add_filter('register_blockmodules', function ($blocks) {
    $blocks->push([
        'plugin' => 'example-block',
        'handle' => 'example/block',
        'entry'  => 'index.js',
        'blade'  => 'blade/render',
    ]);

    return $blocks;
});
  • plugin should match the name of your plugin's directory.
  • handle should match the handle you used in your JS registration
  • entry is your main JS file, relative to {plugin-name}/src
  • blade is your blade view for the frontend, relative to {plugin-name}/src.

Write a view

Now you can use the specified blade partial to render your block. You'll find the block attributes and inner content already waiting for you.

<h2>{!! $attr->heading !!}</h2>
<span>{!! $attr->accentText !!}</span>

<div class="innerBlocks">
  {!! $content !!}
</div>

Or, don't write a view

Don't set a value for blade if you want to render with JS.

Other tricks

Do different stuff depending on the access level of the user:

@auth('administrator')
  <p>This user is an admin!</p>
@endauth

@guest
  <p>Only guests can see this.</p>
@endguest

Tweak settings with filters (optional)

Modify where cached views are stored:

add_filter('cache_path_blockmodules', function ($cachePath) {
  return '/cache/to/this/dir';
});

Change the base directory used to located view templates:

add_filter('base_path_blockmodules', function ($basePath) {
  return '/views/relative/from/this/dir';
});

Disable user functions (saves the database call):

add_filter('disable_user_blockmodules', function () {
  return true;
});

Enable view debugger:

add_filter('debug_blockmodules', function () {
  return true;
})

Blade for everyone

Under the hood this plugin uses EFTEC\BladeOne, a minimalist blade implementation that does not require any particular plugin or framework and has zero dependencies.

Example

Certainly. Example usage is included in the example-block dir of this repo.

© 2019 tiny pixel collective, llc

licensed MIT

block-modules's People

Contributors

kellymears avatar alwaysblank avatar

Stargazers

Huub avatar  avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.