spina-blocks 0.3.0 → 0.4.0

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

@@ -0,0 +1,75 @@
+<%#
+  Admin form for Spina::Parts::NestedContentBlocks.
+  Same as ContentBlocks but uses "nested-content-blocks" Stimulus controller
+  to avoid scope conflicts when rendered inside Repeaters or other ContentBlocks.
+  Reuses content_blocks/_fields.html.erb for individual block rendering.
+%>
+<% available_templates = f.object.available_templates(current_theme) %>
+
+<div class="mt-4" data-controller="nested-content-blocks">
+  <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 mb-2"><%= f.object.hint %></div>
+  <% end %>
+
+  <%# List of existing content blocks %>
+  <div data-nested-content-blocks-target="list" class="space-y-3 mb-4">
+    <% (f.object.content || []).each do |content_block| %>
+      <%= f.fields_for :content, [content_block], child_index: content_block.object_id do |ff| %>
+        <%= render "spina/admin/parts/content_blocks/fields", f: ff, stimulus_controller: "nested-content-blocks" %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# Empty state %>
+  <div data-nested-content-blocks-target="emptyMessage"
+       class="text-sm text-gray-400 italic py-3 text-center"
+       style="<%= (f.object.content || []).any? ? 'display:none' : '' %>">
+    <%= t('spina.content_blocks.empty') %>
+  </div>
+
+  <%# Add block button with type picker dropdown %>
+  <% if available_templates.any? %>
+    <div class="relative">
+      <button type="button"
+              class="btn btn-default text-sm"
+              data-action="nested-content-blocks#toggleTypeMenu">
+        <svg class="w-4 h-4 mr-1.5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+        </svg>
+        <%= t('spina.content_blocks.add_block') %>
+      </button>
+
+      <div data-nested-content-blocks-target="typeMenu"
+           class="absolute z-10 mt-1 w-56 bg-white border border-gray-200 rounded-md shadow-lg py-1"
+           style="display:none">
+        <% available_templates.each do |template| %>
+          <button type="button"
+                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  data-action="nested-content-blocks#addBlock"
+                  data-block-type="<%= template[:name] %>">
+            <%= template[:title] || template[:name].titleize %>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <%# Pre-rendered templates for each block type (used by Stimulus to clone) %>
+  <% available_templates.each do |template| %>
+    <%
+      content_block = Spina::Parts::ContentBlock.new(
+        name: f.object.name,
+        block_type: template[:name].to_s
+      )
+      child_index_placeholder = content_block.object_id.to_s
+    %>
+    <template data-nested-content-blocks-target="blockTemplate"
+              data-block-type="<%= template[:name] %>"
+              data-child-index="<%= child_index_placeholder %>">
+      <%= f.fields_for(:content, [content_block], child_index: child_index_placeholder) do |ff| %>
+        <%= render "spina/admin/parts/content_blocks/fields", f: ff, stimulus_controller: "nested-content-blocks" %>
+      <% end %>
+    </template>
+  <% end %>
+</div>

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

@@ -12,11 +12,15 @@
 
         <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')}} %>
+            <% if @block.deletable? %>
+              <%= 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')}} %>
+            <% else %>
+              <span class="block px-4 py-2 text-sm leading-5 text-gray-400"><%= t('spina.blocks.cannot_be_deleted') %></span>
+            <% end %>
           </div>
         </div>
       </div>

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

@@ -1,4 +1,16 @@
 <div class="max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
+  <% if @block.key.present? %>
+    <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(:key) %>
+      </label>
+    </div>
+
+    <div class="col-span-2 mt-1">
+      <span class="text-sm text-gray-500 font-mono"><%= @block.key %></span>
+    </div>
+  <% end %>
+
   <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) %>

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

@@ -0,0 +1,42 @@
+<%# Modal variant of the new block form. Used when creating a block from BlockCollection.
+    After successful creation, the modal transitions to the block edit form.
+    Expects: @block, @block_templates %>
+<%= turbo_frame_tag dom_id(@block, :new_block_modal_form) do %>
+  <%= form_with model: @block, url: spina.blocks_admin_blocks_path, data: { turbo_frame: "modal" } do |f| %>
+    <%= hidden_field_tag :modal, 1 %>
+
+    <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') %>
+          </h3>
+
+          <div class="mt-4">
+            <label for="block_block_template" class="block text-sm font-medium text-gray-700 mb-1">
+              <%= t('spina.blocks.block_type') %>
+            </label>
+            <%= f.select :block_template,
+                  @block_templates.map { |bt| [bt[:title], bt[:name]] },
+                  { include_blank: t('spina.blocks.select_block_type') },
+                  class: "block w-full rounded-md border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 text-sm",
+                  required: true %>
+          </div>
+
+          <div class="mt-3">
+            <%= render Spina::Forms::TextFieldComponent.new(f, :name, 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-3">
+        <%= 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/index.html.erb

@@ -1,7 +1,9 @@
 <%= render Spina::UserInterface::HeaderComponent.new do |header| %>
   <% header.with_actions do %>
-    <% block_templates = current_theme.try(:block_templates) || [] %>
-    <% if block_templates.any? %>
+    <% creatable_templates = (current_theme.try(:block_templates) || []).reject { |bt|
+         ((current_theme.try(:custom_blocks) || []).map { |cb| cb[:block_template].to_s }.uniq).include?(bt[:name].to_s)
+       } %>
+    <% if creatable_templates.any? %>
       <%= link_to spina.new_blocks_admin_block_path,
             class: "btn btn-primary",
             data: {turbo_frame: "modal"} do %>
@@ -18,7 +20,10 @@
           <button type="button"
                   class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium bg-white border border-gray-300 text-gray-700 shadow-xs hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                   data-action="reveal#toggle">
-            <% if @current_block_template.present? %>
+            <% if @current_filter == "layout" %>
+              <%= heroicon('lock-closed', style: :mini, class: 'h-4 w-4 mr-1.5 -ml-0.5 opacity-75') %>
+              <%= t('spina.blocks.layout_blocks') %>
+            <% elsif @current_block_template.present? %>
               <% current_bt = @block_templates.find { |bt| bt[:name].to_s == @current_block_template } %>
               <%= current_bt ? current_bt[:title] : @current_block_template %>
             <% else %>
@@ -30,18 +35,33 @@
 
           <div hidden data-reveal data-transition class="origin-top-left absolute left-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">
+              <%# "All" filter %>
+              <% all_active = @current_block_template.nil? && @current_filter.nil? %>
               <%= link_to spina.blocks_admin_blocks_path,
-                    class: "flex items-center px-4 py-2 text-sm font-medium leading-5 #{@current_block_template.nil? ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}",
+                    class: "flex items-center px-4 py-2 text-sm font-medium leading-5 #{all_active ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}",
                     data: {action: "reveal#hide"} do %>
                 <%= heroicon('squares-2x2', class: 'h-4 w-4 mr-2 opacity-75') %>
                 <%= t('spina.blocks.all') %>
-                <% if @current_block_template.nil? %>
+                <% if all_active %>
+                  <%= heroicon('check', style: :mini, class: 'w-4 h-4 ml-auto opacity-75') %>
+                <% end %>
+              <% end %>
+
+              <%# "Layout" filter %>
+              <% layout_active = @current_filter == "layout" %>
+              <%= link_to spina.blocks_admin_blocks_path(filter: "layout"),
+                    class: "flex items-center px-4 py-2 text-sm font-medium leading-5 #{layout_active ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}",
+                    data: {action: "reveal#hide"} do %>
+                <%= heroicon('lock-closed', style: :mini, class: 'h-4 w-4 mr-2 opacity-75') %>
+                <%= t('spina.blocks.layout_blocks') %>
+                <% if layout_active %>
                   <%= heroicon('check', style: :mini, class: 'w-4 h-4 ml-auto opacity-75') %>
                 <% end %>
               <% end %>
 
               <div class="border-t border-gray-100 my-1"></div>
 
+              <%# Template filters %>
               <% @block_templates.each do |bt| %>
                 <% active = @current_block_template == bt[:name].to_s %>
                 <%= link_to spina.blocks_admin_blocks_path(block_template: bt[:name]),
@@ -84,6 +104,11 @@
                 </div>
               <% end %>
             </div>
+            <% unless block.deletable? %>
+              <div class="pr-4 shrink-0">
+                <span class="text-sm font-medium text-blue-500"><%= t('spina.blocks.layout_block') %></span>
+              </div>
+            <% end %>
           </li>
         <% end %>
       </ul>

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

@@ -1,3 +1,7 @@
 <%= render(Spina::UserInterface::ModalComponent.new) do %>
-  <%= render 'new_block_form' %>
+  <% if @modal %>
+    <%= render 'new_block_modal_form' %>
+  <% else %>
+    <%= render 'new_block_form' %>
+  <% end %>
 <% end %>

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

@@ -70,14 +70,20 @@
                 </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>
+            <% if page_block.block.deletable? %>
+              <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>
+            <% else %>
+              <div class="pr-4">
+                <span class="text-sm font-medium text-blue-500"><%= t('spina.blocks.layout_block') %></span>
+              </div>
+            <% end %>
           </li>
         <% end %>
       </ul>

data/config/locales/en.yml

@@ -1,4 +1,16 @@
 en:
+  activerecord:
+    attributes:
+      spina/blocks/block:
+        key: "Key"
+    errors:
+      models:
+        spina/blocks/block:
+          attributes:
+            base:
+              undeletable: "This block is a layout block and cannot be deleted."
+            key:
+              immutable: "cannot be changed after creation"
   spina:
     blocks:
       title: "Blocks"
@@ -10,6 +22,7 @@ en:
       deleted: "Block deleted"
       delete: "Delete block"
       delete_confirmation: "Are you sure you want to delete this block?"
+      cannot_be_deleted: "Block can't be deleted"
       couldnt_be_saved: "Block couldn't be saved"
       sorting_saved: "Sorting saved"
       content: "Content"
@@ -24,9 +37,17 @@ en:
       inactive: "Inactive"
       uncategorized: "Uncategorized"
       active_description: "Inactive blocks are hidden from pages."
+      layout_block: "Layout"
+      layout_blocks: "Layout blocks"
+      custom_block_not_found: "Custom block not found. Run rake spina:bootstrap to create it."
     block_categories:
       saved: "Category saved"
       couldnt_be_saved: "Category couldn't be saved"
+    content_blocks:
+      add_block: "Add block"
+      remove: "Remove"
+      empty: 'No content blocks yet. Click "Add block" to get started.'
+      no_template_found: "Unknown block type: %{type}"
     page_blocks:
       title: "Page Blocks"
       add_block: "Add block"
@@ -34,6 +55,7 @@ en:
       added: "Block added to page"
       couldnt_be_added: "Block couldn't be added"
       removed: "Block removed from page"
+      cannot_remove_layout_block: "This layout block cannot be removed from the 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."

data/config/routes.rb

@@ -11,6 +11,7 @@ Spina::Engine.routes.draw do
 
         collection do
           post :sort
+          get :blocks_data
         end
       end
 

data/db/migrate/6_add_custom_block_fields_to_spina_blocks_blocks.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class AddCustomBlockFieldsToSpinaBlocksBlocks < ActiveRecord::Migration[7.0]
+  def change
+    unless connection.column_exists?(:spina_blocks_blocks, :deletable)
+      add_column(:spina_blocks_blocks, :deletable, :boolean, default: true, null: false)
+    end
+
+    unless connection.column_exists?(:spina_blocks_blocks, :key)
+      add_column(:spina_blocks_blocks, :key, :string)
+      add_index(:spina_blocks_blocks, :key, unique: true, where: "key IS NOT NULL")
+    end
+  end
+end

data/lib/spina/blocks/engine.rb

@@ -12,7 +12,7 @@ module Spina
         end
 
         ::Spina::Theme.class_eval do
-          attr_accessor :block_templates, :block_categories
+          attr_accessor :block_templates, :block_categories, :custom_blocks, :content_block_templates
 
           unless method_defined?(:initialize_without_blocks)
             alias_method :initialize_without_blocks, :initialize
@@ -21,6 +21,8 @@ module Spina
               initialize_without_blocks
               @block_templates = []
               @block_categories = []
+              @custom_blocks = []
+              @content_block_templates = []
             end
           end
         end
@@ -31,11 +33,19 @@ module Spina
           pin_all_from Spina::Blocks::Engine.root.join("app/assets/javascripts/spina/controllers"),
             under: "controllers",
             to: "spina/controllers"
+          pin_all_from Spina::Blocks::Engine.root.join("app/assets/javascripts/spina/utils"),
+            under: "spina/utils",
+            to: "spina/utils"
         end
       end
 
       initializer "spina.blocks.assets.precompile" do |app|
-        app.config.assets.precompile += ["spina/controllers/block_collection_controller.js"] if defined?(Sprockets)
+        app.config.assets.precompile += %w[
+          spina/controllers/block_collection_controller.js
+          spina/controllers/content_blocks_controller.js
+          spina/controllers/nested_content_blocks_controller.js
+          spina/utils/dropdown_position.js
+        ] if defined?(Sprockets)
       end
 
       initializer "spina.blocks.register_parts" do
@@ -43,6 +53,9 @@ module Spina
           ::Spina::Part.register(
             Spina::Parts::BlockReference,
             Spina::Parts::BlockCollection,
+            Spina::Parts::ContentBlocks,
+            Spina::Parts::ContentBlock,
+            Spina::Parts::NestedContentBlocks,
           )
         end
       end

data/lib/spina/blocks/version.rb

@@ -2,6 +2,6 @@
 
 module Spina
   module Blocks
-    VERSION = "0.3.0"
+    VERSION = "0.4.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: spina-blocks
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Konstantin Kanashchuk
@@ -90,10 +90,14 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/spina/controllers/block_collection_controller.js
+- app/assets/javascripts/spina/controllers/content_blocks_controller.js
+- app/assets/javascripts/spina/controllers/nested_content_blocks_controller.js
+- app/assets/javascripts/spina/utils/dropdown_position.js
 - 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/concerns/spina/parts/block_filterable.rb
 - app/models/spina/blocks/account_extension.rb
 - app/models/spina/blocks/application_record.rb
 - app/models/spina/blocks/block.rb
@@ -103,9 +107,15 @@ files:
 - app/models/spina/blocks/search_extension.rb
 - app/models/spina/parts/block_collection.rb
 - app/models/spina/parts/block_reference.rb
+- app/models/spina/parts/content_block.rb
+- app/models/spina/parts/content_blocks.rb
+- app/models/spina/parts/nested_content_blocks.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/admin/parts/content_blocks/_fields.html.erb
+- app/views/spina/admin/parts/content_blocks/_form.html.erb
+- app/views/spina/admin/parts/nested_content_blocks/_form.html.erb
 - app/views/spina/admin/pro/search/results/_block.html.erb
 - app/views/spina/blocks/admin/blocks/_button_block_content.html.erb
 - app/views/spina/blocks/admin/blocks/_button_block_settings.html.erb
@@ -114,6 +124,7 @@ files:
 - app/views/spina/blocks/admin/blocks/_form_block_settings.html.erb
 - app/views/spina/blocks/admin/blocks/_modal_form.html.erb
 - app/views/spina/blocks/admin/blocks/_new_block_form.html.erb
+- app/views/spina/blocks/admin/blocks/_new_block_modal_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/edit_modal.html.erb
@@ -126,6 +137,7 @@ files:
 - db/migrate/2_create_spina_blocks_blocks.rb
 - db/migrate/3_create_spina_blocks_page_blocks.rb
 - db/migrate/5_rename_title_to_name_in_spina_blocks_blocks.rb
+- db/migrate/6_add_custom_block_fields_to_spina_blocks_blocks.rb
 - lib/generators/spina/blocks/install_generator.rb
 - lib/spina-blocks.rb
 - lib/spina/blocks/engine.rb