spree_page_builder 5.3.0.rc1

data/app/models/spree/pages/shop_all.rb

@@ -0,0 +1,40 @@
+module Spree
+  module Pages
+    class ShopAll < Spree::Page
+      def icon_name
+        'shopping-bag'
+      end
+
+      def page_builder_url
+        return unless page_builder_url_exists?(:products_path)
+
+        Spree::Core::Engine.routes.url_helpers.products_path
+      end
+
+      def preview_url(theme_preview = nil, page_preview = nil)
+        return unless page_builder_url_exists?(:products_path)
+
+        Spree::Core::Engine.routes.url_helpers.products_path(
+          theme_id: theme.id,
+          page_preview_id: page_preview&.id,
+          theme_preview_id: theme_preview&.id
+        )
+      end
+
+      def default_sections
+        [
+          Spree::PageSections::PageTitle.new(preferred_title: Spree.t(:shop_all)),
+          Spree::PageSections::ProductGrid.new
+        ]
+      end
+
+      def customizable?
+        true
+      end
+
+      def linkable?
+        true
+      end
+    end
+  end
+end

data/app/models/spree/pages/taxon.rb

@@ -0,0 +1,29 @@
+module Spree
+  module Pages
+    class Taxon < Spree::Page
+      def icon_name
+        'bookmark'
+      end
+
+      def page_builder_url
+        return unless page_builder_url_exists?(:nested_taxons_path)
+
+        taxon = Spree::Taxon.first
+        return if taxon.nil?
+
+        Spree::Core::Engine.routes.url_helpers.nested_taxons_path(taxon)
+      end
+
+      def default_sections
+        [
+          Spree::PageSections::TaxonBanner.new,
+          Spree::PageSections::ProductGrid.new,
+        ]
+      end
+
+      def customizable?
+        true
+      end
+    end
+  end
+end

data/app/models/spree/pages/taxon_list.rb

@@ -0,0 +1,41 @@
+module Spree
+  module Pages
+    class TaxonList < Spree::Page
+      DISPLAY_NAME = Spree.t(:taxonomy_brands_name).freeze
+
+
+      def page_builder_url
+        return unless page_builder_url_exists?(:taxonomy_path)
+
+        Spree::Core::Engine.routes.url_helpers.taxonomy_path(taxonomy.id)
+      end
+
+      def icon_name
+        'sort-a-z'
+      end
+
+      def default_sections
+        [
+          Spree::PageSections::TaxonGrid.new,
+        ]
+      end
+
+      def customizable?
+        false
+      end
+
+      def display_name
+        DISPLAY_NAME
+      end
+
+      # FIXME: this should use preferences
+      def taxonomy_id
+        store.taxonomies.first&.id
+      end
+
+      def taxonomy
+        @taxonomy ||= store.taxonomies.find(taxonomy_id)
+      end
+    end
+  end
+end

data/app/models/spree/pages/wishlist.rb

@@ -0,0 +1,15 @@
+module Spree
+  module Pages
+    class Wishlist < Spree::Page
+      def page_builder_url
+        return unless page_builder_url_exists?(:account_wishlist_path)
+
+        Spree::Core::Engine.routes.url_helpers.account_wishlist_path
+      end
+
+      def linkable?
+        true
+      end
+    end
+  end
+end

data/app/models/spree/theme.rb

@@ -0,0 +1,233 @@
+module Spree
+  class Theme < Spree.base_class
+    include Spree::SingleStoreResource
+    include Spree::Previewable
+
+    #
+    # Magic methods
+    #
+    acts_as_paranoid
+
+    #
+    # Validations
+    #
+    validates :name, :store, presence: true
+
+    #
+    # Associations
+    #
+    belongs_to :store, class_name: 'Spree::Store', touch: true
+    belongs_to :parent, class_name: 'Spree::Theme', optional: true, foreign_key: :parent_id
+    has_many :previews, class_name: 'Spree::Theme', foreign_key: :parent_id, dependent: :destroy_async
+    has_many :pages, -> { without_previews }, class_name: 'Spree::Page', dependent: :destroy, as: :pageable
+    has_many :page_previews, -> { only_previews }, class_name: 'Spree::Page', dependent: :destroy_async, as: :pageable
+    has_many :layout_sections, -> { order(position: :asc) }, class_name: 'Spree::PageSection', dependent: :destroy, as: :pageable
+    alias sections layout_sections
+
+    #
+    # Attachments
+    #
+    has_one_attached :screenshot, service: Spree.public_storage_service_name
+
+    #
+    #
+    # Callbacks
+    #
+    before_validation :set_name, on: :create
+    before_save :ensure_default_exists_and_is_unique
+    after_create :create_default_pages, :create_layout_sections, unless: :duplicating?
+    before_destroy :change_name_to_archived
+
+    #
+    # Virtual attributes
+    #
+    attribute :duplicating, :boolean, default: false
+
+    #
+    # Class methods
+    #
+    def self.to_param
+      Spree::Theme.to_s
+    end
+
+    # Returns an array of available themes, sorted by display name
+    #
+    # We need to load the theme classes to get the display name, so we also load the page classes at the same time
+    #
+    # @return [Array<Spree::Theme>]
+    def self.available_themes
+      @available_themes ||= Spree.page_builder.themes.sort_by(&:display_name)
+    end
+
+    def self.metadata
+      {
+        authors: [], # eg. ['Spree Commerce']
+        website: '', # eg. 'https://spreecommerce.org'
+        license: '', # eg. 'MIT', https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository#searching-github-by-license-type
+        description: '', # eg. 'A theme for Spree Commerce'
+        preview_image_url: '' # eg. 'https://example.com/screenshot.png'
+      }
+    end
+
+    def self.display_name
+      metadata[:name].presence || name.demodulize.titleize
+    end
+
+    def self.authors
+      metadata[:authors]
+    end
+
+    def self.license
+      metadata[:license]
+    end
+
+    def self.description
+      metadata[:description]
+    end
+
+    def self.preview_image_url
+      metadata[:preview_image_url]
+    end
+
+    def self.website
+      metadata[:website]
+    end
+
+    def duplicate
+      Themes::Duplicator.new(self).duplicate
+    end
+
+    def create_default_pages
+      Spree.page_builder.pages.map(&:to_s).map(&:constantize).each do |page_class|
+        next if page_class == Spree::Pages::Custom
+
+        page_class.where(pageable: self).first_or_create!
+      end
+    end
+
+    def create_layout_sections
+      ApplicationRecord.transaction do
+        available_layout_sections.map(&:to_s).map(&:constantize).each do |section_class|
+          section_class.where(pageable: self).first_or_create!
+        end
+      end
+    end
+
+    # Creates a new preview for the theme
+    #
+    # @return [Spree::Theme]
+    def create_preview
+      ActiveRecord::Base.connected_to(role: :writing) do
+        ApplicationRecord.transaction do
+          new_preview = dup
+          new_preview.parent = self
+          new_preview.duplicating = true
+          new_preview.default = false
+
+          # we need to deep clone layout sections and their assets
+          sections.includes(:links, { asset_attachment: :blob }, { blocks: [:rich_text_text, :links] }).each do |section|
+            section.deep_clone(new_preview)
+          end
+
+          new_preview.save!
+          new_preview
+        end
+      end
+    end
+
+    # Promotes the preview to the main theme
+    def promote
+      return unless preview?
+
+      ApplicationRecord.transaction do
+        old_theme = parent
+
+        # clear reference to the old theme and set default to the old theme's default
+        update!(parent: nil, default: old_theme.default)
+
+        # move pages to the new theme
+        old_theme.pages.update_all(pageable_id: id)
+
+        # destroy the old theme with their other previews, etc.
+        store.themes.find(old_theme.id).destroy
+
+        take_screenshot # update the screenshot
+      end
+    end
+
+    # Returns an array of available layout section classes for the theme, eg. header, footer, newsletter, etc.
+    #
+    # @return [Array<Class>]
+    def available_layout_sections
+      [
+        *Spree.page_builder.theme_layout_sections,
+        *custom_layout_sections
+      ]
+    end
+
+    # Returns an array of custom layout section classes for the theme
+    #
+    # @return [Array<Class>]
+    def custom_layout_sections
+      # you can override this method in your theme to return a list of custom layout sections for your theme
+      # [Spree::PageSections::Custom, Spree::PageSections::Custom2]
+      []
+    end
+
+    # Returns an array of available page section classes for the theme
+    #
+    # @return [Array<Class>]
+    def available_page_sections
+      return @available_page_sections if @available_page_sections
+
+      @available_page_sections ||= [
+        *Spree.page_builder.page_sections.find_all do |section_class|
+          section_class.role == 'content'
+        end,
+        *custom_page_sections
+      ].sort_by(&:name)
+    end
+
+    # Returns an array of custom page section classes for the theme
+    #
+    # @return [Array<Class>]
+    def custom_page_sections
+      # you can override this method in your theme to return a list of custom page sections for your theme
+      # [Spree::PageSections::Custom, Spree::PageSections::Custom2]
+      []
+    end
+
+    def restore_defaults!
+      self.preferences = {}
+      save!
+    end
+
+    def take_screenshot
+      return if Spree.screenshot_api_token.blank?
+      return if preview? # we don't want to take screenshots of previews, they aren't surfaced in the UI
+      return if screenshot.attached?
+
+      Spree::Themes::ScreenshotJob.perform_later(id)
+    end
+
+    protected
+
+    def set_name
+      self.name = type.demodulize.titleize if name.blank?
+    end
+
+    private
+
+    def ensure_default_exists_and_is_unique
+      if default
+        store.themes.where.not(id: id).update_all(default: false, updated_at: Time.current)
+      elsif store.themes.where(default: true).count.zero?
+        self.default = true
+      end
+    end
+
+    def change_name_to_archived
+      update_columns(name: "#{name} (Archived)")
+    end
+  end
+end

data/app/models/spree/themes/default.rb

@@ -0,0 +1,97 @@
+module Spree
+  module Themes
+    class Default < Spree::Theme
+      def self.metadata
+        {
+          authors: ['Spree Commerce'],
+          license: 'MIT',
+          preview_image_url: 'https://s3.eu-central-2.wasabisys.com/w.storage.screenshotapi.net/demo_spreecommerce_org_299a49137b25.png'
+        }
+      end
+
+      # COLORS
+      # main colors
+      preference :primary_color, :string, default: '#000000'
+      preference :accent_color, :string, default: '#F0EFE9'
+      preference :danger_color, :string, default: '#C73528'
+      preference :neutral_color, :string, default: '#999999'
+      preference :background_color, :string, default: '#FFFFFF'
+      preference :text_color, :string, default: '#000000'
+      preference :success_color, :string, default: '#00C773'
+
+      # buttons
+      preference :button_background_color, :string
+      preference :button_text_color, :string, default: '#ffffff'
+      preference :button_hover_background_color, :string
+      preference :button_hover_text_color, :string
+      preference :button_border_color, :string
+
+      # borders
+      preference :border_color, :string, default: '#E9E7DC'
+      preference :sidebar_border_color, :string
+
+      preference :secondary_button_background_color, :string
+      preference :secondary_button_text_color, :string
+      preference :secondary_button_hover_background_color, :string
+      preference :secondary_button_hover_text_color, :string
+
+      # inputs
+      preference :input_text_color, :string, default: '#6b7280'
+      preference :input_background_color, :string, default: '#ffffff'
+      preference :input_border_color, :string
+      preference :input_focus_border_color, :string
+      preference :input_focus_background_color, :string
+      preference :input_focus_text_color, :string
+
+      # sidebar (checkout)
+      preference :checkout_sidebar_background_color, :string, default: '#f3f4f6'
+      preference :checkout_divider_background_color, :string
+      preference :checkout_sidebar_text_color, :string
+
+      # TYPOGRAPHY
+      preference :custom_font_code, :string, default: nil
+      # body
+      preference :font_family, :string, default: 'Inter'
+      preference :font_size_scale, :integer, default: 100
+      # headers
+      preference :header_font_family, :string, default: 'Inter'
+      preference :header_font_size_scale, :integer, default: 100
+      preference :headings_uppercase, :boolean, default: true
+
+      # BUTTONS
+      preference :button_border_thickness, :integer, default: 1
+      preference :button_border_opacity, :integer, default: 100
+      preference :button_border_radius, :integer, default: 100
+      preference :button_shadow_opacity, :integer, default: 0
+      preference :button_shadow_horizontal_offset, :integer, default: 0
+      preference :button_shadow_vertical_offset, :integer, default: 4
+      preference :button_shadow_blur, :integer, default: 5
+
+      # INPUTS
+      preference :input_border_thickness, :integer, default: 1
+      preference :input_border_opacity, :integer, default: 100
+      preference :input_border_radius, :integer, default: 8
+      preference :input_shadow_opacity, :integer, default: 0
+      preference :input_shadow_horizontal_offset, :integer, default: 0
+      preference :input_shadow_vertical_offset, :integer, default: 4
+      preference :input_shadow_blur, :integer, default: 5
+
+      # BORDERS
+      preference :border_width, :integer, default: 1
+      preference :border_radius, :integer, default: 6
+      preference :border_shadow_opacity, :integer, default: 0
+      preference :border_shadow_horizontal_offset, :integer, default: 0
+      preference :border_shadow_vertical_offset, :integer, default: 4
+      preference :border_shadow_blur, :integer, default: 5
+
+      # PRODUCT IMAGES
+      # These defaults match preprocessed variant sizes for optimal performance:
+      # Desktop (360x360) → large variant (720x720 at 2x)
+      # Mobile (200x200) → medium variant (400x400 at 2x)
+      preference :product_listing_image_height, :integer, default: 360
+      preference :product_listing_image_width, :integer, default: 360
+      preference :product_listing_image_height_mobile, :integer, default: 200
+      preference :product_listing_image_width_mobile, :integer, default: 200
+    end
+  end
+end

data/app/services/spree/taxons/touch_featured_sections.rb

@@ -0,0 +1,21 @@
+module Spree
+  module Taxons
+    class TouchFeaturedSections
+      prepend Spree::ServiceModule::Base
+
+      def call(taxon_ids:)
+        return if taxon_ids.empty?
+
+        featured_taxons = Spree::PageSections::FeaturedTaxon.published.by_taxon_id(taxon_ids)
+
+        return if featured_taxons.empty?
+
+        featured_taxons.touch_all
+        pages = Spree::Page.where(id: featured_taxons.where(pageable_type: 'Spree::Page').pluck(:pageable_id))
+        pages.touch_all
+        themes = Spree::Theme.where(id: pages.where(pageable_type: 'Spree::Theme').pluck(:pageable_id).uniq)
+        themes.touch_all
+      end
+    end
+  end
+end

data/app/views/layouts/spree/page_builder.html.erb

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <%= render 'spree/admin/shared/head' %>
+    <%= render "spree/admin/shared/custom_head" %>
+  </head>
+
+  <body class="admin page-builder"
+        id="page-builder"
+        data-controller="page-builder tabs dialog"
+        data-page-builder-preview-url-value="<%= page_preview_url %>"
+  >
+
+    <%= form_for @theme, as: :theme,url: spree.update_with_page_admin_theme_path(@theme), method: :put do |f| %>
+      <%= hidden_field_tag :page_id, @page.id %>
+      <%= hidden_field_tag :theme_preview_id, @theme_preview.id %>
+      <%= hidden_field_tag :page_preview_id, @page_preview.id %>
+      <%= render 'spree/admin/page_builder/header' %>
+    <% end %>
+
+    <main id="content">
+      <%= render 'spree/admin/page_builder/sidebar' %>
+      <main id="main-part">
+        <div class="desktopLiveView" data-page-builder-target="previewContainer">
+          <div class="embed-responsive embed-responsive-4by3">
+            <iframe class="embed-responsive-item overflow-y-auto"
+                    data-page-builder-target="iframe"
+                    data-action="load->page-builder#initializeVisualEditor"
+                    id="page-builder-preview"
+                    sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-modals">
+            </iframe>
+            <button class="editor-add-section btn btn-mint shadow" data-action="click->page-builder#addSection">
+              <%= icon("add", height: 22, class: "mr-2") %> Add Section
+            </button>
+          </div>
+        </div>
+
+        <%= turbo_frame_tag :iframe_preview_scripts %>
+      </main>
+    </main>
+
+    <%= render 'spree/admin/shared/dialog' %>
+    <%= render 'spree/admin/shared/alerts' %>
+    <%= render "spree/admin/shared/turbo_confirm_dialog" %>
+  </body>
+</html>

data/app/views/spree/admin/dashboard/_store_preview.html.erb

@@ -0,0 +1,38 @@
+<% if current_store.default_theme %>
+  <div class="card mb-6">
+    <%= link_to spree.edit_admin_theme_path(current_store.default_theme), class: 'block border rounded-lg m-2 overflow-auto bg-gray-25 relative store-preview-link hover:shadow-xs transition-shadow duration-200', data: { turbo_prefetch: false } do %>      <div class="absolute w-full h-full items-center justify-center hover:opacity-100 opacity-0 transition-opacity duration-200 store-preview-actions">
+        <button class="btn btn-primary">
+          <%= icon('tools') %>
+          <%= Spree.t('admin.edit_theme') %>
+        </button>
+      </div>
+
+      <%= render 'spree/admin/themes/theme_preview_image', theme: current_store.default_theme, height: 172, width: 330 %>
+    <% end %>
+
+    <div class="card-body px-2 pt-0 pb-2 flex flex-col gap-2">
+      <div class="input-group pr-2">
+        <%= text_field_tag :domain, current_store.url_or_custom_domain, readonly: true, class: 'focus:outline-none focus:ring-0 text-base w-full' %>
+        <%= clipboard_component(current_store.url_or_custom_domain) %>
+      </div>
+
+      <div class="flex gap-2">
+        <%= link_to current_store.formatted_url_or_custom_domain, class: 'btn btn-light w-1/2', target: '_blank' do %>
+          <%= icon 'eye', class: 'mr-1' %>
+          &nbsp;
+          <%= Spree.t(:view_store) %>
+        <% end %>
+        <%= link_to spree.edit_admin_theme_path(current_store.default_theme), class: 'btn btn-light w-1/2', data: { turbo_prefetch: false } do %>
+          <%= icon 'tools', class: 'mr-1' %>
+          &nbsp;
+          <%= Spree.t('admin.edit_theme') %>
+        <% end %>
+      </div>
+    </div>
+    <% unless current_store.default_custom_domain&.active? %>
+      <div class="card-footer border-t p-2">
+        <%= link_to_with_icon 'world-www', 'Connect your own domain', spree.admin_custom_domains_path, class: 'btn btn-secondary w-full py-2' %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/_form_tab_buttons.html.erb

@@ -0,0 +1,5 @@
+<% if @page_block.can_be_deleted? %>
+  <div class="sidebar-footer">
+    <%= link_to_delete(@page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block)) %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/create.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.append "blocks_#{@page_block.section_id}" do %>
+  <%= render 'spree/admin/page_builder/sidebar_block', block: @page_block %>
+<% end %>
+<%= refresh_theme_preview %>

data/app/views/spree/admin/page_blocks/destroy.turbo_stream.erb

@@ -0,0 +1,9 @@
+<%= turbo_stream.replace :page_sidebar do %>
+  <%= render 'spree/admin/page_builder/sidebar_sections' %>
+<% end %>
+
+<%= turbo_stream.replace 'page_sidebar_toolbar' do %>
+  <%= render 'spree/admin/page_builder/sidebar_sections_toolbar' %>
+<% end %>
+
+<%= refresh_theme_preview(@page_block.section) %>

data/app/views/spree/admin/page_blocks/edit.html.erb

@@ -0,0 +1,43 @@
+<%= turbo_frame_tag :page_sidebar do %>
+  <% tab_selected ||= :content %>
+  <h6 class="sidebar-header">
+    <%= link_to spree.edit_admin_theme_path(@theme, page_id: @page&.id),  data: { action: 'click->page-builder#clearActiveOverlays' }, class: 'btn hover:bg-gray-100 shadow-none px-3' do %>
+      <%= icon 'chevron-left', class: 'mr-0' %>
+    <% end %>
+    <%= @page_block.display_name %>
+  </h6>
+  <div class="p-3 edit-block">
+    <%= form_for @page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block), data: { controller: 'auto-submit' }, as: :page_block do |f| %>
+      <div data-controller="tabs">
+        <ul class="nav nav-pills nav-fill mb-6" id="pills-tab" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link w-full <%= tab_selected == :content ? 'active' : '' %>" id="pills-home-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-home" aria-selected="<%= tab_selected == :content %>">Content</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link w-full <%= tab_selected == :design ? 'active' : '' %>" id="pills-profile-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-profile" aria-selected="<%= tab_selected == :design %>">Design</button>
+          </li>
+        </ul>
+        <div data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate-fade-in" <%= 'hidden' unless tab_selected == :content %>>
+          <%= render "spree/admin/page_blocks/forms/#{@page_block.form_partial_name}", f: f  %>
+          <%= render 'spree/admin/page_blocks/form_tab_buttons', tab: :content %>
+        </div>
+        <div data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" class="animate-fade-in" <%= 'hidden' unless tab_selected == :design %>>
+          <%= render 'spree/admin/page_sections/fields/top_padding', f: f %>
+          <%= render 'spree/admin/page_sections/fields/bottom_padding', f: f %>
+          <% if @page_block.respond_to?(:preferred_text_color) %>
+            <%= render 'spree/admin/page_sections/fields/text_color', f: f %>
+          <% end %>
+          <% if @page_block.respond_to?(:preferred_background_color) %>
+            <%= render 'spree/admin/page_sections/fields/background_color', f: f %>
+          <% end %>
+          <%= render 'spree/admin/page_sections/fields/button', f: f %>
+          <%= yield(:design_tab) %>
+
+          <div class="sidebar-footer">
+            <%= link_to_delete(@page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block)) %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_brand.html.erb

@@ -0,0 +1,15 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment, Spree.t(:text_alignment) %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment, Spree.t(:container_alignment) %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_brand_logo.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label :brand %>
+  <%= tom_select_tag 'page_block[brand_id]', active_option: @page_block.brand_id, class: 'w-full', url: spree.admin_brands_select_options_path(format: :json), select_data: {action: 'auto-submit#submit'} %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_buttons.html.erb

@@ -0,0 +1,13 @@
+<%= render 'spree/admin/page_blocks/forms/link', f: f %>
+
+<div class="form-group">
+  <%= f.label :preferred_button_style_1, Spree.t('admin.page_builder.button_style') %>
+  <%= f.select :preferred_button_style_1, options_for_select(['primary', 'secondary'], @page_block.preferred_button_style_1), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment, Spree.t('admin.page_builder.button_alignment') %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+<% end %>