{"id":13620546,"url":"https://github.com/pvtl/voyager-page-blocks","last_synced_at":"2025-04-14T21:31:25.041Z","repository":{"id":54856189,"uuid":"122402102","full_name":"pvtl/voyager-page-blocks","owner":"pvtl","description":"A module to provide page blocks for Voyager 📝","archived":true,"fork":false,"pushed_at":"2021-07-08T04:42:16.000Z","size":292,"stargazers_count":76,"open_issues_count":4,"forks_count":26,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-25T09:50:54.551Z","etag":null,"topics":["laravel","laravel-5-package","laravel-package","php","voyager"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pvtl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-21T22:30:34.000Z","updated_at":"2024-10-23T13:25:57.000Z","dependencies_parsed_at":"2022-08-14T04:50:44.695Z","dependency_job_id":null,"html_url":"https://github.com/pvtl/voyager-page-blocks","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvtl%2Fvoyager-page-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvtl%2Fvoyager-page-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvtl%2Fvoyager-page-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvtl%2Fvoyager-page-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pvtl","download_url":"https://codeload.github.com/pvtl/voyager-page-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852184,"owners_count":21171843,"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":["laravel","laravel-5-package","laravel-package","php","voyager"],"created_at":"2024-08-01T21:00:57.047Z","updated_at":"2025-04-14T21:31:24.679Z","avatar_url":"https://github.com/pvtl.png","language":"PHP","funding_links":[],"categories":["PHP","Packages"],"sub_categories":[],"readme":"**This repository is no longer actively maintained**\n\n# Voyager Page Blocks\n\n![Voyager Frontend Screenshot](/readme-intro.jpg)\n\nThis [Laravel](https://laravel.com/)/[Voyager Frontend](https://github.com/pvtl/voyager-frontend) module is designed to give developers the ability to easily design page blocks, for Voyager admin users to build stunning frontend pages.\n\nBuilt by [Pivotal Agency](https://pivotal.agency/).\n\n---\n\n## Prerequisites\n\n- Composer Installed\n- [Install Laravel](https://laravel.com/docs/installation)\n- [Install Voyager](https://github.com/the-control-group/voyager)\n- [Install Voyager Frontend](https://github.com/pvtl/voyager-frontend)\n\n---\n\n## Installation\n\n```bash\n# 1. Require this Package in your fresh Laravel/Voyager project\ncomposer require pvtl/voyager-page-blocks\n\n# 2. Run the Installer\nphp artisan voyager-page-blocks:install\n\n# 3. (Optional) Seed the database with example page blocks.\nphp artisan voyager-page-blocks:seed\n```\n\n---\n\n## Creating \u0026 Modifying Blocks\n\nPage blocks are created \u0026 configured in 2 steps:\n\n1. __Define__ the block - in `/config/page-blocks.php`\n2. __Build__ the block's HTML layout - create the template in `/resources/views/vendor/voyager-page-blocks/blocks`\n\n### 1. Define a Block\n\nFamiliarize yourself with `/config/page-blocks.php`. This is where you'll define each block - you'll tell it which fields the block should have (for the admin to manage) and which Blade template it should use on the frontend.\n\n- Each array inside this configuration file is a page block\n- Each block contains __fields__\n- Each field contains a unique __field__ key\n- Each field is based on a __Voyager Data Type__\n\nThe below table explains what each property does and how it is relevant to the block itself:\n\n| Key                    | Purpose                                                                                |\n| ---------------------- | -------------------------------------------------------------------------------------- |\n| __Root key__           | This is the name of your page block, used to load the configuration                    |\n| name                   | This is the display name of your page block, used in the block 'adder'                 |\n| fields                 | This is where your page block fields live (text areas, images etc)                     |\n| fields =\u003e field        | The content name of your field, used to store/load its content                         |\n| fields =\u003e display_name | The display name of this field in the back-end                                         |\n| fields =\u003e type         | The data row type that this field will use (check `TCG\\Voyager\\FormFields`)            |\n| fields =\u003e required     | Self-explanatory, marks this field as required or not (not available for all partials) |\n| fields =\u003e placeholder  | Self-explanatory, adds a placeholder to the field (not available for all partials)     |\n| fields =\u003e details      | Used for selects/checkboxes/radios to supply options                                   |\n| template               | This points to your blade file for your block template                                 |\n| compatible             | TBA                                                                                    |\n\n### 2. Build the HTML\n\nWhen you're ready to start structuring the display of your block, you'll need to create (or override our defaults) your blade template (located at `/resources/views/vendor/voyager-page-blocks/blocks/your_block.blade.php`) and use the accessors you defined in your module's configuration file to fetch each fields data (`{!! $blockData-\u003eimage_content !!}`).\n\n---\n\n## Example. Putting it all together\n\nLet's say we want to create a new block with 1 WYSIWYG editor, called 'Company Overview'.\n\n__Step 1. Define the new block__\n\nIn `/config/page-blocks.php`, we'll add:\n\n```php\n$blocks['company_overview'] = [\n    'name' =\u003e 'Company Overview',\n    'template' =\u003e 'voyager-page-blocks::blocks.company_overview',\n    'fields' =\u003e [\n        'content' =\u003e [\n            'field' =\u003e 'content',\n            'display_name' =\u003e 'Company Overview Content',\n            'type' =\u003e 'rich_text_box',\n            'required' =\u003e 1,\n            'placeholder' =\u003e '\u003cp\u003eLorem ipsum dolor sit amet. Nullam in dui mauris.\u003c/p\u003e',\n        ],\n    ],\n];\n```\n\n__Step 2. Build the HTML__\n\nIn `/resources/views/vendor/voyager-page-blocks/blocks`, we'll create a new file called `company_overview.blade.php` with:\n\n```php\n\u003cdiv class=\"page-block\"\u003e\n    \u003cdiv class=\"grid-container column text-center\"\u003e\n        {!! $blockData-\u003econtent !!}\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n__Step 3. Add the block to a page__\n\nNext, jump into the Voyager Admin \u003e Pages and click 'Content' next to a page. You'll now be able to select `Company Overview` from the 'Add Block' section. Add the block to the page, drag/drop it into place, edit the text etc.\n\n---\n\n## Developer Controller Blocks\n\nYou may also wish to include custom logic and functionality into your page blocks. This can be done with a __Developer Controller__ Block - simply specify your controller namespace'd path and the method you wish to call, which should return a [view](https://laravel.com/docs/views) and you'll be on your way.\n\nFor example, the [Voyager Frontend](https://github.com/pvtl/voyager-frontend) package comes with a _Recent Posts_ method/view that you can play with and review.\n\nFrom the _Add Block_ section of the page in the admin, add the block type of _Developer Controller_, then input the following into the path field:\n\n```\nPvtl\\VoyagerFrontend\\Http\\Controllers\\PostController::recentBlogPosts(2)\n```\n\nThis will output `2` blog posts on the frontend. You could change the first paramter of the method to 6, to output 6 blog posts. Simples.\n\n---\n\n## Troubleshooting\n\n__It is important to sanitise your field output, null values will cause errors__.\n\nIt is very important that you follow the naming scheme that is setup in the example page blocks as the keys reference other cogs in the system to stitch the blocks together. There are example blocks already set up in the `resources/views` directory and configuration file for you to get started.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvtl%2Fvoyager-page-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpvtl%2Fvoyager-page-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvtl%2Fvoyager-page-blocks/lists"}