{"id":13760144,"url":"https://github.com/pixelcollective/tiny-blocks","last_synced_at":"2025-07-27T14:32:18.178Z","repository":{"id":36602558,"uuid":"189662653","full_name":"pixelcollective/tiny-blocks","owner":"pixelcollective","description":"WordPress block editor framework","archived":false,"fork":false,"pushed_at":"2023-12-15T02:53:10.000Z","size":1191,"stargazers_count":32,"open_issues_count":1,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-16T17:41:01.708Z","etag":null,"topics":["gutenberg","roots","wordpress"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelcollective.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"user?u=27947550"}},"created_at":"2019-05-31T21:52:16.000Z","updated_at":"2024-10-22T02:59:35.000Z","dependencies_parsed_at":"2024-08-03T13:14:22.912Z","dependency_job_id":null,"html_url":"https://github.com/pixelcollective/tiny-blocks","commit_stats":{"total_commits":62,"total_committers":2,"mean_commits":31.0,"dds":"0.17741935483870963","last_synced_commit":"cd8dfb429c0a5d3d5b05a15ec223ca02ed16cef5"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelcollective%2Ftiny-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelcollective%2Ftiny-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelcollective%2Ftiny-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelcollective%2Ftiny-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelcollective","download_url":"https://codeload.github.com/pixelcollective/tiny-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227810235,"owners_count":17823177,"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":["gutenberg","roots","wordpress"],"created_at":"2024-08-03T13:01:04.147Z","updated_at":"2024-12-02T22:17:37.074Z","avatar_url":"https://github.com/pixelcollective.png","language":"PHP","funding_links":["https://patreon.com/user?u=27947550"],"categories":["PHP"],"sub_categories":[],"readme":"# tiny-pixel/blocks\n\nProvides a backbone for building modular blocks with Blade templating support.\n\nThis framework is under active development.\n\n## What this is\n\n- A way to streamline and structure the registration of blocks\n- A way to streamline and structure the registration of block assets\n- A provider of Blade functionality and templating utilities for server-rendered, dynamic blocks.\n\n## What this is not\n\n- A way of writing editor blocks without javascript\n\n## Getting started\n\nUse `composer` to install the package to your project:\n\n```sh\ncomposer require tiny-pixel/blocks\n```\n\n## Usage\n\nSee the demo directory in the repo for an example implementation.\n\nFile structure:\n\n```sh\ndemo\n├── config\n│   └── app.php # Plugin config\n├── index.php # Plugin entrypoint\n├── resources\n│   ├── assets # JS and CSS assets\n│   │   # Implementation is up to you\n│   │\n│   └── views # Place blade templates here\n│       └── Demo # Should match block name\n│           └── block.blade.php # Entry template\n│      \n└── src # Block classes\n    └── Demo.php # Match name of views \u0026 class\n```\n\nSomewhere in your plugin, hook into the `tinypixel/blocks/loaded` action.\n\nIt passes you an instance of the library. Call `main` to kick everything off.\nYou must pass the path to your config directory to `main`.\n\n```php\nadd_action('tinypixel/blocks/loaded', function ($app) {\n    $configPath = realpath(__DIR__ . '/config');\n    $app-\u003emain($configPath);\n});\n```\n\nIn `config/app.php`, you only really need to do two things:\n\n1. Add your blocks to the classes in the `blocks` key:\n\n```php\n   'blocks' =\u003e [\n      \\Foo\\Demo::class,\n   ],\n```\n\n2. Change the `project.domain` key to match the namespace of your blocks. Not the PHP namespace, but the block namespace used in `register_block_type`.\n\n```php\n   'project' =\u003e [\n        'domain' =\u003e 'foo',\n        'base_path' =\u003e realpath(__DIR__ . '/../'),\n        'base_url' =\u003e plugins_url('/', __DIR__),\n        'dist' =\u003e 'dist',\n   ],\n```\n\nYou can modify the other settings as you see fit. They are largely self explanatory and control where caches are stored, where compiled assets are being stored, etc. One day this might even be documented!\n\n## Block definitions\n\nBy default, the library will look for block classes in `src/`.\n\nThis classname should match the name of the block without the block namespace. For example, for a `foo/demo` namespace we will register the class as `Demo`. The namespace is set in `config.project.domain`, as mentioned above.\n\nUse the `setupAssets` method to register your block scripts and styles.\n\nIn addition to the ones below you can use `$this-\u003eaddPublicScript` and `$this-\u003eaddPublicStyle` to register frontend scripts and styles.\n\n```php\n\u003c?php\n\nnamespace Foo;\n\nuse TinyPixel\\Blocks\\Block;\n\nclass Demo extends Block\n{\n    public function setupAssets(): void\n    {\n        $this-\u003eaddEditorStyle(\n            $this-\u003emakeAsset('editor/css')\n                -\u003esetUrl('dist/styles/editor.css')\n        );\n\n        $this-\u003eaddEditorScript(\n            $this-\u003emakeAsset('editor/js')\n                -\u003esetUrl('dist/scripts/editor.js')\n        );\n    }\n}\n```\n\nLast step (other than actually writing the block JS, good luck!) is to implement the template. The default template path is `resources/views`. The block template should be named `block.blade.php`. It should be located in a directory named after the block name.\n\nAny block attributes are available in the template as `$attr`. These attributes are passed to the block as an object.\n\nIn addition to the `$attr` object, you also have access to `$content`, which is a `string` of the block content. You also have access to a `$id` and `$className` variable, for convenience.\n\nThe `$id` is a unique identifier for the block. You can use it for dynamically applying styles to the block, or calling JS functions.\n\nThe `$className` is the class name of the block. This is based on the block name and follows the following naming convetion: `wp-block-{namespace}-{name}`.\n\n## Author notes\n\n\u0026copy; 2019 Tiny Pixel Collective\n\n[Licensed MIT](https://github.com/pixelcollective/tree/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelcollective%2Ftiny-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelcollective%2Ftiny-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelcollective%2Ftiny-blocks/lists"}