add live page editor sidebar with collapsible UI
All checks were successful
deploy / deploy (push) Successful in 6m49s
All checks were successful
deploy / deploy (push) Successful in 6m49s
Admins can now edit pages directly on the live shop by clicking the pencil icon in the header. A sidebar slides in with block management controls (add, remove, reorder, edit settings, save, reset, done). Key features: - PageEditorHook on_mount with handle_params/event/info hooks - BlockEditor pure functions extracted from admin editor - Shared BlockEditorComponents with event_prefix namespacing - Collapsible sidebar: X closes it, header pencil reopens it - Backdrop overlay dismisses sidebar on tap - Conditional admin.css loading for logged-in users - content_body block now portable (textarea setting + rich text fallback) 13 integration tests, 26 unit tests, 1370 total passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
405
lib/berrypod_web/components/block_editor_components.ex
Normal file
405
lib/berrypod_web/components/block_editor_components.ex
Normal file
@@ -0,0 +1,405 @@
|
||||
defmodule BerrypodWeb.BlockEditorComponents do
|
||||
@moduledoc """
|
||||
Shared UI components for the block editor.
|
||||
|
||||
Used by both the admin page editor (`Admin.Pages.Editor`) and the
|
||||
live page editor sidebar (`PageEditorHook` + `PageRenderer`).
|
||||
|
||||
All components accept an `event_prefix` attr to namespace phx-click
|
||||
events. The admin editor uses `""` (default), the live sidebar uses
|
||||
`"editor_"`.
|
||||
"""
|
||||
|
||||
use Phoenix.Component
|
||||
|
||||
import BerrypodWeb.CoreComponents, only: [icon: 1]
|
||||
|
||||
alias Berrypod.Pages.{BlockEditor, BlockTypes}
|
||||
|
||||
# ── Block card ─────────────────────────────────────────────────
|
||||
|
||||
attr :block, :map, required: true
|
||||
attr :idx, :integer, required: true
|
||||
attr :total, :integer, required: true
|
||||
attr :expanded, :any, required: true
|
||||
attr :event_prefix, :string, default: ""
|
||||
|
||||
def block_card(assigns) do
|
||||
block_type = BlockTypes.get(assigns.block["type"])
|
||||
has_settings = BlockEditor.has_settings?(assigns.block)
|
||||
expanded = MapSet.member?(assigns.expanded, assigns.block["id"])
|
||||
|
||||
assigns =
|
||||
assigns
|
||||
|> assign(:block_type, block_type)
|
||||
|> assign(:has_settings, has_settings)
|
||||
|> assign(:is_expanded, expanded)
|
||||
|
||||
~H"""
|
||||
<div
|
||||
class={["block-card", @is_expanded && "block-card-expanded"]}
|
||||
role="listitem"
|
||||
aria-label={"#{@block_type && @block_type.name || @block["type"]}, position #{@idx + 1} of #{@total}"}
|
||||
id={"block-#{@block["id"]}"}
|
||||
>
|
||||
<div class="block-card-header">
|
||||
<span class="block-card-position">{@idx + 1}</span>
|
||||
|
||||
<span class="block-card-icon">
|
||||
<.icon name={(@block_type && @block_type.icon) || "hero-puzzle-piece"} class="size-5" />
|
||||
</span>
|
||||
|
||||
<span class="block-card-name">
|
||||
{(@block_type && @block_type.name) || @block["type"]}
|
||||
</span>
|
||||
|
||||
<span class="block-card-controls">
|
||||
<button
|
||||
:if={@has_settings}
|
||||
phx-click={"#{@event_prefix}toggle_expand"}
|
||||
phx-value-id={@block["id"]}
|
||||
class={[
|
||||
"admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm",
|
||||
@is_expanded && "block-edit-btn-active"
|
||||
]}
|
||||
aria-label={"Edit #{@block_type && @block_type.name} settings"}
|
||||
aria-expanded={to_string(@is_expanded)}
|
||||
aria-controls={"block-settings-#{@block["id"]}"}
|
||||
id={"block-edit-btn-#{@block["id"]}"}
|
||||
>
|
||||
<.icon name="hero-cog-6-tooth-mini" class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
phx-click={"#{@event_prefix}move_up"}
|
||||
phx-value-id={@block["id"]}
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
|
||||
aria-label={"Move #{@block_type && @block_type.name} up"}
|
||||
disabled={@idx == 0}
|
||||
>
|
||||
<.icon name="hero-chevron-up-mini" class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
phx-click={"#{@event_prefix}move_down"}
|
||||
phx-value-id={@block["id"]}
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
|
||||
aria-label={"Move #{@block_type && @block_type.name} down"}
|
||||
disabled={@idx == @total - 1}
|
||||
>
|
||||
<.icon name="hero-chevron-down-mini" class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
phx-click={"#{@event_prefix}duplicate_block"}
|
||||
phx-value-id={@block["id"]}
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
|
||||
aria-label={"Duplicate #{@block_type && @block_type.name}"}
|
||||
>
|
||||
<.icon name="hero-document-duplicate-mini" class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
phx-click={"#{@event_prefix}remove_block"}
|
||||
phx-value-id={@block["id"]}
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm block-remove-btn"
|
||||
aria-label={"Remove #{@block_type && @block_type.name}"}
|
||||
data-confirm={"Remove #{@block_type && @block_type.name}?"}
|
||||
>
|
||||
<.icon name="hero-trash-mini" class="size-4" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<.block_settings_form
|
||||
:if={@is_expanded}
|
||||
block={@block}
|
||||
schema={@block_type.settings_schema}
|
||||
event_prefix={@event_prefix}
|
||||
/>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
# ── Settings form ──────────────────────────────────────────────
|
||||
|
||||
attr :block, :map, required: true
|
||||
attr :schema, :list, required: true
|
||||
attr :event_prefix, :string, default: ""
|
||||
|
||||
def block_settings_form(assigns) do
|
||||
settings = BlockEditor.settings_with_defaults(assigns.block)
|
||||
assigns = assign(assigns, :settings, settings)
|
||||
|
||||
~H"""
|
||||
<div class="block-card-settings" id={"block-settings-#{@block["id"]}"}>
|
||||
<form phx-change={"#{@event_prefix}update_block_settings"}>
|
||||
<input type="hidden" name="block_id" value={@block["id"]} />
|
||||
|
||||
<div class="block-settings-fields">
|
||||
<.block_field
|
||||
:for={field <- @schema}
|
||||
field={field}
|
||||
value={@settings[field.key]}
|
||||
block_id={@block["id"]}
|
||||
event_prefix={@event_prefix}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
# ── Field renderers ────────────────────────────────────────────
|
||||
|
||||
attr :field, :any, required: true
|
||||
attr :value, :any, required: true
|
||||
attr :block_id, :string, required: true
|
||||
attr :event_prefix, :string, default: ""
|
||||
|
||||
def block_field(%{field: %{type: :select}} = assigns) do
|
||||
~H"""
|
||||
<div class="admin-fieldset">
|
||||
<label>
|
||||
<span class="admin-label">{@field.label}</span>
|
||||
<select
|
||||
name={"block_settings[#{@field.key}]"}
|
||||
id={"block-#{@block_id}-#{@field.key}"}
|
||||
class="admin-select"
|
||||
phx-debounce="blur"
|
||||
>
|
||||
{Phoenix.HTML.Form.options_for_select(@field.options, to_string(@value))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def block_field(%{field: %{type: :textarea}} = assigns) do
|
||||
~H"""
|
||||
<div class="admin-fieldset">
|
||||
<label>
|
||||
<span class="admin-label">{@field.label}</span>
|
||||
<textarea
|
||||
name={"block_settings[#{@field.key}]"}
|
||||
id={"block-#{@block_id}-#{@field.key}"}
|
||||
class="admin-textarea"
|
||||
rows="3"
|
||||
phx-debounce="300"
|
||||
>{@value}</textarea>
|
||||
</label>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def block_field(%{field: %{type: :number}} = assigns) do
|
||||
~H"""
|
||||
<div class="admin-fieldset">
|
||||
<label>
|
||||
<span class="admin-label">{@field.label}</span>
|
||||
<input
|
||||
type="number"
|
||||
name={"block_settings[#{@field.key}]"}
|
||||
id={"block-#{@block_id}-#{@field.key}"}
|
||||
value={@value}
|
||||
class="admin-input"
|
||||
phx-debounce="blur"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def block_field(%{field: %{type: :repeater}} = assigns) do
|
||||
items = if is_list(assigns.value), do: assigns.value, else: []
|
||||
item_count = length(items)
|
||||
|
||||
assigns =
|
||||
assigns
|
||||
|> assign(:items, items)
|
||||
|> assign(:item_count, item_count)
|
||||
|
||||
~H"""
|
||||
<div class="repeater-field">
|
||||
<span class="admin-label">{@field.label}</span>
|
||||
|
||||
<ol class="repeater-items" aria-label={@field.label}>
|
||||
<li :for={{item, idx} <- Enum.with_index(@items)} class="repeater-item">
|
||||
<fieldset>
|
||||
<legend class="sr-only">
|
||||
Item {idx + 1}: {item["label"] || item[:label] || "New item"}
|
||||
</legend>
|
||||
|
||||
<div class="repeater-item-fields">
|
||||
<.repeater_item_field
|
||||
:for={sub_field <- @field.item_schema}
|
||||
sub_field={sub_field}
|
||||
item={item}
|
||||
field_key={@field.key}
|
||||
block_id={@block_id}
|
||||
index={idx}
|
||||
event_prefix={@event_prefix}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="repeater-item-controls">
|
||||
<button
|
||||
type="button"
|
||||
phx-click={"#{@event_prefix}repeater_move"}
|
||||
phx-value-block-id={@block_id}
|
||||
phx-value-field={@field.key}
|
||||
phx-value-index={idx}
|
||||
phx-value-dir="up"
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs"
|
||||
aria-label={"Move item #{idx + 1} up"}
|
||||
disabled={idx == 0}
|
||||
>
|
||||
<.icon name="hero-chevron-up-mini" class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
phx-click={"#{@event_prefix}repeater_move"}
|
||||
phx-value-block-id={@block_id}
|
||||
phx-value-field={@field.key}
|
||||
phx-value-index={idx}
|
||||
phx-value-dir="down"
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs"
|
||||
aria-label={"Move item #{idx + 1} down"}
|
||||
disabled={idx == @item_count - 1}
|
||||
>
|
||||
<.icon name="hero-chevron-down-mini" class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
phx-click={"#{@event_prefix}repeater_remove"}
|
||||
phx-value-block-id={@block_id}
|
||||
phx-value-field={@field.key}
|
||||
phx-value-index={idx}
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs repeater-remove-btn"
|
||||
aria-label={"Remove item #{idx + 1}"}
|
||||
>
|
||||
<.icon name="hero-x-mark-mini" class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
phx-click={"#{@event_prefix}repeater_add"}
|
||||
phx-value-block-id={@block_id}
|
||||
phx-value-field={@field.key}
|
||||
class="admin-btn admin-btn-outline admin-btn-xs repeater-add-btn"
|
||||
>
|
||||
<.icon name="hero-plus-mini" class="size-3.5" /> Add item
|
||||
</button>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def block_field(assigns) do
|
||||
~H"""
|
||||
<div class="admin-fieldset">
|
||||
<label>
|
||||
<span class="admin-label">{@field.label}</span>
|
||||
<input
|
||||
type="text"
|
||||
name={"block_settings[#{@field.key}]"}
|
||||
id={"block-#{@block_id}-#{@field.key}"}
|
||||
value={@value}
|
||||
class="admin-input"
|
||||
phx-debounce="300"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
# ── Repeater item field ────────────────────────────────────────
|
||||
|
||||
attr :sub_field, :any, required: true
|
||||
attr :item, :map, required: true
|
||||
attr :field_key, :string, required: true
|
||||
attr :block_id, :string, required: true
|
||||
attr :index, :integer, required: true
|
||||
attr :event_prefix, :string, default: ""
|
||||
|
||||
def repeater_item_field(assigns) do
|
||||
value = assigns.item[assigns.sub_field.key] || ""
|
||||
assigns = assign(assigns, :value, value)
|
||||
|
||||
~H"""
|
||||
<label class="repeater-sub-field">
|
||||
<span class="sr-only">{@sub_field.label}</span>
|
||||
<input
|
||||
type="text"
|
||||
name={"block_settings[#{@field_key}][#{@index}][#{@sub_field.key}]"}
|
||||
id={"block-#{@block_id}-#{@field_key}-#{@index}-#{@sub_field.key}"}
|
||||
value={@value}
|
||||
placeholder={@sub_field.label}
|
||||
class="admin-input admin-input-sm"
|
||||
phx-debounce="300"
|
||||
/>
|
||||
</label>
|
||||
"""
|
||||
end
|
||||
|
||||
# ── Block picker ───────────────────────────────────────────────
|
||||
|
||||
attr :allowed_blocks, :any, required: true
|
||||
attr :filter, :string, required: true
|
||||
attr :event_prefix, :string, default: ""
|
||||
|
||||
def block_picker(assigns) do
|
||||
filter = String.downcase(assigns.filter)
|
||||
|
||||
filtered =
|
||||
assigns.allowed_blocks
|
||||
|> Enum.filter(fn {_type, def} ->
|
||||
filter == "" or String.contains?(String.downcase(def.name), filter)
|
||||
end)
|
||||
|> Enum.sort_by(fn {_type, def} -> def.name end)
|
||||
|
||||
assigns = assign(assigns, :filtered_blocks, filtered)
|
||||
|
||||
~H"""
|
||||
<div class="block-picker-overlay">
|
||||
<div class="block-picker" phx-click-away={"#{@event_prefix}hide_picker"}>
|
||||
<div class="block-picker-header">
|
||||
<h3>Add a block</h3>
|
||||
<button
|
||||
phx-click={"#{@event_prefix}hide_picker"}
|
||||
class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
|
||||
aria-label="Close"
|
||||
>
|
||||
<.icon name="hero-x-mark" class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter blocks..."
|
||||
value={@filter}
|
||||
phx-keyup={"#{@event_prefix}filter_picker"}
|
||||
phx-key=""
|
||||
class="admin-input block-picker-search"
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<div class="block-picker-grid">
|
||||
<button
|
||||
:for={{type, def} <- @filtered_blocks}
|
||||
phx-click={"#{@event_prefix}add_block"}
|
||||
phx-value-type={type}
|
||||
class="block-picker-item"
|
||||
>
|
||||
<.icon name={def.icon} class="size-5" />
|
||||
<span>{def.name}</span>
|
||||
</button>
|
||||
|
||||
<p :if={@filtered_blocks == []} class="block-picker-empty">
|
||||
No matching blocks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
end
|
||||
@@ -63,6 +63,9 @@
|
||||
@layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides;
|
||||
</style>
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
|
||||
<%= if assigns[:current_scope] && @current_scope.user do %>
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
|
||||
<% end %>
|
||||
<script defer phx-track-static src={~p"/assets/js/app.js"}>
|
||||
</script>
|
||||
<!-- Generated theme CSS with @font-face declarations -->
|
||||
|
||||
@@ -51,7 +51,7 @@ defmodule BerrypodWeb.ShopComponents.Layout do
|
||||
@layout_keys ~w(theme_settings logo_image header_image mode cart_items cart_count
|
||||
cart_subtotal cart_total cart_drawer_open cart_status active_page error_page is_admin
|
||||
search_query search_results search_open categories shipping_estimate
|
||||
country_code available_countries)a
|
||||
country_code available_countries editing editor_current_path editor_sidebar_open)a
|
||||
|
||||
@doc """
|
||||
Extracts the assigns relevant to `shop_layout` from a full assigns map.
|
||||
@@ -86,6 +86,9 @@ defmodule BerrypodWeb.ShopComponents.Layout do
|
||||
attr :active_page, :string, required: true
|
||||
attr :error_page, :boolean, default: false
|
||||
attr :is_admin, :boolean, default: false
|
||||
attr :editing, :boolean, default: false
|
||||
attr :editor_current_path, :string, default: nil
|
||||
attr :editor_sidebar_open, :boolean, default: true
|
||||
attr :search_query, :string, default: ""
|
||||
attr :search_results, :list, default: []
|
||||
attr :search_open, :boolean, default: false
|
||||
@@ -117,6 +120,9 @@ defmodule BerrypodWeb.ShopComponents.Layout do
|
||||
mode={@mode}
|
||||
cart_count={@cart_count}
|
||||
is_admin={@is_admin}
|
||||
editing={@editing}
|
||||
editor_current_path={@editor_current_path}
|
||||
editor_sidebar_open={@editor_sidebar_open}
|
||||
/>
|
||||
|
||||
{render_slot(@inner_block)}
|
||||
@@ -685,6 +691,9 @@ defmodule BerrypodWeb.ShopComponents.Layout do
|
||||
attr :mode, :atom, default: :live
|
||||
attr :cart_count, :integer, default: 0
|
||||
attr :is_admin, :boolean, default: false
|
||||
attr :editing, :boolean, default: false
|
||||
attr :editor_current_path, :string, default: nil
|
||||
attr :editor_sidebar_open, :boolean, default: true
|
||||
|
||||
def shop_header(assigns) do
|
||||
~H"""
|
||||
@@ -729,6 +738,23 @@ defmodule BerrypodWeb.ShopComponents.Layout do
|
||||
</nav>
|
||||
|
||||
<div class="shop-actions">
|
||||
<%!-- Pencil icon: enters edit mode, or re-opens sidebar if already editing --%>
|
||||
<.link
|
||||
:if={@is_admin && !@editing && @editor_current_path}
|
||||
patch={"#{@editor_current_path}?edit=true"}
|
||||
class="header-icon-btn"
|
||||
aria-label="Edit page"
|
||||
>
|
||||
<.edit_pencil_svg />
|
||||
</.link>
|
||||
<button
|
||||
:if={@is_admin && @editing && !@editor_sidebar_open}
|
||||
phx-click="editor_toggle_sidebar"
|
||||
class="header-icon-btn"
|
||||
aria-label="Show editor sidebar"
|
||||
>
|
||||
<.edit_pencil_svg />
|
||||
</button>
|
||||
<.link
|
||||
:if={@is_admin}
|
||||
href="/admin"
|
||||
@@ -933,6 +959,25 @@ defmodule BerrypodWeb.ShopComponents.Layout do
|
||||
"""
|
||||
end
|
||||
|
||||
defp edit_pencil_svg(assigns) do
|
||||
~H"""
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
|
||||
/>
|
||||
</svg>
|
||||
"""
|
||||
end
|
||||
|
||||
defp open_cart_drawer_js do
|
||||
Phoenix.LiveView.JS.push("open_cart_drawer")
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user