spina-blocks 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: f004335deec2f8669d819540c01d8a58786f016b2a13de4d037da05f18301442
+  data.tar.gz: 623b17f09b53f84b957c9b112675951df21bc73d9de1a4719a3f8ed91bba7519
+SHA512:
+  metadata.gz: e6d2c8a6d51c3c3393a2fb9511472272f0af777e150a6fab6c7fb6409a8a1450a87c6f01a98323272850a2896958a2ead13c20d1d9831cc4f6edfeb0daf901d4
+  data.tar.gz: c1a70f6285ba5888a6507fecdd0a432c8d23a74d174465cc6569a6a3a18a5f9b8efb44c1aaa375cea3cfb38fb95a068553be037676b68efa633e43850f0f2b40

data/README.md

@@ -0,0 +1,154 @@
+# Spina Blocks
+
+A plugin for [Spina CMS](https://www.spinacms.com) that adds reusable block components. Blocks are independent content units with their own templates and fields that can be assembled into pages.
+
+## Installation
+
+Add to your Gemfile:
+
+```ruby
+gem "spina-blocks"
+```
+
+Run:
+
+```bash
+bundle install
+rails db:migrate
+```
+
+## Configuration
+
+### Theme setup
+
+In your theme initializer, add block templates and categories:
+
+```ruby
+# config/initializers/themes/my_theme.rb
+Spina::Theme.register do |theme|
+  theme.name = "my_theme"
+  theme.title = "My Theme"
+
+  # Enable the blocks plugin
+  theme.plugins = ["blocks"]
+
+  # Define all available parts (shared between pages and blocks)
+  theme.parts = [
+    { name: "headline", title: "Headline", part_type: "Spina::Parts::Line" },
+    { name: "body", title: "Body", part_type: "Spina::Parts::Text" },
+    { name: "image", title: "Image", part_type: "Spina::Parts::Image" },
+    { name: "button_text", title: "Button Text", part_type: "Spina::Parts::Line" },
+    { name: "button_url", title: "Button URL", part_type: "Spina::Parts::Line" }
+  ]
+
+  # Block categories (for organizing blocks in the library)
+  theme.block_categories = [
+    { name: "heroes", label: "Heroes" },
+    { name: "features", label: "Features" },
+    { name: "cta", label: "Call to Action" }
+  ]
+
+  # Block templates (which parts each block type uses)
+  theme.block_templates = [
+    {
+      name: "hero",
+      title: "Hero Section",
+      description: "Full-width hero with headline and image",
+      parts: ["headline", "body", "image", "button_text", "button_url"]
+    },
+    {
+      name: "cta_banner",
+      title: "CTA Banner",
+      description: "Call to action banner",
+      parts: ["headline", "body", "button_text", "button_url"]
+    }
+  ]
+
+  # Page templates (can use BlockCollection or BlockReference parts)
+  theme.view_templates = [
+    {
+      name: "homepage",
+      title: "Homepage",
+      parts: ["headline", "page_blocks"]
+    }
+  ]
+end
+```
+
+### Block view templates
+
+Create partials for each block template:
+
+```erb
+<%# app/views/my_theme/blocks/_hero.html.erb %>
+<section class="hero">
+  <h1><%= block_content(block, :headline) %></h1>
+  <div><%= block.content(:body) %></div>
+</section>
+```
+
+### Using blocks on pages
+
+#### Option 1: Page assembled from blocks (via PageBlocks)
+
+In your page template, render all attached blocks:
+
+```erb
+<%# app/views/my_theme/pages/homepage.html.erb %>
+<%= render_blocks %>
+```
+
+Manage which blocks appear on a page via Admin > Blocks > (select page).
+
+#### Option 2: Block as a part type
+
+Use `Spina::Parts::BlockReference` for a single block or `Spina::Parts::BlockCollection` for multiple blocks in your theme parts:
+
+```ruby
+theme.parts = [
+  { name: "hero_block", title: "Hero Block", part_type: "Spina::Parts::BlockReference" },
+  { name: "page_blocks", title: "Page Blocks", part_type: "Spina::Parts::BlockCollection" }
+]
+```
+
+Then in your template:
+
+```erb
+<%# Single block reference %>
+<%= render_block(content(:hero_block)) %>
+
+<%# Block collection %>
+<% content(:page_blocks)&.each do |block| %>
+  <%= render_block(block) %>
+<% end %>
+```
+
+## Models
+
+| Model | Description |
+|-------|-------------|
+| `Spina::Blocks::Block` | Reusable content block with template and parts |
+| `Spina::Blocks::Category` | Block category for organizing the library |
+| `Spina::Blocks::PageBlock` | Join model linking blocks to pages (with position) |
+
+## Admin interface
+
+The plugin adds:
+
+- **Blocks** link in the Content section of the admin sidebar
+- Block library with category tabs for filtering
+- Block editor with content fields (same as page editor)
+- Page Blocks management page (per-page block assignment and ordering)
+
+## Helper methods
+
+| Helper | Description |
+|--------|-------------|
+| `render_blocks(page)` | Render all blocks attached to a page via PageBlocks |
+| `render_block(block)` | Render a single block using its template partial |
+| `block_content(block, :part_name)` | Access a block's content |
+| `block_has_content?(block, :part_name)` | Check if a block has content |
+
+## License
+
+MIT

data/Rakefile

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require 'bundler/setup'
+require 'bundler/gem_tasks'

data/app/controllers/spina/blocks/admin/blocks_controller.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    module Admin
+      class BlocksController < ::Spina::Admin::AdminController
+        admin_section :content
+
+        before_action :set_locale
+        before_action :set_block, only: %i[edit edit_content update destroy]
+        before_action :set_tabs, only: %i[edit update]
+
+        helper ::Spina::Admin::PagesHelper
+
+        def index
+          add_breadcrumb I18n.t('spina.blocks.title'), spina.blocks_admin_blocks_path
+
+          @block_templates = current_theme.try(:block_templates) || []
+
+          if params[:block_template].present?
+            @current_block_template = params[:block_template]
+            @blocks = Spina::Blocks::Block.where(block_template: @current_block_template).sorted
+          else
+            @current_block_template = nil
+            @blocks = Spina::Blocks::Block.sorted
+          end
+        end
+
+        def new
+          @block = Spina::Blocks::Block.new(block_template: params[:block_template])
+        end
+
+        def create
+          @block = Spina::Blocks::Block.new(block_params)
+          if @block.save
+            redirect_to spina.edit_blocks_admin_block_url(@block)
+          else
+            render turbo_stream: turbo_stream.update(
+              helpers.dom_id(@block, :new_block_form),
+              partial: 'new_block_form'
+            )
+          end
+        end
+
+        def edit
+          add_breadcrumb I18n.t('spina.blocks.title'), spina.blocks_admin_blocks_path, class: 'text-gray-400'
+          add_breadcrumb @block.title
+        end
+
+        def edit_content
+          @parts = current_theme.block_templates&.find do |bt|
+            bt[:name].to_s == @block.block_template.to_s
+          end&.dig(:parts) || []
+        end
+
+        def update
+          Mobility.locale = @locale
+          if @block.update(block_params)
+            flash[:success] = I18n.t('spina.blocks.saved')
+            redirect_to spina.edit_blocks_admin_block_url(@block, params: { locale: @locale })
+          else
+            add_breadcrumb I18n.t('spina.blocks.title'), spina.blocks_admin_blocks_path, class: 'text-gray-400'
+            Mobility.locale = I18n.locale
+            add_breadcrumb @block.title
+            flash.now[:error] = I18n.t('spina.blocks.couldnt_be_saved')
+            render :edit, status: :unprocessable_entity
+          end
+        end
+
+        def sort
+          params[:ids].each.with_index do |id, index|
+            Spina::Blocks::Block.where(id: id).update_all(position: index + 1)
+          end
+
+          flash.now[:info] = I18n.t('spina.blocks.sorting_saved')
+          render_flash
+        end
+
+        def destroy
+          flash[:info] = I18n.t('spina.blocks.deleted')
+          @block.destroy
+          redirect_to spina.blocks_admin_blocks_url
+        end
+
+        private
+
+        def set_locale
+          @locale = params[:locale] || I18n.default_locale
+        end
+
+        def set_block
+          @block = Spina::Blocks::Block.find(params[:id])
+        end
+
+        def set_tabs
+          @tabs = %w[block_content block_settings]
+        end
+
+        def block_params
+          params.require(:block).permit!
+        end
+      end
+    end
+  end
+end

data/app/controllers/spina/blocks/admin/categories_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    module Admin
+      class CategoriesController < ::Spina::Admin::AdminController
+        admin_section :content
+
+        def index
+          @categories = Spina::Blocks::Category.sorted
+        end
+
+        def edit
+          @category = Spina::Blocks::Category.find(params[:id])
+          add_breadcrumb I18n.t('spina.blocks.title'), spina.blocks_admin_blocks_path, class: 'text-gray-400'
+          add_breadcrumb @category.label
+        end
+
+        def update
+          @category = Spina::Blocks::Category.find(params[:id])
+          if @category.update(category_params)
+            flash[:success] = I18n.t('spina.block_categories.saved')
+            redirect_to spina.blocks_admin_blocks_url
+          else
+            flash.now[:error] = I18n.t('spina.block_categories.couldnt_be_saved')
+            render :edit, status: :unprocessable_entity
+          end
+        end
+
+        private
+
+        def category_params
+          params.require(:category).permit(:name, :label, :position)
+        end
+      end
+    end
+  end
+end

data/app/controllers/spina/blocks/admin/page_blocks_controller.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    module Admin
+      class PageBlocksController < ::Spina::Admin::AdminController
+        admin_section :content
+
+        before_action :set_page
+
+        def index
+          add_breadcrumb I18n.t('spina.website.pages'), spina.admin_pages_path, class: 'text-gray-400'
+          add_breadcrumb @page.title, spina.edit_admin_page_path(@page), class: 'text-gray-400'
+          add_breadcrumb I18n.t('spina.page_blocks.title')
+
+          @page_blocks = @page.page_blocks.sorted.includes(:block)
+          @available_blocks = Spina::Blocks::Block.active.sorted.where.not(id: @page.block_ids)
+        end
+
+        def create
+          @page_block = @page.page_blocks.build(page_block_params)
+          @page_block.position = @page.page_blocks.maximum(:position).to_i + 1
+
+          if @page_block.save
+            flash[:success] = I18n.t('spina.page_blocks.added')
+          else
+            flash[:error] = I18n.t('spina.page_blocks.couldnt_be_added')
+          end
+
+          redirect_to spina.blocks_admin_page_page_blocks_url(page_id: @page.id)
+        end
+
+        def destroy
+          @page_block = @page.page_blocks.find(params[:id])
+          @page_block.destroy
+          flash[:info] = I18n.t('spina.page_blocks.removed')
+          redirect_to spina.blocks_admin_page_page_blocks_url(page_id: @page.id)
+        end
+
+        def sort
+          params[:ids].each.with_index do |id, index|
+            @page.page_blocks.where(id: id).update_all(position: index + 1)
+          end
+
+          flash.now[:info] = I18n.t('spina.page_blocks.sorting_saved')
+          render_flash
+        end
+
+        private
+
+        def set_page
+          @page = ::Spina::Page.find(params[:page_id])
+        end
+
+        def page_block_params
+          params.require(:page_block).permit(:block_id)
+        end
+      end
+    end
+  end
+end

data/app/helpers/spina/blocks/blocks_helper.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    module BlocksHelper
+      # Render all blocks attached to the current page via PageBlocks
+      # Usage in a page template: <%= render_blocks %>
+      def render_blocks(page = nil)
+        page ||= current_page
+        return unless page.respond_to?(:page_blocks)
+
+        page.page_blocks.sorted.includes(:block).each do |page_block|
+          block = page_block.block
+          next unless block&.active?
+
+          concat render_block(block)
+        end
+      end
+
+      # Render a single block using its block_template partial
+      # Usage: <%= render_block(some_block) %>
+      def render_block(block)
+        return unless block&.active?
+
+        current_spina_theme = Spina::Current.theme || current_theme
+        theme_name = current_spina_theme.name.parameterize.underscore
+
+        partial_path = "#{theme_name}/blocks/#{block.block_template}"
+
+        if lookup_context.exists?(partial_path, [], true)
+          render partial: partial_path, locals: { block: block }
+        else
+          render_block_fallback(block)
+        end
+      end
+
+      # Access a block's content like page content
+      # Usage in block partial: block_content(block, :headline)
+      def block_content(block, part_name = nil)
+        block.content(part_name)
+      end
+
+      # Check if a block has content for a given part
+      def block_has_content?(block, part_name)
+        block.has_content?(part_name)
+      end
+
+      private
+
+      def render_block_fallback(block)
+        content_tag(:div, class: "spina-block spina-block--#{block.block_template}") do
+          content_tag(:p, block.title, class: 'spina-block__title')
+        end
+      end
+    end
+  end
+end

data/app/models/spina/blocks/application_record.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

data/app/models/spina/blocks/block.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    class Block < ApplicationRecord
+      include AttrJson::Record
+      include AttrJson::NestedAttributes
+      include Spina::Partable
+      include Spina::TranslatedContent
+
+      belongs_to :category, class_name: 'Spina::Blocks::Category', optional: true
+      has_many :page_blocks, class_name: 'Spina::Blocks::PageBlock', dependent: :destroy
+      has_many :pages, through: :page_blocks, class_name: 'Spina::Page'
+
+      validates :title, presence: true
+      validates :block_template, presence: true
+
+      scope :active, -> { where(active: true) }
+      scope :sorted, -> { order(:position) }
+
+      def to_s
+        title
+      end
+    end
+  end
+end

data/app/models/spina/blocks/category.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    class Category < ApplicationRecord
+      has_many :blocks, class_name: 'Spina::Blocks::Block', foreign_key: :category_id, dependent: :nullify
+
+      validates :name, presence: true, uniqueness: true
+      validates :label, presence: true
+
+      scope :sorted, -> { order(:position) }
+
+      def to_s
+        label
+      end
+    end
+  end
+end

data/app/models/spina/blocks/page_block.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    class PageBlock < ApplicationRecord
+      belongs_to :page, class_name: 'Spina::Page'
+      belongs_to :block, class_name: 'Spina::Blocks::Block'
+
+      validates :block_id, uniqueness: { scope: :page_id }
+
+      scope :sorted, -> { order(:position) }
+    end
+  end
+end

data/app/models/spina/parts/block_collection.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Spina
+  module Parts
+    class BlockCollection < Base
+      attr_json :block_ids, :integer, array: true, default: -> { [] }
+
+      attr_accessor :options
+
+      def content
+        return [] if block_ids.blank?
+
+        blocks_by_id = ::Spina::Blocks::Block.active.where(id: block_ids).index_by(&:id)
+        block_ids.filter_map { |id| blocks_by_id[id] }
+      end
+    end
+  end
+end

data/app/models/spina/parts/block_reference.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Spina
+  module Parts
+    class BlockReference < Base
+      attr_json :block_id, :integer, default: nil
+
+      attr_accessor :options
+
+      def content
+        ::Spina::Blocks::Block.active.find_by(id: block_id)
+      end
+    end
+  end
+end

data/app/overrides/spina/account_override.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+Spina::Account.class_eval do
+  after_save :bootstrap_block_categories
+
+  private
+
+  def bootstrap_block_categories
+    theme_config = Spina::Theme.find_by_name(theme)
+    return unless theme_config
+    return unless theme_config.respond_to?(:block_categories) && theme_config.block_categories.present?
+
+    theme_config.block_categories.each_with_index do |category, index|
+      Spina::Blocks::Category.where(name: category[:name])
+                             .first_or_create(label: category[:label])
+                             .update(label: category[:label], position: index)
+    end
+  end
+end

data/app/overrides/spina/page_override.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+Spina::Page.class_eval do
+  has_many :page_blocks, class_name: 'Spina::Blocks::PageBlock', foreign_key: :page_id, dependent: :destroy
+  has_many :blocks, through: :page_blocks, class_name: 'Spina::Blocks::Block'
+end

data/app/views/spina/admin/hooks/blocks/_website_secondary_navigation.html.erb

@@ -0,0 +1,5 @@
+<%= render Spina::MainNavigation::LinkComponent.new(
+  t('spina.blocks.title'),
+  spina.blocks_admin_blocks_path,
+  active: controller_name.in?(%w(blocks categories page_blocks))
+) %>

data/app/views/spina/admin/parts/block_collections/_form.html.erb

@@ -0,0 +1,24 @@
+<div class="mt-6">
+  <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
+  <% if f.object.hint.present? %>
+    <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
+  <% end %>
+  <div class="mt-1">
+    <% blocks = Spina::Blocks::Block.active.sorted %>
+    <% selected_ids = f.object.block_ids || [] %>
+    <div class="space-y-2">
+      <% blocks.each do |block| %>
+        <label class="flex items-center space-x-2 cursor-pointer">
+          <input type="checkbox"
+                 name="<%= f.object_name %>[block_ids][]"
+                 value="<%= block.id %>"
+                 <%= 'checked' if selected_ids.include?(block.id) %>
+                 class="form-checkbox rounded text-spina border-gray-300">
+          <span class="text-sm text-gray-700"><%= block.title %></span>
+          <span class="text-xs text-gray-400">(<%= block.block_template %>)</span>
+        </label>
+      <% end %>
+    </div>
+    <input type="hidden" name="<%= f.object_name %>[block_ids][]" value="">
+  </div>
+</div>

data/app/views/spina/admin/parts/block_references/_form.html.erb

@@ -0,0 +1,13 @@
+<div class="mt-6">
+  <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
+  <% if f.object.hint.present? %>
+    <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
+  <% end %>
+  <div class="mt-1">
+    <% blocks = Spina::Blocks::Block.active.sorted %>
+    <%= f.select :block_id,
+          blocks.map { |b| [b.title, b.id] },
+          {include_blank: t('spina.blocks.select_block')},
+          class: "form-select text-sm w-full shadow-xs" %>
+  </div>
+</div>

data/app/views/spina/blocks/admin/blocks/_button_block_content.html.erb

@@ -0,0 +1,4 @@
+<%= render Spina::Pages::TabButtonComponent.new(tab_name: 'block_content') do %>
+  <%= heroicon('document-text', class: 'w-4 h-4 mr-1 -ml-1 opacity-75') %>
+  <%= t('spina.blocks.content') %>
+<% end %>

data/app/views/spina/blocks/admin/blocks/_button_block_settings.html.erb

@@ -0,0 +1,4 @@
+<%= render Spina::Pages::TabButtonComponent.new(tab_name: 'block_settings') do %>
+  <%= heroicon('cog-8-tooth', class: 'w-4 h-4 mr-1 -ml-1 opacity-75') %>
+  <%= t('spina.blocks.settings') %>
+<% end %>

data/app/views/spina/blocks/admin/blocks/_form.html.erb

@@ -0,0 +1,53 @@
+<div data-controller="tabs" data-tabs-active="cursor-default text-gray-900 bg-spina-dark/10" data-tabs-inactive="cursor-pointer bg-transparent text-gray-400 border-transparent">
+  <%= render Spina::UserInterface::HeaderComponent.new do |header| %>
+    <% header.with_actions do %>
+      <%= render Spina::UserInterface::TranslationsComponent.new(@block, label: @locale.to_s.upcase) %>
+
+      <div class="relative" data-controller="reveal" data-reveal-away-value>
+        <button type="button" class="btn btn-default px-3" data-action="reveal#toggle">
+          <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
+          </svg>
+        </button>
+
+        <div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200 z-30">
+          <div class="rounded-md bg-white shadow-xs py-1">
+            <%= button_to t('spina.blocks.delete'),
+                  spina.blocks_admin_block_path(@block),
+                  method: :delete,
+                  class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100/50 hover:text-red-500",
+                  form: {data: {controller: "confirm", confirm_message: t('spina.blocks.delete_confirmation')}} %>
+          </div>
+        </div>
+      </div>
+
+      <button type="submit" form="<%= dom_id(@block) %>" class="btn btn-primary" data-controller="button hotkeys" data-hotkeys="command+s, ctrl+s" data-hotkeys-target="button" data-action="button#loading" data-loading-message="Saving...">
+        <%= heroicon('check', style: :mini, class: 'w-5 h-5 -ml-1 mr-1') %>
+        <%= t('spina.blocks.save') %>
+      </button>
+    <% end %>
+
+    <% header.with_navigation do %>
+      <nav class="-mb-3 mt-4">
+        <ul class="inline-flex w-auto rounded-md bg-white">
+          <% @tabs.each do |tab_name| %>
+            <%= render partial: "button_#{tab_name}" %>
+          <% end %>
+        </ul>
+      </nav>
+    <% end %>
+  <% end %>
+
+  <div class="p-4 md:p-8">
+    <%= form_with model: @block, url: spina.blocks_admin_block_path(@block), id: dom_id(@block) do |f| %>
+      <%= hidden_field_tag :locale, @locale %>
+      <% Mobility.with_locale(@locale) do %>
+        <% @tabs.each_with_index do |tab_name, idx| %>
+          <div data-tabs-target="pane" id="<%= tab_name %>" <%= 'hidden' unless idx.zero? %>>
+            <%= render partial: "form_#{tab_name}", locals: {f: f} %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/spina/blocks/admin/blocks/_form_block_content.html.erb

@@ -0,0 +1,8 @@
+<div class="max-w-5xl">
+  <label class="font-medium text-gray-700">
+    <%= Spina::Blocks::Block.human_attribute_name(:title) %>
+  </label>
+  <%= render Spina::Forms::TextFieldComponent.new(f, :title, size: "lg") %>
+  <turbo-frame id="block_content" src="<%= spina.edit_content_blocks_admin_block_path(f.object, locale: @locale) %>">
+  </turbo-frame>
+</div>

data/app/views/spina/blocks/admin/blocks/_form_block_settings.html.erb

@@ -0,0 +1,24 @@
+<div class="max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
+  <div class="col-span-1 mt-6 md:mt-0">
+    <label class="block text-sm font-medium leading-5 text-gray-700">
+      <%= Spina::Blocks::Block.human_attribute_name(:block_template) %>
+    </label>
+  </div>
+
+  <div class="col-span-2 mt-1">
+    <span class="text-sm text-gray-700"><%= @block.block_template %></span>
+  </div>
+
+  <div class="col-span-1 mt-6 md:mt-0">
+    <label class="block text-sm font-medium leading-5 text-gray-700">
+      <%= Spina::Blocks::Block.human_attribute_name(:active) %>
+    </label>
+    <div class="text-sm leading-5">
+      <p class="text-gray-500"><%= t('spina.blocks.active_description') %></p>
+    </div>
+  </div>
+
+  <div class="col-span-2 mt-1">
+    <%= render Spina::Forms::SwitchComponent.new(f, :active) %>
+  </div>
+</div>

data/app/views/spina/blocks/admin/blocks/_new_block_form.html.erb

@@ -0,0 +1,29 @@
+<%= turbo_frame_tag dom_id(@block, :new_block_form) do %>
+  <%= form_with model: @block, url: spina.blocks_admin_blocks_path, data: {turbo_frame: "_top"} do |f| %>
+    <%= f.hidden_field :block_template %>
+
+    <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+      <div class="sm:flex sm:items-start">
+        <div class="w-full">
+          <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
+            <%= t('spina.blocks.new') %>
+            <span class="text-gray-400 text-sm">(<%= f.object.block_template %>)</span>
+          </h3>
+
+          <div class="mt-3">
+            <%= render Spina::Forms::TextFieldComponent.new(f, :title, size: 'lg', autofocus: true) %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="px-4 pb-5 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+      <button type="submit" class="btn btn-primary w-full sm:w-auto sm:ml-2">
+        <%= t('spina.blocks.create') %>
+      </button>
+
+      <button type="button" class="btn btn-default w-full sm:w-auto mt-2 sm:mt-0" data-action="modal#close">
+        <%= t('spina.ui.cancel') %>
+      </button>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spina/blocks/admin/blocks/edit.html.erb

@@ -0,0 +1 @@
+<%= render 'form' %>

data/app/views/spina/blocks/admin/blocks/edit_content.html.erb

@@ -0,0 +1,11 @@
+<turbo-frame id="block_content">
+  <%= fields_for(@block) do |f| %>
+    <% f.fields_for "#{@locale}_content".to_sym, build_parts(f.object, @parts) do |ff| %>
+      <%= ff.hidden_field :type, value: ff.object.class %>
+      <%= ff.hidden_field :name %>
+      <%= ff.hidden_field :title %>
+
+      <%= render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff %>
+    <% end %>
+  <% end %>
+</turbo-frame>

data/app/views/spina/blocks/admin/blocks/index.html.erb

@@ -0,0 +1,81 @@
+<%= render Spina::UserInterface::HeaderComponent.new do |header| %>
+  <% header.with_actions do %>
+    <% block_templates = current_theme.try(:block_templates) || [] %>
+    <% if block_templates.any? %>
+      <div class="relative" data-controller="reveal" data-reveal-away-value>
+        <button type="button" class="btn btn-primary" data-action="reveal#toggle">
+          <%= heroicon('plus', style: :mini, class: 'w-4 h-4 mr-1 -ml-1') %>
+          <%= t('spina.blocks.new') %>
+        </button>
+
+        <div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200 z-30">
+          <div class="rounded-md bg-white shadow-xs py-1">
+            <% block_templates.each do |bt| %>
+              <%= link_to spina.new_blocks_admin_block_path(block_template: bt[:name]),
+                    class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900",
+                    data: {turbo_frame: "modal", action: "reveal#hide"} do %>
+                <%= bt[:title] %>
+                <% if bt[:description].present? %>
+                  <span class="text-gray-400 text-xs block"><%= bt[:description] %></span>
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% header.with_navigation do %>
+    <nav class="-mb-1 md:-mb-3 mt-4">
+      <ul class="inline-flex flex-wrap w-auto rounded-md bg-white">
+        <%= render Spina::UserInterface::TabLinkComponent.new(spina.blocks_admin_blocks_path, active: @current_block_template.nil?) do %>
+          <%= heroicon('squares-2x2', class: 'h-4 w-4 mr-1 -ml-1 opacity-75') %>
+          <%= t('spina.blocks.all') %>
+        <% end %>
+
+        <% @block_templates.each do |bt| %>
+          <%= render Spina::UserInterface::TabLinkComponent.new(
+                spina.blocks_admin_blocks_path(block_template: bt[:name]),
+                active: @current_block_template == bt[:name].to_s) do %>
+            <%= bt[:title] %>
+          <% end %>
+        <% end %>
+      </ul>
+    </nav>
+  <% end %>
+<% end %>
+
+<% if @blocks.any? %>
+  <div class="my-6 md:m-8 bg-white md:rounded-lg border-l-0 border-r-0 border md:border-r md:border-l border-gray-200 border-b-0 shadow-xs">
+    <div data-controller="sortable" data-sortable-url="<%= spina.sort_blocks_admin_blocks_path %>">
+      <form data-sortable-target="form" method="post" action="<%= spina.sort_blocks_admin_blocks_path %>">
+        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+      </form>
+      <ul data-sortable-target="list">
+        <% @blocks.each do |block| %>
+          <li class="border-b border-gray-200 flex items-center" data-id="<%= block.id %>">
+            <div class="px-4 py-1 cursor-move text-gray-300 hover:text-gray-500" data-sortable-handle>
+              <%= heroicon('bars-3', style: :mini, class: 'w-5 h-5') %>
+            </div>
+            <div class="flex-1 py-3 pr-4">
+              <%= link_to spina.edit_blocks_admin_block_path(block), class: "block" do %>
+                <div class="text-gray-900 font-medium text-sm"><%= block.title %></div>
+                <div class="text-gray-400 text-xs">
+                  <%= block.block_template %>
+                  <% unless block.active? %>
+                    &middot; <span class="text-red-400"><%= t('spina.blocks.inactive') %></span>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% else %>
+  <div class="m-8 my-6 italic text-gray-400">
+    <%= t('spina.blocks.no_blocks_yet') %>
+  </div>
+<% end %>

data/app/views/spina/blocks/admin/blocks/new.html.erb

@@ -0,0 +1,3 @@
+<%= render(Spina::UserInterface::ModalComponent.new) do %>
+  <%= render 'new_block_form' %>
+<% end %>

data/app/views/spina/blocks/admin/page_blocks/index.html.erb

@@ -0,0 +1,90 @@
+<%= render Spina::UserInterface::HeaderComponent.new do |header| %>
+  <% header.with_actions do %>
+    <% if @available_blocks.any? %>
+      <div class="relative" data-controller="reveal" data-reveal-away-value>
+        <button type="button" class="btn btn-primary" data-action="reveal#toggle">
+          <%= heroicon('plus', style: :mini, class: 'w-4 h-4 mr-1 -ml-1') %>
+          <%= t('spina.page_blocks.add_block') %>
+        </button>
+
+        <div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-72 max-h-96 overflow-y-auto rounded-md shadow-lg border border-gray-200 z-30">
+          <div class="rounded-md bg-white shadow-xs py-1">
+            <% Spina::Blocks::Category.sorted.each do |category| %>
+              <% category_blocks = @available_blocks.where(category: category) %>
+              <% if category_blocks.any? %>
+                <div class="px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider mt-1"><%= category.label %></div>
+                <% category_blocks.each do |block| %>
+                  <%= button_to spina.blocks_admin_page_page_blocks_path(page_id: @page.id),
+                        params: {page_block: {block_id: block.id}},
+                        method: :post,
+                        class: "block w-full text-left px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900" do %>
+                    <div><%= block.title %></div>
+                    <div class="text-xs text-gray-400"><%= block.block_template %></div>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <% uncategorized = @available_blocks.where(category_id: nil) %>
+            <% if uncategorized.any? %>
+              <div class="px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider mt-1"><%= t('spina.blocks.uncategorized') %></div>
+              <% uncategorized.each do |block| %>
+                <%= button_to spina.blocks_admin_page_page_blocks_path(page_id: @page.id),
+                      params: {page_block: {block_id: block.id}},
+                      method: :post,
+                      class: "block w-full text-left px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900" do %>
+                  <div><%= block.title %></div>
+                  <div class="text-xs text-gray-400"><%= block.block_template %></div>
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to spina.edit_admin_page_path(@page), class: "btn btn-default" do %>
+      <%= heroicon('arrow-left', style: :mini, class: 'w-4 h-4 mr-1 -ml-1') %>
+      <%= t('spina.page_blocks.back_to_page') %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if @page_blocks.any? %>
+  <div class="my-6 md:m-8 bg-white md:rounded-lg border-l-0 border-r-0 border md:border-r md:border-l border-gray-200 border-b-0 shadow-xs">
+    <div data-controller="sortable" data-sortable-url="<%= spina.sort_blocks_admin_page_page_blocks_path(page_id: @page.id) %>">
+      <form data-sortable-target="form" method="post" action="<%= spina.sort_blocks_admin_page_page_blocks_path(page_id: @page.id) %>">
+        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+      </form>
+      <ul data-sortable-target="list">
+        <% @page_blocks.each do |page_block| %>
+          <li class="border-b border-gray-200 flex items-center" data-id="<%= page_block.id %>">
+            <div class="px-4 py-1 cursor-move text-gray-300 hover:text-gray-500" data-sortable-handle>
+              <%= heroicon('bars-3', style: :mini, class: 'w-5 h-5') %>
+            </div>
+            <div class="flex-1 py-3">
+              <%= link_to spina.edit_blocks_admin_block_path(page_block.block), class: "block" do %>
+                <div class="text-gray-900 font-medium text-sm"><%= page_block.block.title %></div>
+                <div class="text-gray-400 text-xs">
+                  <%= page_block.block.block_template %>
+                </div>
+              <% end %>
+            </div>
+            <div class="pr-4">
+              <%= button_to spina.blocks_admin_page_page_block_path(page_id: @page.id, id: page_block.id),
+                    method: :delete,
+                    class: "text-gray-300 hover:text-red-500 transition-colors",
+                    form: {data: {controller: "confirm", confirm_message: t('spina.page_blocks.remove_confirmation')}} do %>
+                <%= heroicon('x-mark', style: :mini, class: 'w-5 h-5') %>
+              <% end %>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% else %>
+  <div class="m-8 my-6 italic text-gray-400">
+    <%= t('spina.page_blocks.no_blocks_yet') %>
+  </div>
+<% end %>

data/config/locales/en.yml

@@ -0,0 +1,37 @@
+en:
+  spina:
+    blocks:
+      title: "Blocks"
+      new: "New block"
+      create: "Create block"
+      save: "Save block"
+      saved: "Block saved"
+      deleted: "Block deleted"
+      delete: "Delete block"
+      delete_confirmation: "Are you sure you want to delete this block?"
+      couldnt_be_saved: "Block couldn't be saved"
+      sorting_saved: "Sorting saved"
+      content: "Content"
+      settings: "Settings"
+      all: "All"
+      category: "Category"
+      no_category: "— No category —"
+      select_block: "— Select block —"
+      no_blocks_yet: "No blocks yet. Create your first block to get started."
+      inactive: "Inactive"
+      uncategorized: "Uncategorized"
+      active_description: "Inactive blocks are hidden from pages."
+    block_categories:
+      saved: "Category saved"
+      couldnt_be_saved: "Category couldn't be saved"
+    page_blocks:
+      title: "Page Blocks"
+      add_block: "Add block"
+      back_to_page: "Back to page"
+      added: "Block added to page"
+      couldnt_be_added: "Block couldn't be added"
+      removed: "Block removed from page"
+      sorting_saved: "Sorting saved"
+      remove_confirmation: "Remove this block from the page?"
+      no_blocks_yet: "No blocks on this page yet. Add blocks from the library to build your page."
+      manage_blocks: "Manage blocks"

data/config/routes.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+Spina::Engine.routes.draw do
+  namespace :blocks, path: '', module: 'blocks' do
+    namespace :admin, path: Spina.config.backend_path do
+      resources :blocks do
+        member do
+          get :edit_content
+        end
+
+        collection do
+          post :sort
+        end
+      end
+
+      resources :categories, only: %i[index edit update]
+
+      resources :pages, only: [] do
+        resources :page_blocks, only: %i[index create destroy] do
+          collection do
+            post :sort
+          end
+        end
+      end
+    end
+  end
+end

data/db/migrate/1_create_spina_blocks_categories.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateSpinaBlocksCategories < ActiveRecord::Migration[7.0]
+  def change
+    create_table :spina_blocks_categories do |t|
+      t.string :name, null: false
+      t.string :label, null: false
+      t.integer :position, default: 0
+
+      t.timestamps
+    end
+
+    add_index :spina_blocks_categories, :name, unique: true
+  end
+end

data/db/migrate/2_create_spina_blocks_blocks.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class CreateSpinaBlocksBlocks < ActiveRecord::Migration[7.0]
+  def change
+    create_table :spina_blocks_blocks do |t|
+      t.string :title, null: false
+      t.string :name, null: false
+      t.string :block_template, null: false
+      t.references :category, foreign_key: { to_table: :spina_blocks_categories }, null: true
+      t.integer :position, default: 0
+      t.boolean :active, default: true
+      t.json :json_attributes
+
+      t.timestamps
+    end
+
+    add_index :spina_blocks_blocks, :name, unique: true
+  end
+end

data/db/migrate/3_create_spina_blocks_page_blocks.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateSpinaBlocksPageBlocks < ActiveRecord::Migration[7.0]
+  def change
+    create_table :spina_blocks_page_blocks do |t|
+      t.references :page, null: false, foreign_key: { to_table: :spina_pages }
+      t.references :block, null: false, foreign_key: { to_table: :spina_blocks_blocks }
+      t.integer :position, default: 0
+
+      t.timestamps
+    end
+
+    add_index :spina_blocks_page_blocks, %i[page_id block_id], unique: true
+  end
+end

data/db/migrate/4_remove_name_from_spina_blocks_blocks.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class RemoveNameFromSpinaBlocksBlocks < ActiveRecord::Migration[7.0]
+  def change
+    remove_index :spina_blocks_blocks, :name
+    remove_column :spina_blocks_blocks, :name, :string
+  end
+end

data/lib/spina/blocks/engine.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    class Engine < ::Rails::Engine
+      isolate_namespace Spina::Blocks
+
+      config.before_initialize do
+        ::Spina::Plugin.register do |plugin|
+          plugin.name = 'blocks'
+          plugin.namespace = 'blocks'
+        end
+
+        ::Spina::Theme.class_eval do
+          attr_accessor :block_templates, :block_categories
+
+          unless method_defined?(:initialize_without_blocks)
+            alias_method :initialize_without_blocks, :initialize
+
+            def initialize
+              initialize_without_blocks
+              @block_templates = []
+              @block_categories = []
+            end
+          end
+        end
+      end
+
+      initializer 'spina.blocks.append_migrations' do |app|
+        unless app.root.to_s.match?(root.to_s)
+          config.paths['db/migrate'].expanded.each do |expanded_path|
+            app.config.paths['db/migrate'] << expanded_path
+          end
+        end
+      end
+
+      initializer 'spina.blocks.register_parts' do
+        config.to_prepare do
+          ::Spina::Part.register(
+            Spina::Parts::BlockReference,
+            Spina::Parts::BlockCollection
+          )
+        end
+      end
+
+      initializer 'spina.blocks.extend_page' do
+        config.to_prepare do
+          Dir.glob(Spina::Blocks::Engine.root.join('app/overrides/**/*.rb')).sort.each do |override|
+            load override
+          end
+        end
+      end
+
+      initializer 'spina.blocks.tailwind_content' do
+        ::Spina.config.tailwind_content << "#{Spina::Blocks::Engine.root}/app/views/**/*.*"
+        ::Spina.config.tailwind_content << "#{Spina::Blocks::Engine.root}/app/helpers/**/*.*"
+      end
+
+      initializer 'spina.blocks.i18n' do
+        config.i18n.load_path += Dir[Spina::Blocks::Engine.root.join('config', 'locales', '*.{rb,yml}')]
+      end
+
+      initializer 'spina.blocks.helpers' do
+        config.to_prepare do
+          ActionView::Base.include Spina::Blocks::BlocksHelper
+        end
+      end
+    end
+  end
+end

data/lib/spina/blocks/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    VERSION = '0.1.0'
+  end
+end

data/lib/spina-blocks.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+require 'spina'
+require 'spina/blocks/version'
+require 'spina/blocks/engine'

metadata

@@ -0,0 +1,93 @@
+--- !ruby/object:Gem::Specification
+name: spina-blocks
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Konstantin Kanashchuk
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: spina
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+description: A plugin for Spina CMS that adds reusable block components that can be
+  assembled into pages.
+email:
+- ksnitsky@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- Rakefile
+- app/controllers/spina/blocks/admin/blocks_controller.rb
+- app/controllers/spina/blocks/admin/categories_controller.rb
+- app/controllers/spina/blocks/admin/page_blocks_controller.rb
+- app/helpers/spina/blocks/blocks_helper.rb
+- app/models/spina/blocks/application_record.rb
+- app/models/spina/blocks/block.rb
+- app/models/spina/blocks/category.rb
+- app/models/spina/blocks/page_block.rb
+- app/models/spina/parts/block_collection.rb
+- app/models/spina/parts/block_reference.rb
+- app/overrides/spina/account_override.rb
+- app/overrides/spina/page_override.rb
+- app/views/spina/admin/hooks/blocks/_website_secondary_navigation.html.erb
+- app/views/spina/admin/parts/block_collections/_form.html.erb
+- app/views/spina/admin/parts/block_references/_form.html.erb
+- app/views/spina/blocks/admin/blocks/_button_block_content.html.erb
+- app/views/spina/blocks/admin/blocks/_button_block_settings.html.erb
+- app/views/spina/blocks/admin/blocks/_form.html.erb
+- app/views/spina/blocks/admin/blocks/_form_block_content.html.erb
+- app/views/spina/blocks/admin/blocks/_form_block_settings.html.erb
+- app/views/spina/blocks/admin/blocks/_new_block_form.html.erb
+- app/views/spina/blocks/admin/blocks/edit.html.erb
+- app/views/spina/blocks/admin/blocks/edit_content.html.erb
+- app/views/spina/blocks/admin/blocks/index.html.erb
+- app/views/spina/blocks/admin/blocks/new.html.erb
+- app/views/spina/blocks/admin/page_blocks/index.html.erb
+- config/locales/en.yml
+- config/routes.rb
+- db/migrate/1_create_spina_blocks_categories.rb
+- db/migrate/2_create_spina_blocks_blocks.rb
+- db/migrate/3_create_spina_blocks_page_blocks.rb
+- db/migrate/4_remove_name_from_spina_blocks_blocks.rb
+- lib/spina-blocks.rb
+- lib/spina/blocks/engine.rb
+- lib/spina/blocks/version.rb
+homepage: https://github.com/ksnitsky/spina-blocks
+licenses:
+- MIT
+metadata:
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.3
+specification_version: 4
+summary: Block component library for Spina CMS
+test_files: []