{"id":13760183,"url":"https://github.com/kellymears/BlockCompose","last_synced_at":"2025-05-10T10:31:40.814Z","repository":{"id":57070139,"uuid":"185085356","full_name":"kellymears/BlockCompose","owner":"kellymears","description":"View composer and attribute builder for Sage 10 and WordPress' Project Gutenberg editor.","archived":true,"fork":false,"pushed_at":"2019-05-21T18:30:37.000Z","size":65,"stargazers_count":17,"open_issues_count":2,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-17T04:14:33.980Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kellymears.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-05T21:44:14.000Z","updated_at":"2024-12-31T16:41:56.000Z","dependencies_parsed_at":"2022-08-24T10:40:54.051Z","dependency_job_id":null,"html_url":"https://github.com/kellymears/BlockCompose","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kellymears%2FBlockCompose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kellymears%2FBlockCompose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kellymears%2FBlockCompose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kellymears%2FBlockCompose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kellymears","download_url":"https://codeload.github.com/kellymears/BlockCompose/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253401402,"owners_count":21902665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:01:04.979Z","updated_at":"2025-05-10T10:31:40.589Z","avatar_url":"https://github.com/kellymears.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"# BlockCompose\n\nView composer and attribute builder for Sage 10 and WordPress' Project Gutenberg editor.\n\n## Get Shit Done Again\n\nCrying 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.\n\n## Installation\n\n- `composer require tiny-pixel/block-compose`\n- Scaffolding: `app/Blocks` and `config/editor.php`.\n\n### Configuration\n\nFor the time being the config file for the Block Compose library needs to be copied manually to `config/editor.php`.\n\nThe usage of this file is very straightforward and is commented in a Laravel style.\n\n### Writing a Block View Composer\n\nMinimally, a block view composer contains `name`, `editor_script` and `view` parameters accompanied by an `attributes` method.\n\n```php\nnamespace App\\Blocks;\n\nuse \\TinyPixel\\BlockCompose\\Composer;\n\nclass Starter extends Composer\n{\n    public $name = 'starter'; // block name\n    public $editor_script = 'sage/starter'; // registered script\n    public $view = 'blocks.starter'; // associate view\n}\n```\n\n### View\n\nBlock attributes are made available in the view in this format: `$block-\u003eattributes-\u003eattribute_name`.\n\n```php\n\u003cdiv class=\"card\"\u003e\n  @if(isset($block-\u003eattributes-\u003emediaURL))\n    \u003cimg class=\"card-image\" src=\"{!! $block-\u003eattributes-\u003emediaURL !!}\"\u003e\n  @endif\n  \u003cdiv class=\"card-content\"\u003e\n    \u003cdiv class=\"card__heading\"\u003e{!! $block-\u003eattributes-\u003eheading !!}\u003c/div\u003e\n    \u003cp class=\"card__copy\"\u003e{!! $block-\u003eattributes-\u003ecopy !!}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you utilize `\u003cInnerBlocks\u003e` 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-\u003econtent` in your view.\n\n### The script\n\nYou 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:\n\n```js\n// ...,\nsave: () =\u003e { return \u003cdiv\u003e\u003cInnerBlocks.Content /\u003e\u003c/div\u003e }\n```\n\nOtherwise, this is a sufficient and functional example:\n\n```js\nimport { __ } from '@wordpress/i18n'\nimport { registerBlockType } from '@wordpress/blocks'\nimport { RichText } from '@wordpress/editor'\n\nregisterBlockType('sage/card', {\n  title: __('Card', 'sage'),\n  icon: 'wordpress',\n  category: 'common',\n  attributes: {\n    heading: {\n        type: 'string',\n    },\n    copy: {\n        type: 'string',\n    },\n  },\n  edit: ({ className, setAttributes, attributes }) =\u003e {\n    return (\n      \u003cdiv className={className}\u003e\n        \u003cRichText\n          tagName=\"div\"\n          className=\"card-content__copy\"\n          value={attributes.copy}\n          placeholder={__('Copy go here', 'sage')}\n          onChange={value =\u003e { setAttributes({ copy: value }) }} /\u003e\n      \u003c/div\u003e\n    )\n  },\n  save: () =\u003e { return null },\n})\n```\n\nHonestly, not writing that save handler makes _a world of difference_. The vast majority of that is actually just HTML, really.\n\n### Advanced Composition\n\nYou can utilize three optional methods to handle parsing your block data, block markup and view variable templating:\n\n`with` allows for the modification of data directly before it is compiled with Blade\n\n`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-\u003eattributes-\u003esource` so there may not be much utility here for the time being.\n\n\n\n```php\nnamespace App\\Blocks;\n\nuse \\TinyPixel\\BlockCompose\\Composer;\nuse \\TinyPixel\\BlockCompose\\Traits\\Compose;\n\nclass Card extends Composer\n{\n    use Compose;\n\n    // ...\n\n    /**\n     * Manipulate view data\n     *\n     * @return array associative\n     */\n    public function with($data)\n    {\n        return $data;\n    }\n\n    /**\n     * Manipulate source block data\n     */\n    public function withData($block, $source)\n    {\n        return $block;\n    }\n}\n```\n\n## Thanks for checking out the repo!\n\nIf 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.\n\nI 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.\n\nIf you use this work to make something cool or lucrative please let me know! I love that kind of stuff.\n\n**MIT License.**\n\n**\u0026copy; 2019 Kelly Mears**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkellymears%2FBlockCompose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkellymears%2FBlockCompose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkellymears%2FBlockCompose/lists"}