{"id":13515697,"url":"https://github.com/yamasolutions/block-editor","last_synced_at":"2025-10-28T09:04:15.412Z","repository":{"id":49958063,"uuid":"346905920","full_name":"yamasolutions/block-editor","owner":"yamasolutions","description":"A block editor for Ruby on Rails","archived":false,"fork":false,"pushed_at":"2022-04-27T23:02:11.000Z","size":423,"stargazers_count":17,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T16:06:10.551Z","etag":null,"topics":["block-editor","rails-engine","rails-gem","ruby-on-rails","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"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/yamasolutions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-12T02:15:46.000Z","updated_at":"2025-01-14T12:03:21.000Z","dependencies_parsed_at":"2022-08-30T04:11:54.716Z","dependency_job_id":null,"html_url":"https://github.com/yamasolutions/block-editor","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamasolutions%2Fblock-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamasolutions%2Fblock-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamasolutions%2Fblock-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamasolutions%2Fblock-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamasolutions","download_url":"https://codeload.github.com/yamasolutions/block-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217156,"owners_count":21066634,"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":["block-editor","rails-engine","rails-gem","ruby-on-rails","wysiwyg-editor"],"created_at":"2024-08-01T05:01:14.940Z","updated_at":"2025-10-28T09:04:10.377Z","avatar_url":"https://github.com/yamasolutions.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Happy Exploring 🤘"],"sub_categories":[],"readme":"# Block Editor for Ruby on Rails\nThis editor uses packages from the [Wordpress Gutenberg project](https://github.com/WordPress/gutenberg) to build a standalone block editor for Rails. This editor has been extracted from [Integral CMS](https://github.com/yamasolutions/integral) where it was built following the [Wordpress custom block editor tutorial](https://developer.wordpress.org/block-editor/how-to-guides/platform/custom-block-editor/).\n\nThe editor currently uses the v9.2.1 Gutenberg release packages which were part of the Wordpress v5.6 release.\n\nLooking for a demo? Checkout this [simple host application example.](https://block-editor-rails.herokuapp.com/)\n\nMore information;\n\n* [Simple host application example source repository](https://github.com/yamasolutions/block-editor-sample)\n* [Current Wordpress Editor Demo](https://wordpress.org/gutenberg/)\n* [Gutenberg Block Editor Developer Documentation](https://developer.wordpress.org/block-editor/)\n\n## Installation\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'block_editor'\n```\n\nAnd then execute:\n```bash\n$ bundle\n```\n\nOr install it yourself as:\n```bash\n$ gem install block_editor\n```\n\n## Usage\n\n* Grab the required migrations and migrate;\n```\nrails block_editor:install:migrations\nrails db:migrate\n```\n* Add `include BlockEditor::Listable` to any model you wish to associate the block editor with, i.e.\n\n```\nclass Post \u003c ApplicationRecord\n  include BlockEditor::Listable\nend\n```\n* Add the block editor to your model form;\n```\n  \u003c%= form.fields_for :active_block_list do |block_list| %\u003e\n    \u003c%= BlockEditor::Instance.render(block_list) %\u003e\n  \u003c% end %\u003e\n```\n* Add the block editor Javascript and styles within your `HEAD` tag\n```\n  \u003c%= javascript_pack_tag 'block_editor/application', 'data-turbolinks-track': 'reload', webpacker: 'BlockEditor' %\u003e\n  \u003c%= stylesheet_pack_tag 'block_editor/application', 'data-turbolinks-track': 'reload', webpacker: 'BlockEditor' %\u003e\n```\n* Boom! You have a Block Editor linked to your model\n\nNote: If the error `Webpacker::Manifest::MissingEntryError` appears you need to run the following command to precompile the BlockEditor assets;\n```\nrails block_editor:webpacker:compile\n```\n\n### Strong Parameters\nRemember to permit the block list attributes if you're using Strong Parameters (you should be), i.e;\n```\n  # Only allow a list of trusted parameters through.\n  def post_params\n    params.require(:post).permit(:title, active_block_list_attributes: [ :id, :content ])\n  end\n```\n\nNote: You may also need to specifically set the listable attribute within your controller before saving, i.e. -\n```\n@post.active_block_list.listable = @post\n```\n\n### Styling\n\nBlockEditor has a soft dependency on Bootstrap. You will need to add this to your application in order for the default styles to be compiled. If you do not want to use the default styles do not include them in the your application stylesheet and override BlockEditor's backend stylesheet (`block_editor/frontend.scss`) with whatever custom styles you want to include.\n\n#### Frontend\nInclude the default styles into your application stylesheet;\n```\n  @import \"block_editor/blocks/frontend\";\n  @import \"block_editor/utilities\";\n```\n\n### Backend\nAdd the backend stylesheet where you are rendering the block editor, for example admin dashboard;\n```\n\u003c%= stylesheet_link_tag 'block_editor/backend', media: 'all', 'data-turbolinks-track': 'reload' %\u003e\n```\n\n### Overriding and/or adding custom styles\nThe below files are provided by BlockEditor as entry points. Override them if you want to provide custom styling to your blocks;\n* `app/assets/stylesheets/block_editor/host_app/blocks/_frontend.scss` - Any styles that should be displayed within the frontend and backend\n* `app/assets/stylesheets/block_editor/host_app/blocks/_backend.scss` - Any styles that should _only_ be displayed within the block editor itself, i.e when creating or editing the blocks\n\n### Media Uploader \u0026 Images\nThere is no built in MediaUploader or media gallery, it is up to the host application to implement this.\n\nWhen the media uploader is requested the Block Editor checks if `window.BlockEditorMediaUploader` is defined. If it is defined the block editor will call `window.BlockEditorMediaUploader.open(callback)`, otherwise it will randomly select an image from [Unsplash](https://unsplash.com)\n\nWhen an image is successfully uploaded or selected the BlockEditorMediaUploader instance should call the callback which was passed into the `open` function;\n```\ncallback({url: imageUrl})\n```\n\n### Turbolinks\nCurrently Block Editor is not compatible with Turbolinks as history is only being reset on full page loads. To disable Turbolinks per page add the following in your layout view file within your `\u003cHEAD\u003e`;;\n```\n\u003cmeta name=\"turbolinks-visit-control\" content=\"reload\"\u003e\n```\n\n### Reusable Blocks\n\nBlockEditor will check the following endpoints for any available reusable blocks, if any are found they will appear in the inserter menus\n```\n    get '/wp/v2/types', to: 'backend/block_lists#wp_types'\n    get '/wp/v2/types/wp_block', to: 'backend/block_lists#wp_type'\n    get '/wp/v2/block_lists', to: 'backend/block_lists#block_lists'\n    get '/wp/v2/block_list/:id', to: 'backend/block_lists#show'\n    get '/wp/v2/blocks/:id', to: 'backend/block_lists#show'\n```\n\nFor an example of what the BlockEditor is expecting from these endpoints checkout how [Integral CMS has implemented this](https://github.com/yamasolutions/integral/blob/master/app/controllers/integral/backend/block_lists_controller.rb)\n\n### Adding/Removing blocks\n*Currently there isn't a way of adding or removing blocks without forking the gem.*\n\n* Fork the gem\n* Edit `app/javascript/block_editor/blocks/index.js` where all blocks are registered\n\n\n### Dynamic blocks\nDynamic blocks are useful for non-static content such as a recent posts block or more complex blocks like a contact form block.\n\n*Currently the gem needs to be forked in order to create a dynamic block*\n\nA dynamic block is made up of 4 components;\n* Ruby class to handle frontend rendering\n* Partial to be rendered on the frontend\n* Frontend and backend styling\n* JS file to manage how the block behaves within the block editor itself (This part currently is not possible without forking the gem) [Read More](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type)\n\n1. Create block class which can be as simple as;\n```\nclass RecentPosts \u003c BlockEditor::Base\n  def self.name\n    'block-editor/recent-posts'\n  end\nend\n```\n2. Add block class to ```BlockEditor.dynamic_blocks``` config;\n```\n// application.rb\n\nBlockEditor.dynamic_blocks = [RecentPosts]\n```\n3. Create the view partial you want to be rendered as the block;\n```\n// app/views/block_editor/blocks/block-editor/recent-posts/_block.html.erb\n\nMy Recent Posts\n\u003c%= @posts %\u003e\n```\n4. Add any required styling to the frontend and backend stylesheets;\n\n```\napp/assets/stylesheets/block_editor/host_app/blocks/_frontend.scss\n```\n\n```\napp/assets/stylesheets/block_editor/host_app/blocks/_backend.scss\n```\n5. Add the block to the block editor\n* Fork the gem\n* Create the block JS file i.e. `app/javascript/block_editor/blocks/contact_form/index.js`\n* Edit `app/javascript/block_editor/blocks/index.js` to register the block\n\n## Contributing\nContribution are very welcome! Currently the biggest issue that needs to be solved is extensibility. There is no way to modify and configure the editor behaviour (such as blocks to display, block output etc) without forking the engine.\n\n## License\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamasolutions%2Fblock-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamasolutions%2Fblock-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamasolutions%2Fblock-editor/lists"}