Block Editor for Ruby on Rails - Sample

This is a very basic sample host application for the Block Editor Ruby on Rails gem

It was created by following these steps;

Create new Rails application

rails new block_editor_sample

Generate Post scaffold

rails generate scaffold Post title:string

Add Block Editor gem and bundle

// Gemfile
gem 'block_editor'

Add Block Editor migrations & migrate

rails block_editor:install:migrations
rails db:migrate

Add include BlockEditor::Listable to the Post model

class Post < ApplicationRecord
  include BlockEditor::Listable
end

Add the block editor to Post form;

  <%= form.fields_for :active_block_list do |block_list| %>
    <%= BlockEditor::Instance.render(block_list) %>
  <% end %>

Updated trusted post parameters and specifically set the listable within the PostsController;

  # Only allow a list of trusted parameters through.
  def post_params
    params.require(:post).permit(:title, active_block_list_attributes: [ :id, :content ])
  end

@post.active_block_list.listable = @post

Add the block editor Javascript and styles within HEAD tag

  <%= javascript_pack_tag 'block_editor/application', 'data-turbolinks-track': 'reload', webpacker: 'BlockEditor' %>
  <%= stylesheet_pack_tag 'block_editor/application', 'data-turbolinks-track': 'reload', webpacker: 'BlockEditor' %>

Install Bootstrap. Note this is only required if you want to use the base styles that BlockEditor provides as they depend on Bootstrap

yarn add bootstrap

Add SCSS imports for Bootstrap & base block editor styles. Check them out here
Win

yamasolutions/block-editor-sample

Block Editor for Ruby on Rails - Sample