{"id":13759153,"url":"https://github.com/VanOns/laraberg","last_synced_at":"2025-05-10T09:31:58.639Z","repository":{"id":38751624,"uuid":"169218900","full_name":"VanOns/laraberg","owner":"VanOns","description":"A Gutenberg implementation for Laravel","archived":false,"fork":false,"pushed_at":"2024-10-07T08:11:56.000Z","size":75539,"stargazers_count":1332,"open_issues_count":2,"forks_count":144,"subscribers_count":49,"default_branch":"main","last_synced_at":"2024-10-29T15:27:50.212Z","etag":null,"topics":["gutenberg","laravel"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VanOns.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2019-02-05T09:52:08.000Z","updated_at":"2024-10-29T14:10:09.000Z","dependencies_parsed_at":"2024-03-28T16:29:45.083Z","dependency_job_id":"c81fbce9-0048-4cb5-af83-3c18ec6f287e","html_url":"https://github.com/VanOns/laraberg","commit_stats":{"total_commits":273,"total_committers":10,"mean_commits":27.3,"dds":0.2417582417582418,"last_synced_commit":"bdc23df8fb8bed21ad40489ef278e728113b84be"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VanOns%2Flaraberg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VanOns%2Flaraberg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VanOns%2Flaraberg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VanOns%2Flaraberg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VanOns","download_url":"https://codeload.github.com/VanOns/laraberg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224859687,"owners_count":17381677,"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","laravel"],"created_at":"2024-08-03T13:00:47.632Z","updated_at":"2025-05-10T09:31:58.633Z","avatar_url":"https://github.com/VanOns.png","language":"PHP","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg height=\"300px\" src=\"./logo-text.svg\" alt=\"logo\"\u003e\u003c/p\u003e\n\n# Laraberg\n\n\u003c!-- BADGES --\u003e\n\nLaraberg aims to provide an easy way to integrate the Gutenberg editor with your\nLaravel projects. It takes the Gutenberg editor and adds all the communication\nand data it needs to function in a Laravel environment.\n\n## Quick start\n\n### Requirements\n\n| Dependency | Minimum version |\n|------------|-----------------|\n| PHP        | 8.1             |\n\n### Installation\n\nInstall the package using Composer:\n\n```bash\ncomposer require van-ons/laraberg\n```\n\nAdd the vendor files to your project (CSS, JS \u0026 config):\n\n```bash\nphp artisan vendor:publish --provider=\"VanOns\\Laraberg\\LarabergServiceProvider\"\n```\n\n#### JavaScript and CSS files\n\nThe package provides a JS and CSS file that should be present on the page you\nwant to use the editor on:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"{{ asset('vendor/laraberg/css/laraberg.css') }}\"\u003e\n\n\u003cscript src=\"{{ asset('vendor/laraberg/js/laraberg.js') }}\"\u003e\u003c/script\u003e\n```\n\n#### Dependencies\n\nThe Gutenberg editor expects React, ReactDOM, Moment and JQuery to be in the\nenvironment it runs in. An easy way to do this would be to add the following\nlines to your page:\n\n```html\n\u003cscript src=\"https://unpkg.com/react@17.0.2/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n#### Initializing the Editor\n\nThe Gutenberg editor should replace an existing textarea in a form. On submit, the\nraw content from the editor will be put in the `value` attribute of this textarea:\n\n```html\n\u003ctextarea id=\"[id_here]\" name=\"[name_here]\" hidden\u003e\u003c/textarea\u003e\n```\n\nIn order to edit the content on an already existing model, we have to set the value\nof the textarea to the raw content that the Gutenberg editor provided:\n\n```html\n\u003ctextarea id=\"[id_here]\" name=\"[name_here]\" hidden\u003e{{ $model-\u003econtent }}\u003c/textarea\u003e\n```\n\nTo initialize the editor, all we have to do is call the initialize method with\nthe ID of the textarea. You probably want to do this inside a `DOMContentLoaded` event.\n\nAnd that's it! The editor will replace the textarea in the DOM, and on a form\nsubmit the editor content will be available in the textarea's value attribute.\n\n```js\nLaraberg.init('[id_here]')\n```\n\n#### Configuration options\n\nThe `init()` function takes an optional configuration object which can be used\nto change Laraberg's behaviour in some ways:\n\n```js\nconst options = {}\nLaraberg.init('[id_here]', options)\n```\n\nThe `options` object should be an `EditorSettings` object:\n\n```typescript\ninterface EditorSettings {\n    height?: string;\n    mediaUpload?: (upload: MediaUpload) =\u003e void;\n    fetchHandler?: FetchHandler;\n    disabledCoreBlocks?: string[];\n    alignWide?: boolean;\n    supportsLayout?: boolean;\n    maxWidth?: number;\n    imageEditing?: boolean;\n    colors?: Color[];\n    gradients?: Gradient[];\n    fontSizes?: FontSize[];\n}\n```\n\n#### Models\n\nIn order to add the editor content to a model, Laraberg provides the\n`RendersContent` trait:\n\n```php\nuse VanOns\\Laraberg\\Traits\\RendersContent;\n\nclass MyModel extends Model\n{\n    use RendersContent;\n}\n```\n\nThis adds the `render` method to your model, which takes care of rendering the\nraw editor content. By default, the `render` method renders the content in the\n`content` column. This column can be changed by setting the `$contentColumn`\nproperty on your model to the column that you want to use instead:\n\n```php\nuse VanOns\\Laraberg\\Traits\\RendersContent;\n\nclass MyModel extends Model\n{\n    use RendersContent;\n\n    protected $contentColumn = 'my_column';\n}\n```\n\nYou can also pass the column name to the render method:\n\n```php\n$model-\u003erender('my_column');\n```\n\n#### Custom Blocks\n\nGutenberg allows developers to create custom blocks. For information on how to\ncreate a custom block you should read the\n[Gutenberg documentation].\n\nRegistering custom blocks is fairly easy. A Gutenberg block requires the\nproperties `title`, `icon` and `categories`. It also needs to implement the\nfunctions `edit()` and `save()`:\n\n```js\nconst myBlock =  {\n  title: 'My First Block!',\n  icon: 'universal-access-alt',\n  category: 'my-category',\n\n  edit() {\n    return \u003ch1\u003eHello editor.\u003c/h1\u003e\n  },\n\n  save() {\n    return \u003ch1\u003eHello saved content.\u003c/h1\u003e\n  }\n}\n\nLaraberg.registerBlockType('my-namespace/my-block', myBlock)\n```\n\n##### Server-side blocks\n\nServer-side blocks can be registered in Laravel. You probably want to create a\nServiceProvider and register your server-side blocks in its `boot` method:\n\n```php\nclass BlockServiceProvider extends ServiceProvider\n{\n    public function boot() {\n        Laraberg::registerBlockType(\n            'my-namespace/my-block',\n            [],\n            function ($attributes, $content) {\n                return view('blocks.my-block', compact('attributes', 'content'));\n            }\n        );\n    }\n}\n```\n\n#### WordPress exports\n\nLaraberg uses the WordPress Gutenberg packages under the hood. A lot of these\npackages expose functionality that lets you customize the editor. You can access these packages\nin Javascript using the global `Laraberg` object.\n\n- `Laraberg.wordpress.blockEditor`\n- `Laraberg.wordpress.blocks`\n- `Laraberg.wordpress.components`\n- `Laraberg.wordpress.data`\n- `Laraberg.wordpress.element`\n- `Laraberg.wordpress.hooks`\n- `Laraberg.wordpress.serverSideRender`\n\n## Contributing\n\nPlease see [contributing] for more information about how you can contribute.\n\n## Changelog\n\nPlease see [changelog] for more information about what has changed recently.\n\n## Upgrading\n\nPlease see [upgrading] for more information about how to upgrade.\n\n## Security\n\nPlease see [security] for more information about how we deal with security.\n\n## Credits\n\nWe would like to thank the following contributors for their contributions to this project:\n\n- [All Contributors][all-contributors]\n\n## License\n\nThe scripts and documentation in this project are released under the [GPL-3.0 License][license].\n\n---\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://van-ons.nl/\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://opensource.van-ons.nl/files/cow.png\" width=\"50\" alt=\"Logo of Van Ons\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n[Gutenberg documentation]: https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/\n[contributing]: CONTRIBUTING.md\n[changelog]: CHANGELOG.md\n[upgrading]: UPGRADING.md\n[security]: SECURITY.md\n[all-contributors]: ../../contributors\n[license]: LICENSE.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVanOns%2Flaraberg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVanOns%2Flaraberg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVanOns%2Flaraberg/lists"}