spina-blocks 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24a864994819ca4dd7ee93b0cd6957d008d08586659ad9672654014b2add6961
-  data.tar.gz: 264aca6e16771526496af183ef5443091dc4ae70ea5f550bc0e29f0e9c5d1d5a
+  metadata.gz: 101db90d52972f83d5d308f7aa1cb1538b722105bba4e45676b520ba805bb438
+  data.tar.gz: cf2d2db9b0eacb4f1a18c2747c317a9da13003df8fa672954bcd3ce2ea75ad84
 SHA512:
-  metadata.gz: 297624cd733819fbdb489b8a6cfe6a5290959eac521aa11117fbf11aa4b50f999c9b4fccba3c3821e7d16a679b5023943b8bd2470f8a9f114529591a4bdfa899
-  data.tar.gz: 448f9470f24ae571bb6ac2f95aa882bca7b6504c968d5369d591b8e8a1d53711f6fc0d60becb2a793c228e0768b13ab63fc4ea3eb7add2bbf883b864d2fc42af
+  metadata.gz: ce7bcbb151b613732b0510c9d3f7c356ce161efa33b40df71116d5ebd96f3ab651290fc05408d3d89ad71786efb07c96b3689a40f3734ef54600ac4b530ec35a
+  data.tar.gz: 2c2db687f6312363ecaddf5ab424b24f1ea560d28d7a4ebaadc6817a03e90ed7501952222256139c684da693c41585184be37d53086b4f770c6cf13d1771799c

data/README.md

@@ -4,6 +4,10 @@
 
 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.
 
+## Requirements
+
+- Spina 2.21 or newer. Spina 2.21 builds its admin UI with Tailwind CSS 4, and the plugin's admin views use Tailwind 4 utility names. On Spina 2.20 or older, use spina-blocks 0.4.x.
+
 ## Installation
 
 Add to your Gemfile:
@@ -21,8 +25,16 @@ rails generate spina:blocks:install
 
 This copies the plugin's migrations into your app and runs `db:migrate`.
 
+The plugin registers its views, helpers and JavaScript in `Spina.config.tailwind_content`, so `rails spina:tailwind:build` (also run by `assets:precompile`) picks up the classes it uses in Spina's admin CSS.
+
 ## Upgrading
 
+### To 0.5.0 (Spina 2.21)
+
+Upgrade Spina to 2.21 together with spina-blocks 0.5.0, then rebuild the admin CSS with `rails spina:tailwind:build`. Spina 2.21 needs `tailwindcss-ruby` 4. It generates `app/assets/stylesheets/spina/application.tailwind.css` (with an `@source` line for every `tailwind_content` path) in place of the old `app/assets/config/spina/tailwind.config.js`.
+
+### From timestamp migrations
+
 If you are upgrading from a version that used timestamp migrations (`20250101000001`–`20250101000004`), the new migrations will detect the old version numbers in your `schema_migrations` table, clean them up automatically, and skip any tables that already exist. No manual intervention is needed.
 
 ## Configuration
@@ -143,6 +155,31 @@ theme.parts = [
 
 With this configuration, the "Hero Block" select will only show blocks created with the `hero` template, and "Sidebar Blocks" will only show `sidebar_widget` blocks. If `options` is omitted or does not contain `block_template`, all active blocks are shown (the default behavior).
 
+#### Filling a reference in inline
+
+A `BlockReference` normally points at a shared block. Pass `inline: true` to also let editors fill the block template's fields in on the page itself, storing that content in the page rather than in a block record:
+
+```ruby
+theme.parts = [
+  { name: "testimonials", title: "Testimonials",
+    part_type: "Spina::Parts::BlockReference",
+    options: { block_template: "testimonials", inline: true } }
+]
+```
+
+The part form then offers two modes: **Select existing** (pick a shared block) and **Fill in here** (page-local content). Both render through the same block template partial, so `render_block(content(:testimonials))` is unchanged and the output is identical either way.
+
+Offering inline mode requires `block_template` — it is the field set editors fill in — and it is not available on parts bound to a `custom_block`. Without `inline: true` the part stays a plain block picker.
+
+Content already stored inline keeps rendering whatever you change later — the gate applies to the editor, not to rendering:
+
+- Remove `inline: true`: the content still shows on the site, and the page editor presents it as read-only rather than offering a block picker that couldn't override it.
+- Remove `block_template` but keep `inline: true`: the content stays editable, because the form falls back to the template it was filled in against.
+
+Either way a save preserves the stored content untouched.
+
+`inline: true` controls what the page editor offers, not what the model accepts; it is an authoring affordance rather than an access control.
+
 Then in your template:
 
 ```erb
@@ -155,6 +192,34 @@ Then in your template:
 <% end %>
 ```
 
+### Yielding content into block templates
+
+`render_block` and `render_custom_block` forward an optional content block to the partial, so block templates can expose `<%= yield %>` slots that callers fill at render time. This lets a single shared block adapt per-page without splitting it into template variants.
+
+In the block partial:
+
+```erb
+<%# app/views/my_theme/blocks/_funnel_form.html.erb %>
+<section class="funnel-form">
+  <% if block_given? %>
+    <%= yield %>
+  <% end %>
+  <%# ...rest of the form... %>
+</section>
+```
+
+In the page that includes it:
+
+```erb
+<%= render_block(content(:funnel_form_block)) do %>
+  <% if (banner = content(:discount_banner_section))&.content(:enabled) %>
+    <%= render "default/shared/blocks/discount_banner", block: banner %>
+  <% end %>
+<% end %>
+```
+
+Pages without anything to inject just call `render_block(...)` without a block — `block_given?` is `false` and the slot stays empty.
+
 ## Custom blocks (layout blocks)
 
 Custom blocks are non-deletable blocks that are automatically created during `rake spina:bootstrap`. They work similarly to Spina's `custom_pages` — once defined in the theme configuration, they are created on bootstrap and cannot be deleted through the admin interface. In the admin UI they are labeled as **Layout** blocks.
@@ -270,8 +335,8 @@ The plugin adds:
 | 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       |
-| `render_custom_block(key)`              | Render a custom (layout) block by its immutable key    |
+| `render_block(block, &content_block)`   | Render a single block using its template partial; an optional content block is forwarded to the partial via `yield` |
+| `render_custom_block(key, &content_block)` | Render a custom (layout) block by its immutable key; forwards a content block to the partial like `render_block`  |
 | `block_content(block, :part_name)`      | Access a block's content                               |
 | `block_has_content?(block, :part_name)` | Check if a block has content                           |
 

data/app/assets/javascripts/spina/controllers/block_reference_mode_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Toggles a BlockReference part between "reference" (select a shared block)
+// and "inline" (fill the block template's fields in on the page itself).
+//
+// Styled and driven like Spina's own tabs: active/inactive class lists come
+// from data attributes on the controller element. We don't reuse the `tabs`
+// controller because it always activates the first button on connect, which
+// would misreport the persisted mode.
+export default class extends Controller {
+  static get targets() {
+    return ["button", "referencePane", "inlinePane", "modeField"];
+  }
+
+  connect() {
+    this.#apply(this.hasModeFieldTarget ? this.modeFieldTarget.value : "reference");
+  }
+
+  switch(event) {
+    this.#apply(event.currentTarget.dataset.mode);
+  }
+
+  #apply(mode) {
+    const selected = mode === "inline" ? "inline" : "reference";
+
+    if (this.hasModeFieldTarget) {
+      this.modeFieldTarget.value = selected;
+    }
+
+    this.buttonTargets.forEach((button) => {
+      const isActive = button.dataset.mode === selected;
+      button.classList.remove(...(isActive ? this.#inactiveClasses : this.#activeClasses));
+      button.classList.add(...(isActive ? this.#activeClasses : this.#inactiveClasses));
+    });
+
+    if (this.hasReferencePaneTarget) {
+      this.referencePaneTarget.hidden = selected !== "reference";
+    }
+    if (this.hasInlinePaneTarget) {
+      this.inlinePaneTarget.hidden = selected !== "inline";
+    }
+  }
+
+  get #activeClasses() {
+    return this.#classList("blockReferenceModeActive", "active");
+  }
+
+  get #inactiveClasses() {
+    return this.#classList("blockReferenceModeInactive", "inactive");
+  }
+
+  #classList(datasetKey, fallback) {
+    return (this.element.dataset[datasetKey] || fallback).split(" ").filter(Boolean);
+  }
+}

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

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Spina
+  module Blocks
+    # Duck-typed stand-in for a Spina::Blocks::Block whose content lives inline
+    # in the page (a RepeaterContent) rather than in a persisted block record.
+    #
+    # It exposes just enough of the Block interface for `render_block` and block
+    # template partials to work unchanged: `active?`, `block_template`, and
+    # `content` / `has_content?` delegating to the inline RepeaterContent.
+    class InlineBlock
+      attr_reader :block_template
+
+      def initialize(repeater_content, block_template)
+        @repeater_content = repeater_content
+        @block_template = block_template.to_s
+      end
+
+      def active?
+        true
+      end
+
+      # Mirrors Spina::Partable#content: named lookup returns the part's content,
+      # no argument returns a ContentPresenter.
+      def content(name = nil)
+        repeater_content.content(name)
+      end
+
+      def has_content?(name)
+        repeater_content.has_content?(name)
+      end
+
+      # Kept in step with the content so callers can hand a view context down
+      # explicitly. Without it ContentPresenter has to fall back on
+      # Spina::Current.page, which isn't set everywhere blocks are rendered.
+      def view_context
+        repeater_content.view_context
+      end
+
+      def view_context=(value)
+        repeater_content.view_context = value
+        # Partable memoises its ContentPresenter, capturing the view context
+        # resolved on first use. Drop the memo so a later assignment still takes
+        # effect instead of silently doing nothing.
+        repeater_content.instance_variable_set(:@content_presenter, nil)
+      end
+
+      # Surfaced by render_block's fallback when a block template partial is
+      # missing — naming the template is what makes that visible to an editor.
+      def name
+        block_template
+      end
+
+      def to_s
+        block_template
+      end
+
+      private
+
+      attr_reader :repeater_content
+    end
+  end
+end

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

@@ -4,12 +4,30 @@ module Spina
   module Parts
     class BlockReference < Base
       include BlockFilterable
+      include AttrJson::NestedAttributes
+
+      BOOLEAN_TYPE = ActiveModel::Type::Boolean.new.freeze
 
       attr_json :block_id, :integer, default: nil
+      # "reference" (default): points at a shared block via block_id / custom_block.
+      # "inline": content is filled in and stored on the page itself.
+      attr_json :mode, :string, default: nil
+      # Inline content, used when mode == "inline". Same shape as a Section's
+      # content: a RepeaterContent holding the block template's parts.
+      attr_json :inline_content, RepeaterContent.to_type, default: nil
+      attr_json_accepts_nested_attributes_for :inline_content
+      # The block template inline content was filled in against, persisted with
+      # the content itself. Part options are a theme-side concern and are only
+      # attached when Spina builds parts for the admin form — parts deserialized
+      # from stored page JSON (i.e. when rendering the site) carry none — so
+      # inline content has to be self-describing to render.
+      attr_json :inline_block_template, :string, default: nil
 
       attr_accessor :options
 
       def content
+        return inline_block if inline?
+
         if custom_block_name.present?
           custom_block_record
         else
@@ -17,6 +35,34 @@ module Spina
         end
       end
 
+      # Whether this reference is filled inline (page-local) instead of pointing
+      # at a shared block. Absent/blank mode is treated as "reference" so existing
+      # parts stay backward compatible.
+      def inline?
+        mode.to_s == "inline"
+      end
+
+      # Whether the theme lets this part be filled in inline. Off unless opted in,
+      # so a reference keeps meaning "pick a shared block" by default.
+      #
+      # This gates the editor only. Content already stored inline keeps rendering
+      # if the option is later removed, rather than vanishing from the site.
+      def inline_allowed?
+        return false if options.blank?
+
+        value = options.key?(:inline) ? options[:inline] : options["inline"]
+        BOOLEAN_TYPE.cast(value) || false
+      end
+
+      # Optional block template restriction from the part's theme options. Filters
+      # the block picker and, when present, is what inline mode fills in against.
+      # Only available where options are attached (the admin form).
+      def block_template_name
+        return if options.blank?
+
+        options[:block_template] || options["block_template"]
+      end
+
       # Returns the custom_block key from options, supporting both symbol and string keys
       def custom_block_name
         return if options.blank?
@@ -30,6 +76,50 @@ module Spina
 
         ::Spina::Blocks::Block.find_by(key: custom_block_name)
       end
+
+      # Accepts inline content as a JSON string so the form can round-trip
+      # content it cannot render fields for — e.g. the block template is no
+      # longer registered in the theme. Without it the next save would drop
+      # stored content that is still rendering on the site.
+      def inline_content_json=(raw)
+        return if raw.blank?
+
+        parsed = JSON.parse(raw)
+        self.inline_content = parsed if parsed.is_a?(Hash)
+      rescue StandardError
+        # Best-effort restore of a value that arrives from a client-controlled
+        # hidden field: malformed JSON, or a payload naming a part type attr_json
+        # won't build, must leave the stored content alone rather than break the
+        # page save.
+        nil
+      end
+
+      private
+
+      # Wraps inline content so it renders through the same block template partial
+      # as a shared block. Returns nil when nothing has been filled in, so callers
+      # using `render_block(content)` render nothing (matching an empty reference).
+      def inline_block
+        template = inline_block_template.presence || block_template_name.presence
+        # Without a template there is no partial to render; bail out rather than
+        # let render_block fall through to its empty placeholder wrapper.
+        return if template.blank?
+        return if inline_content.blank?
+        return if Array(inline_content.parts).none? { |part| part_filled?(part) }
+
+        ::Spina::Blocks::InlineBlock.new(inline_content, template)
+      end
+
+      # Defers to each part's own `present?`, which Image and Attachment override
+      # to check for an attached blob. The one case `present?` gets wrong here is
+      # a boolean-shaped part deliberately set to false — empty by Rails' rules,
+      # filled by the editor's.
+      def part_filled?(part)
+        value = part.content
+        return true if value == false
+
+        value.present?
+      end
     end
   end
 end

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

@@ -43,7 +43,7 @@
            data-action="input->block-collection#onSearchInput focus->block-collection#onSearchFocus"
            placeholder="Search or add block..."
            autocomplete="off"
-           class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-spina focus:ring-spina" />
+           class="block w-full rounded-md border-gray-300 shadow-xs text-sm focus:border-spina focus:ring-spina" />
 
     <div data-block-collection-target="dropdown"
          style="display:none"
@@ -68,7 +68,7 @@
 
   <%# Selected block list item %>
   <template data-block-collection-target="listItemTemplate">
-    <div class="flex items-center bg-white border border-gray-200 rounded-md px-3 py-2 shadow-sm group" data-block-id="">
+    <div class="flex items-center bg-white border border-gray-200 rounded-md px-3 py-2 shadow-xs group" data-block-id="">
       <button type="button" data-sortable-handle class="mr-2 text-gray-300 hover:text-gray-500 cursor-grab" title="Drag to reorder">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M432 288H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-112H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"/>
@@ -84,7 +84,7 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
         </svg>
       </a>
-      <button type="button" class="ml-2 text-gray-300 hover:text-red-500 transition-colors"
+      <button type="button" class="ml-2 cursor-pointer text-gray-300 hover:text-red-500 transition-colors"
               data-action="block-collection#remove" data-block-id="" title="Remove">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -101,7 +101,7 @@
   <%# Dropdown option (available block) %>
   <template data-block-collection-target="dropdownOptionTemplate">
     <button type="button"
-            class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
+            class="w-full cursor-pointer text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
             data-action="block-collection#add" data-block-id="">
       <span data-role="title"></span>
     </button>

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

@@ -1,11 +1,81 @@
-<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>
+<%
+  part = f.object
+
+  # Prefer the template the theme binds this part to; fall back to the one the
+  # stored content was filled in against, so dropping the option from the theme
+  # leaves existing inline content editable instead of silently unrenderable.
+  template_name = part.block_template_name.presence || part.inline_block_template.presence
+
+  # Inline mode is opt-in per part, needs a known field set, and never applies to
+  # a fixed system block.
+  inline_parts = []
+  if part.inline_allowed? && part.custom_block_name.blank? && template_name.present?
+    block_template = current_theme.block_templates.find { |bt| bt[:name].to_s == template_name.to_s }
+    inline_parts = block_template&.dig(:parts) || []
+  end
+
+  allow_inline = inline_parts.any?
+  current_mode = part.inline? ? "inline" : "reference"
+
+  # Content filled in inline while the part no longer offers inline editing —
+  # the theme dropped `inline: true`, or its block template is gone. The content
+  # still renders, so offering the block picker here would be a no-op: `content`
+  # returns the inline content regardless of what's selected.
+  inline_not_editable = part.inline? && !allow_inline
+
+  # Mirrors Spina::Pages::TabButtonComponent and the tabs controller's class
+  # lists, so the toggle reads as a Spina tab bar. Applied server-side too, so
+  # the current mode is correct before (and without) Stimulus.
+  tab_button_classes = "block px-3 leading-relaxed py-1 rounded-md hover:text-gray-800 " \
+                       "font-medium text-sm flex items-center whitespace-nowrap"
+  active_classes = "cursor-default text-gray-900 bg-spina-dark/10"
+  inactive_classes = "cursor-pointer bg-transparent text-gray-400 border-transparent"
+%>
+
+<div class="mt-6"
+     data-controller="block-reference-mode"
+     data-block-reference-mode-active="<%= active_classes %>"
+     data-block-reference-mode-inactive="<%= inactive_classes %>">
+  <label class="block text-sm leading-5 font-medium text-gray-700"><%= part.title %></label>
+  <% if part.hint.present? %>
+    <div class="text-gray-400 text-sm"><%= part.hint %></div>
   <% end %>
-  <div class="mt-1">
-    <% if f.object.custom_block_name.present? %>
-      <% custom_block = f.object.custom_block_record %>
+
+  <% if allow_inline %>
+    <%= f.hidden_field :mode, value: current_mode, data: { block_reference_mode_target: "modeField" } %>
+
+    <div class="mt-2 inline-flex w-auto rounded-md bg-white">
+      <% { "reference" => t("spina.blocks.mode_reference"), "inline" => t("spina.blocks.mode_inline") }.each do |mode_value, label| %>
+        <button type="button"
+                class="<%= tab_button_classes %> <%= mode_value == current_mode ? active_classes : inactive_classes %>"
+                data-mode="<%= mode_value %>"
+                data-block-reference-mode-target="button"
+                data-action="block-reference-mode#switch">
+          <%= label %>
+        </button>
+      <% end %>
+    </div>
+  <% else %>
+    <%= f.hidden_field :mode %>
+
+    <% if part.inline_content.present? %>
+      <%# No field set to render (template gone from the theme), but the content
+          is still stored and may still be rendering — round-trip it verbatim so
+          saving this page doesn't drop it. %>
+      <%= f.hidden_field :inline_block_template %>
+      <%= f.hidden_field :inline_content_json, value: part.inline_content.as_json.to_json %>
+    <% end %>
+  <% end %>
+
+  <%# ---- Reference pane: pick a shared block (or show a fixed custom block) ----
+      Always rendered, so switching modes stays client-side. %>
+  <div class="<%= allow_inline ? "mt-4" : "mt-1" %>"
+       data-block-reference-mode-target="referencePane"
+       <%= "hidden" if allow_inline && current_mode != "reference" %>>
+    <% if inline_not_editable %>
+      <span class="text-sm text-gray-400"><%= t("spina.blocks.inline_not_editable") %></span>
+    <% elsif part.custom_block_name.present? %>
+      <% custom_block = part.custom_block_record %>
       <% if custom_block %>
         <%= link_to custom_block.name,
               spina.edit_blocks_admin_block_path(custom_block),
@@ -14,11 +84,38 @@
         <span class="text-sm text-red-500"><%= t('spina.blocks.custom_block_not_found') %></span>
       <% end %>
     <% else %>
-      <% blocks = f.object.available_blocks %>
+      <% blocks = part.available_blocks %>
       <%= f.select :block_id,
             blocks.map { |b| [b.name, b.id] },
             {include_blank: t('spina.blocks.select_block')},
             class: "form-select text-sm w-full shadow-xs" %>
     <% end %>
   </div>
+
+  <%# ---- Inline pane: fill the block template's fields on the page itself ---- %>
+  <% if allow_inline %>
+    <%
+      inline_rc = part.inline_content ||
+                  Spina::Parts::RepeaterContent.new(name: part.name, title: part.title)
+    %>
+    <div class="mt-4"
+         data-block-reference-mode-target="inlinePane"
+         <%= "hidden" if current_mode != "inline" %>>
+      <%# Persisted with the content so rendering doesn't depend on theme options. %>
+      <%= f.hidden_field :inline_block_template, value: template_name %>
+
+      <%= f.fields_for :inline_content, inline_rc do |ff| %>
+        <%= ff.hidden_field :name, value: part.name %>
+        <%= ff.hidden_field :title, value: part.title %>
+
+        <%= ff.fields_for :parts, build_parts(ff.object, inline_parts) do |fff| %>
+          <%= fff.hidden_field :type, value: fff.object.class.name %>
+          <%= fff.hidden_field :name %>
+          <%= fff.hidden_field :title %>
+
+          <%= render "spina/admin/parts/#{parts_partial_namespace(fff.object.class.to_s)}/form", f: fff %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
 </div>

data/app/views/spina/admin/parts/content_blocks/_fields.html.erb

@@ -10,7 +10,7 @@
 <% template_title = template_config[:title] || f.object.block_type&.titleize || "Block" %>
 <% parts = template_config[:parts] || [] %>
 
-<div class="border border-gray-200 rounded-md bg-white shadow-sm"
+<div class="border border-gray-200 rounded-md bg-white shadow-xs"
      data-<%= sc %>-target="block"
      data-block-type="<%= f.object.block_type %>">
 
@@ -30,7 +30,7 @@
     <span class="flex-1 text-sm font-medium text-gray-700"><%= template_title %></span>
 
     <button type="button"
-            class="ml-3 text-gray-300 hover:text-red-500 transition-colors"
+            class="ml-3 cursor-pointer text-gray-300 hover:text-red-500 transition-colors"
             data-action="click-><%= sc %>#removeBlock:stop"
             title="<%= t('spina.content_blocks.remove') %>">
       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

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

@@ -43,7 +43,7 @@
            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"
+                  class="w-full cursor-pointer text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                   data-action="content-blocks#addBlock"
                   data-block-type="<%= template[:name] %>">
             <%= template[:title] || template[:name].titleize %>

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

@@ -45,7 +45,7 @@
            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"
+                  class="w-full cursor-pointer 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 %>

data/app/views/spina/admin/pro/search/results/_block.html.erb

@@ -1,12 +1,12 @@
 <%= link_to spina.edit_blocks_admin_block_path(block), class: "block px-2 leading-tight", data: {selected: index.zero?, search_target: "result", action: "mouseenter->search#select", turbo_frame: "_top"} do %>
-  <div class="flex items-center justify-between w-full px-4 py-3 rounded-md bg-gray-400 bg-opacity-0 <%= 'bg-opacity-25' if index.zero? %>" data-selected-class="bg-opacity-25">
+  <div class="flex items-center justify-between w-full px-4 py-3 rounded-md <%= 'bg-gray-400/25' if index.zero? %>" data-selected-class="bg-gray-400/25">
     <div>
       <div class="font-medium flex items-center">
         <%= block.name %>
         <% unless block.active? %>
           <div class="opacity-50 text-xs ml-1">(inactive)</div>
         <% end %>
-        <div class="flex items-center ml-2 text-xs px-1.5 py-0.5 space-x-1 bg-gray-900 bg-opacity-5 rounded">
+        <div class="flex items-center ml-2 text-xs px-1.5 py-0.5 space-x-1 bg-gray-900/5 rounded">
           <%= heroicon('cube', style: :outline, class: 'w-3 h-3 opacity-50') %>
           <div class="opacity-75"><%= block.block_template %></div>
         </div>

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

@@ -18,7 +18,7 @@
       <nav class="-mb-1 md:-mb-3 mt-4">
         <div class="relative inline-block" data-controller="reveal" data-reveal-away-value>
           <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"
+                  class="inline-flex items-center cursor-pointer 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-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                   data-action="reveal#toggle">
             <% if @current_filter == "layout" %>
               <%= heroicon('lock-closed', style: :mini, class: 'h-4 w-4 mr-1.5 -ml-0.5 opacity-75') %>

data/config/locales/en.yml

@@ -31,6 +31,9 @@ en:
       category: "Category"
       no_category: "— No category —"
       select_block: "— Select block —"
+      mode_reference: "Select existing"
+      mode_inline: "Fill in here"
+      inline_not_editable: "Filled in on this page. Inline editing is switched off for this part, so the content still shows on the site but can't be edited or replaced here."
       block_type: "Block type"
       select_block_type: "— Select block type —"
       no_blocks_yet: "No blocks yet. Create your first block to get started."

data/lib/spina/blocks/engine.rb

@@ -40,11 +40,12 @@ module Spina
       end
 
       initializer "spina.blocks.assets.precompile" do |app|
-        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
+        app.config.assets.precompile += [
+          "spina/controllers/block_collection_controller.js",
+          "spina/controllers/block_reference_mode_controller.js",
+          "spina/controllers/content_blocks_controller.js",
+          "spina/controllers/nested_content_blocks_controller.js",
+          "spina/utils/dropdown_position.js",
         ] if defined?(Sprockets)
       end
 

data/lib/spina/blocks/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: spina-blocks
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Konstantin Kanashchuk
@@ -15,14 +15,20 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '2.21'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '2.21'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
 - !ruby/object:Gem::Dependency
   name: database_cleaner-active_record
   requirement: !ruby/object:Gem::Requirement
@@ -90,6 +96,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/spina/controllers/block_collection_controller.js
+- app/assets/javascripts/spina/controllers/block_reference_mode_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
@@ -102,6 +109,7 @@ files:
 - app/models/spina/blocks/application_record.rb
 - app/models/spina/blocks/block.rb
 - app/models/spina/blocks/category.rb
+- app/models/spina/blocks/inline_block.rb
 - app/models/spina/blocks/page_block.rb
 - app/models/spina/blocks/page_extension.rb
 - app/models/spina/blocks/search_extension.rb