PHPackages                             tiny-pixel/block-compose - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. tiny-pixel/block-compose

AbandonedArchivedLibrary[Templating & Views](/categories/templating)

tiny-pixel/block-compose
========================

Compose views using WordPress blocks

17112[2 issues](https://github.com/kellymears/BlockCompose/issues)PHP

Since May 21Pushed 7y ago1 watchersCompare

[ Source](https://github.com/kellymears/BlockCompose)[ Packagist](https://packagist.org/packages/tiny-pixel/block-compose)[ RSS](/packages/tiny-pixel-block-compose/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependenciesVersions (1)Used By (0)

BlockCompose
============

[](#blockcompose)

View composer and attribute builder for Sage 10 and WordPress' Project Gutenberg editor.

Get Shit Done Again
-------------------

[](#get-shit-done-again)

Crying in the shower about how the first half of 2019 has gone? Well dry off, pump some jams and maybe throw a couple darts at your Mullenwag dartboard. Because it's time to feel *fluent* again.

Installation
------------

[](#installation)

- `composer require tiny-pixel/block-compose`
- Scaffolding: `app/Blocks` and `config/editor.php`.

### Configuration

[](#configuration)

For the time being the config file for the Block Compose library needs to be copied manually to `config/editor.php`.

The usage of this file is very straightforward and is commented in a Laravel style.

### Writing a Block View Composer

[](#writing-a-block-view-composer)

Minimally, a block view composer contains `name`, `editor_script` and `view` parameters accompanied by an `attributes` method.

```
namespace App\Blocks;

use \TinyPixel\BlockCompose\Composer;

class Starter extends Composer
{
    public $name = 'starter'; // block name
    public $editor_script = 'sage/starter'; // registered script
    public $view = 'blocks.starter'; // associate view
}
```

### View

[](#view)

Block attributes are made available in the view in this format: `$block->attributes->attribute_name`.

```

  @if(isset($block->attributes->mediaURL))

  @endif

    {!! $block->attributes->heading !!}
    {!! $block->attributes->copy !!}

```

If you utilize `` in your custom blocktype in order to compose with nested blocks, that content is automatically pulled from the block data by the BlockComposer class and made accessible via `$block->content` in your view.

### The script

[](#the-script)

You are not required to write a `save()` method in your `registerBlockType()` script, with one exception: if you use InnerBlocks you must register a `save()` handle. It does not need to return anything substantive but I've found it requires at least one element to wrap it. This should suffice:

```
// ...,
save: () => { return  }
```

Otherwise, this is a sufficient and functional example:

```
import { __ } from '@wordpress/i18n'
import { registerBlockType } from '@wordpress/blocks'
import { RichText } from '@wordpress/editor'

registerBlockType('sage/card', {
  title: __('Card', 'sage'),
  icon: 'wordpress',
  category: 'common',
  attributes: {
    heading: {
        type: 'string',
    },
    copy: {
        type: 'string',
    },
  },
  edit: ({ className, setAttributes, attributes }) => {
    return (

         { setAttributes({ copy: value }) }} />

    )
  },
  save: () => { return null },
})
```

Honestly, not writing that save handler makes *a world of difference*. The vast majority of that is actually just HTML, really.

### Advanced Composition

[](#advanced-composition)

You can utilize three optional methods to handle parsing your block data, block markup and view variable templating:

`with` allows for the modification of data directly before it is compiled with Blade

`withData` allows for the modification of the block source. Note that the block source is automatically inserted as a block attribute by BlockCompose (available as `$block->attributes->source` so there may not be much utility here for the time being.

```
namespace App\Blocks;

use \TinyPixel\BlockCompose\Composer;
use \TinyPixel\BlockCompose\Traits\Compose;

class Card extends Composer
{
    use Compose;

    // ...

    /**
     * Manipulate view data
     *
     * @return array associative
     */
    public function with($data)
    {
        return $data;
    }

    /**
     * Manipulate source block data
     */
    public function withData($block, $source)
    {
        return $block;
    }
}
```

Thanks for checking out the repo!
---------------------------------

[](#thanks-for-checking-out-the-repo)

If you want to contribute that's totally awesome. Please be considerate in your PRs and issues. More important than anything else is that this repository remains a welcoming space for everyone to learn from, contribute to and utilize as a resource.

I hope this makes it easier for you to get rolling with the editor in a productive way. It's still not as fast as using something like, say, Advanced Custom Fields. But if you want to build with the editor directly that opens up a lot of really cool possibilities for you, your clients and the developer ecosystem.

If you use this work to make something cool or lucrative please let me know! I love that kind of stuff.

**MIT License.**

**© 2019 Kelly Mears**

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance18

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/3e08df5442e0213f908535bba31bc1ad0ed213f176a5332b38922e9b7d39792b?d=identicon)[Tiny Pixel](/maintainers/Tiny%20Pixel)

---

Top Contributors

[![kellymears](https://avatars.githubusercontent.com/u/397606?v=4)](https://github.com/kellymears "kellymears (27 commits)")

### Embed Badge

![Health badge](/badges/tiny-pixel-block-compose/health.svg)

```
[![Health](https://phpackages.com/badges/tiny-pixel-block-compose/health.svg)](https://phpackages.com/packages/tiny-pixel-block-compose)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3861.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.0k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

281.8k](/packages/webkinder-sproutset)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)