diff --git a/packages/visual-editor/locales/platform/cs/visual-editor.json b/packages/visual-editor/locales/platform/cs/visual-editor.json index 1c529c786..637e9e658 100644 --- a/packages/visual-editor/locales/platform/cs/visual-editor.json +++ b/packages/visual-editor/locales/platform/cs/visual-editor.json @@ -205,6 +205,7 @@ "buttons": "Tlačítka", "callToAction": "Volání k akci", "cards": "Karty", + "carouselImageCount": "Počet obrázků kolotoče", "category": "Kategorie", "collapseDays": "Dny kolapsu", "color": "Barva", @@ -325,6 +326,7 @@ "base_text size": "Báze", "bottom": "Dno", "bottom_direction": "Dole", + "carousel": "Kolotoč", "center": "Centrum", "center_direction": "Centrum", "classic": "Klasický", @@ -378,6 +380,7 @@ "fixed": "Opravené", "friday": "pátek", "fullWidth": "Plná šířka", + "gallery": "Galerie", "hide": "Skrýt", "hour12": "12 hodin", "hour24": "24 hodin", diff --git a/packages/visual-editor/locales/platform/da/visual-editor.json b/packages/visual-editor/locales/platform/da/visual-editor.json index 18c41aaca..1bc6c23a2 100644 --- a/packages/visual-editor/locales/platform/da/visual-editor.json +++ b/packages/visual-editor/locales/platform/da/visual-editor.json @@ -206,6 +206,7 @@ "buttons": "Knapper", "callToAction": "Opfordre til handling", "cards": "Kort", + "carouselImageCount": "Antal karruselbilleder", "category": "Kategori", "collapseDays": "Kollaps dage", "color": "Farve", @@ -325,6 +326,7 @@ "base_text size": "Base", "bottom": "Bund", "bottom_direction": "Nederst", + "carousel": "Karrusel", "center": "Centrum", "center_direction": "Center", "classic": "Klassisk", @@ -378,6 +380,7 @@ "fixed": "Fast", "friday": "fredag", "fullWidth": "Fuld bredde", + "gallery": "Galleri", "hide": "Skjule", "hour12": "12-timers", "hour24": "24-timer", diff --git a/packages/visual-editor/locales/platform/de/visual-editor.json b/packages/visual-editor/locales/platform/de/visual-editor.json index 92c8eb435..ef3210444 100644 --- a/packages/visual-editor/locales/platform/de/visual-editor.json +++ b/packages/visual-editor/locales/platform/de/visual-editor.json @@ -204,6 +204,7 @@ "buttons": "Knöpfe", "callToAction": "Aufruf zum Handeln", "cards": "Karten", + "carouselImageCount": "Anzahl der Karussellbilder", "category": "Kategorie", "collapseDays": "Zusammenbruch Tage", "color": "Farbe", @@ -323,6 +324,7 @@ "base_text size": "Basis", "bottom": "Unten", "bottom_direction": "Unten", + "carousel": "Karussell", "center": "Center", "center_direction": "Zentrum", "classic": "Klassiker", @@ -376,6 +378,7 @@ "fixed": "Behoben", "friday": "Freitag", "fullWidth": "Volle Breite", + "gallery": "Galerie", "hide": "Verstecken", "hour12": "12 Stunden", "hour24": "24 Stunden", diff --git a/packages/visual-editor/locales/platform/en-GB/visual-editor.json b/packages/visual-editor/locales/platform/en-GB/visual-editor.json index 25dbddeb3..0587a5862 100644 --- a/packages/visual-editor/locales/platform/en-GB/visual-editor.json +++ b/packages/visual-editor/locales/platform/en-GB/visual-editor.json @@ -199,6 +199,7 @@ "buttons": "Buttons", "callToAction": "Call To Action", "cards": "Cards", + "carouselImageCount": "Carousel Image Count", "category": "Category", "collapseDays": "Collapse Days", "color": "Color", @@ -317,6 +318,7 @@ "base_text size": "Base", "bottom": "Bottom", "bottom_direction": "Bottom", + "carousel": "Carousel", "center": "Center", "center_direction": "Center", "classic": "Classic", @@ -370,6 +372,7 @@ "fixed": "Fixed", "friday": "Friday", "fullWidth": "Full Width", + "gallery": "Gallery", "hide": "Hide", "hour12": "12-hour", "hour24": "24-hour", diff --git a/packages/visual-editor/locales/platform/en/visual-editor.json b/packages/visual-editor/locales/platform/en/visual-editor.json index c3d1c96a2..bce728256 100644 --- a/packages/visual-editor/locales/platform/en/visual-editor.json +++ b/packages/visual-editor/locales/platform/en/visual-editor.json @@ -199,6 +199,7 @@ "buttons": "Buttons", "callToAction": "Call To Action", "cards": "Cards", + "carouselImageCount": "Carousel Image Count", "category": "Category", "collapseDays": "Collapse Days", "color": "Color", @@ -317,6 +318,7 @@ "base_text size": "Base", "bottom": "Bottom", "bottom_direction": "Bottom", + "carousel": "Carousel", "center": "Center", "center_direction": "Center", "classic": "Classic", @@ -370,6 +372,7 @@ "fixed": "Fixed", "friday": "Friday", "fullWidth": "Full Width", + "gallery": "Gallery", "hide": "Hide", "hour12": "12-hour", "hour24": "24-hour", diff --git a/packages/visual-editor/locales/platform/es/visual-editor.json b/packages/visual-editor/locales/platform/es/visual-editor.json index 5259998df..3f758ec88 100644 --- a/packages/visual-editor/locales/platform/es/visual-editor.json +++ b/packages/visual-editor/locales/platform/es/visual-editor.json @@ -199,6 +199,7 @@ "buttons": "Botones", "callToAction": "Llamado a la acción", "cards": "Tarjetas", + "carouselImageCount": "Recuento de imágenes del carrusel", "category": "Categoría", "collapseDays": "Días de colapso", "color": "Color", @@ -317,6 +318,7 @@ "base_text size": "Base", "bottom": "Abajo", "bottom_direction": "Abajo", + "carousel": "Carrusel", "center": "Centro", "center_direction": "Centro", "classic": "Clásico", @@ -370,6 +372,7 @@ "fixed": "Fijado", "friday": "Viernes", "fullWidth": "Ancho completo", + "gallery": "Galería", "hide": "Esconder", "hour12": "De 12 horas", "hour24": "Las 24 horas", diff --git a/packages/visual-editor/locales/platform/et/visual-editor.json b/packages/visual-editor/locales/platform/et/visual-editor.json index 6408a741c..ace8238af 100644 --- a/packages/visual-editor/locales/platform/et/visual-editor.json +++ b/packages/visual-editor/locales/platform/et/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Nupud", "callToAction": "Kutsuge tegutseda", "cards": "Kaardid", + "carouselImageCount": "Karusselli piltide arv", "category": "Kategooria", "collapseDays": "Varisevad päevad", "color": "Värv", @@ -318,6 +319,7 @@ "base_text size": "Alus", "bottom": "Alumine", "bottom_direction": "Alumine", + "carousel": "Karussell", "center": "Keskpunkt", "center_direction": "Keskus", "classic": "Klassikaline", @@ -371,6 +373,7 @@ "fixed": "Fikseeritud", "friday": "Reede", "fullWidth": "Täielik laius", + "gallery": "Galerii", "hide": "Varjama", "hour12": "12-tunnine", "hour24": "24-tunnine", diff --git a/packages/visual-editor/locales/platform/fi/visual-editor.json b/packages/visual-editor/locales/platform/fi/visual-editor.json index d2e30013d..2e3125bf8 100644 --- a/packages/visual-editor/locales/platform/fi/visual-editor.json +++ b/packages/visual-editor/locales/platform/fi/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Painikkeet", "callToAction": "Toimintakehotus", "cards": "Kortit", + "carouselImageCount": "Karuselli kuvien määrä", "category": "Luokka", "collapseDays": "Romahduspäivät", "color": "Väri", @@ -318,6 +319,7 @@ "base_text size": "Pohja", "bottom": "Pohja", "bottom_direction": "Pohja", + "carousel": "Karuselli", "center": "Keskusta", "center_direction": "Keskusta", "classic": "Klassinen", @@ -371,6 +373,7 @@ "fixed": "Kiinteä", "friday": "perjantai", "fullWidth": "Täysleveys", + "gallery": "Galleria", "hide": "Piilottaa", "hour12": "12 tunnin", "hour24": "24 tunnin", diff --git a/packages/visual-editor/locales/platform/fr/visual-editor.json b/packages/visual-editor/locales/platform/fr/visual-editor.json index 2cf038100..6f3eb9c61 100644 --- a/packages/visual-editor/locales/platform/fr/visual-editor.json +++ b/packages/visual-editor/locales/platform/fr/visual-editor.json @@ -199,6 +199,7 @@ "buttons": "Boutons", "callToAction": "Appel à l'action", "cards": "Cartes", + "carouselImageCount": "Nombre d'images du carrousel", "category": "Catégorie", "collapseDays": "Jours d'effondrement", "color": "Couleur", @@ -317,6 +318,7 @@ "base_text size": "Base", "bottom": "Bas", "bottom_direction": "Bas", + "carousel": "Carrousel", "center": "Centre", "center_direction": "Centre", "classic": "Classique", @@ -370,6 +372,7 @@ "fixed": "Fixé", "friday": "Vendredi", "fullWidth": "Pleine largeur", + "gallery": "Galerie", "hide": "Cacher", "hour12": "12 heures", "hour24": "24 heures", diff --git a/packages/visual-editor/locales/platform/hr/visual-editor.json b/packages/visual-editor/locales/platform/hr/visual-editor.json index cfaa92a78..ffc45d438 100644 --- a/packages/visual-editor/locales/platform/hr/visual-editor.json +++ b/packages/visual-editor/locales/platform/hr/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Gumbi", "callToAction": "Poziv na akciju", "cards": "Karata", + "carouselImageCount": "Broj slika vrtuljka", "category": "Kategorija", "collapseDays": "Dani kolapsa", "color": "Boja", @@ -318,6 +319,7 @@ "base_text size": "Baza", "bottom": "Dno", "bottom_direction": "Dno", + "carousel": "Karusel", "center": "Centar", "center_direction": "Centar", "classic": "Klasičan", @@ -371,6 +373,7 @@ "fixed": "Fiksni", "friday": "petak", "fullWidth": "Puna širina", + "gallery": "Galerija", "hide": "Sakriti", "hour12": "12 sati", "hour24": "24-satni", diff --git a/packages/visual-editor/locales/platform/hu/visual-editor.json b/packages/visual-editor/locales/platform/hu/visual-editor.json index de7e5b4f5..eba3dc862 100644 --- a/packages/visual-editor/locales/platform/hu/visual-editor.json +++ b/packages/visual-editor/locales/platform/hu/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Gombok", "callToAction": "Cselekvésre ösztönzés", "cards": "Kártyás kártyák", + "carouselImageCount": "Forgóképek száma", "category": "Kategória", "collapseDays": "Összeomlás napjai", "color": "Szín", @@ -318,6 +319,7 @@ "base_text size": "Alap", "bottom": "Alsó", "bottom_direction": "Alul", + "carousel": "Körhinta", "center": "Központ", "center_direction": "Központ", "classic": "Klasszikus", @@ -371,6 +373,7 @@ "fixed": "Rögzített", "friday": "péntek", "fullWidth": "Teljes szélesség", + "gallery": "Galéria", "hide": "Elrejt", "hour12": "12 órás", "hour24": "24 órás", diff --git a/packages/visual-editor/locales/platform/it/visual-editor.json b/packages/visual-editor/locales/platform/it/visual-editor.json index 7b709cc09..a9bb84a5f 100644 --- a/packages/visual-editor/locales/platform/it/visual-editor.json +++ b/packages/visual-editor/locales/platform/it/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Pulsanti", "callToAction": "Invito all'azione", "cards": "Carte", + "carouselImageCount": "Conteggio immagini carosello", "category": "Categoria", "collapseDays": "Giorni di collasso", "color": "Colore", @@ -318,6 +319,7 @@ "base_text size": "Base", "bottom": "Metter il fondo a", "bottom_direction": "In basso", + "carousel": "Giostra", "center": "Centro", "center_direction": "Center", "classic": "Classico", @@ -371,6 +373,7 @@ "fixed": "Fisso", "friday": "Venerdì", "fullWidth": "Larghezza completa", + "gallery": "Galleria", "hide": "Nascondere", "hour12": "12 ore", "hour24": "24 ore", diff --git a/packages/visual-editor/locales/platform/ja/visual-editor.json b/packages/visual-editor/locales/platform/ja/visual-editor.json index b273c6be0..9bc95adf7 100644 --- a/packages/visual-editor/locales/platform/ja/visual-editor.json +++ b/packages/visual-editor/locales/platform/ja/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "ボタン", "callToAction": "行動を促す", "cards": "カード", + "carouselImageCount": "カルーセル画像数", "category": "カテゴリ", "collapseDays": "崩壊日", "color": "色", @@ -318,6 +319,7 @@ "base_text size": "ベース", "bottom": "底", "bottom_direction": "下", + "carousel": "カルーセル", "center": "中心", "center_direction": "センター", "classic": "クラシック", @@ -371,6 +373,7 @@ "fixed": "修理済み", "friday": "金曜日", "fullWidth": "全幅", + "gallery": "ギャラリー", "hide": "隠れる", "hour12": "12時間", "hour24": "24時間", diff --git a/packages/visual-editor/locales/platform/lt/visual-editor.json b/packages/visual-editor/locales/platform/lt/visual-editor.json index a9395c8d7..e1674522e 100644 --- a/packages/visual-editor/locales/platform/lt/visual-editor.json +++ b/packages/visual-editor/locales/platform/lt/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Mygtukai", "callToAction": "Raginimas veikti", "cards": "Kortelės", + "carouselImageCount": "Karuselės vaizdų skaičius", "category": "Kategorija", "collapseDays": "Griūties dienos", "color": "Spalva", @@ -318,6 +319,7 @@ "base_text size": "Bazė", "bottom": "Apačia", "bottom_direction": "Apačia", + "carousel": "Karuselė", "center": "Centras", "center_direction": "Centras", "classic": "Klasikinis", @@ -371,6 +373,7 @@ "fixed": "Fiksuota", "friday": "Penktadienis", "fullWidth": "Visas plotis", + "gallery": "Galerija", "hide": "Slėptis", "hour12": "12 valandų", "hour24": "24 valandas", diff --git a/packages/visual-editor/locales/platform/lv/visual-editor.json b/packages/visual-editor/locales/platform/lv/visual-editor.json index ff60fec86..7a167053c 100644 --- a/packages/visual-editor/locales/platform/lv/visual-editor.json +++ b/packages/visual-editor/locales/platform/lv/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Pogas", "callToAction": "Aicināt uz rīcību", "cards": "Kārtis", + "carouselImageCount": "Karuseļa attēlu skaits", "category": "Kategorija", "collapseDays": "Sabrukšanas dienas", "color": "Krāsa", @@ -318,6 +319,7 @@ "base_text size": "Bāze", "bottom": "Dibens", "bottom_direction": "Apakšējā", + "carousel": "Karuselis", "center": "Centrs", "center_direction": "Centrs", "classic": "Klasisks", @@ -371,6 +373,7 @@ "fixed": "Fiksēts", "friday": "Piektdiena", "fullWidth": "Pilns platums", + "gallery": "Galerija", "hide": "Slēpties", "hour12": "12 stundu", "hour24": "Diennakts", diff --git a/packages/visual-editor/locales/platform/nb/visual-editor.json b/packages/visual-editor/locales/platform/nb/visual-editor.json index 2886bc2c8..4ec3b1d56 100644 --- a/packages/visual-editor/locales/platform/nb/visual-editor.json +++ b/packages/visual-editor/locales/platform/nb/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Knapper", "callToAction": "Ring til handling", "cards": "Kort", + "carouselImageCount": "Antall karusellbilder", "category": "Kategori", "collapseDays": "Kollaps dager", "color": "Farge", @@ -318,6 +319,7 @@ "base_text size": "Base", "bottom": "Bunn", "bottom_direction": "Nederst", + "carousel": "Karusell", "center": "Senter", "center_direction": "Sentrum", "classic": "Klassisk", @@ -371,6 +373,7 @@ "fixed": "Fast", "friday": "fredag", "fullWidth": "Full bredde", + "gallery": "Galleri", "hide": "Gjemme", "hour12": "12-timers", "hour24": "24-timers", diff --git a/packages/visual-editor/locales/platform/nl/visual-editor.json b/packages/visual-editor/locales/platform/nl/visual-editor.json index 37154fdc4..0f63a1606 100644 --- a/packages/visual-editor/locales/platform/nl/visual-editor.json +++ b/packages/visual-editor/locales/platform/nl/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Knoppen", "callToAction": "Oproep tot actie", "cards": "Kaarten", + "carouselImageCount": "Aantal carrouselafbeeldingen", "category": "Categorie", "collapseDays": "Instortdagen", "color": "Kleur", @@ -318,6 +319,7 @@ "base_text size": "Base", "bottom": "Onderkant", "bottom_direction": "Onder", + "carousel": "Carrousel", "center": "Centrum", "center_direction": "Centrum", "classic": "Klassiek", @@ -371,6 +373,7 @@ "fixed": "Vast", "friday": "Vrijdag", "fullWidth": "Volledige breedte", + "gallery": "Galerij", "hide": "Verbergen", "hour12": "12 uur", "hour24": "24 uur", diff --git a/packages/visual-editor/locales/platform/pl/visual-editor.json b/packages/visual-editor/locales/platform/pl/visual-editor.json index 4807a872c..bd5ef1a37 100644 --- a/packages/visual-editor/locales/platform/pl/visual-editor.json +++ b/packages/visual-editor/locales/platform/pl/visual-editor.json @@ -201,6 +201,7 @@ "buttons": "Pikolak", "callToAction": "Zadzwoń do działania", "cards": "Karty", + "carouselImageCount": "Liczba obrazów w karuzeli", "category": "Kategoria", "collapseDays": "Dni upadku", "color": "Kolor", @@ -319,6 +320,7 @@ "base_text size": "Baza", "bottom": "Spód", "bottom_direction": "Dół", + "carousel": "Karuzela", "center": "Centrum", "center_direction": "Środkowy", "classic": "Klasyczny", @@ -372,6 +374,7 @@ "fixed": "Naprawił", "friday": "Piątek", "fullWidth": "Pełna szerokość", + "gallery": "Galeria", "hide": "Ukrywać", "hour12": "12-godzinny", "hour24": "24 godziny", diff --git a/packages/visual-editor/locales/platform/pt/visual-editor.json b/packages/visual-editor/locales/platform/pt/visual-editor.json index fc8f18f2d..cbb601cf5 100644 --- a/packages/visual-editor/locales/platform/pt/visual-editor.json +++ b/packages/visual-editor/locales/platform/pt/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Botões", "callToAction": "Chamado à ação", "cards": "Cartões", + "carouselImageCount": "Contagem de imagens do carrossel", "category": "Categoria", "collapseDays": "Dias de colapso", "color": "Cor", @@ -318,6 +319,7 @@ "base_text size": "Base", "bottom": "Fundo", "bottom_direction": "Parte inferior", + "carousel": "Carrossel", "center": "Centro", "center_direction": "Centro", "classic": "Clássico", @@ -371,6 +373,7 @@ "fixed": "Fixo", "friday": "Sexta-feira", "fullWidth": "Largura total", + "gallery": "Galeria", "hide": "Esconder", "hour12": "12 horas", "hour24": "24 horas", diff --git a/packages/visual-editor/locales/platform/ro/visual-editor.json b/packages/visual-editor/locales/platform/ro/visual-editor.json index feab5380d..600decbf3 100644 --- a/packages/visual-editor/locales/platform/ro/visual-editor.json +++ b/packages/visual-editor/locales/platform/ro/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Butoane", "callToAction": "Apel la acțiune", "cards": "Cărți", + "carouselImageCount": "Număr de imagini carusel", "category": "Categorie", "collapseDays": "Zile de prăbușire", "color": "Culoare", @@ -318,6 +319,7 @@ "base_text size": "Bază", "bottom": "Fund", "bottom_direction": "Fund", + "carousel": "Carusel", "center": "Centru", "center_direction": "Centru", "classic": "Clasic", @@ -371,6 +373,7 @@ "fixed": "Fix", "friday": "vineri", "fullWidth": "Lățime completă", + "gallery": "Galerie", "hide": "Ascunde", "hour12": "12 ore", "hour24": "24 de ore", diff --git a/packages/visual-editor/locales/platform/sk/visual-editor.json b/packages/visual-editor/locales/platform/sk/visual-editor.json index 80a5898f2..f44514123 100644 --- a/packages/visual-editor/locales/platform/sk/visual-editor.json +++ b/packages/visual-editor/locales/platform/sk/visual-editor.json @@ -201,6 +201,7 @@ "buttons": "Gombíky", "callToAction": "Zavolať", "cards": "Karty", + "carouselImageCount": "Počet obrázkov na kolotoči", "category": "Kategória", "collapseDays": "Dni kolapsu", "color": "Farba", @@ -319,6 +320,7 @@ "base_text size": "Základňa", "bottom": "Spodná časť", "bottom_direction": "Dole", + "carousel": "Kolotoč", "center": "Stred", "center_direction": "Centrum", "classic": "Klasický", @@ -372,6 +374,7 @@ "fixed": "Stanovený", "friday": "Piatok", "fullWidth": "Plná šírka", + "gallery": "Galéria", "hide": "Skryť", "hour12": "12-hodinový", "hour24": "24-hodinový", diff --git a/packages/visual-editor/locales/platform/sv/visual-editor.json b/packages/visual-editor/locales/platform/sv/visual-editor.json index f3131aaf4..5a9401473 100644 --- a/packages/visual-editor/locales/platform/sv/visual-editor.json +++ b/packages/visual-editor/locales/platform/sv/visual-editor.json @@ -201,6 +201,7 @@ "buttons": "Knappar", "callToAction": "Uppmaning", "cards": "Kort", + "carouselImageCount": "Antal karusellbilder", "category": "Kategori", "collapseDays": "Kollapsdagar", "color": "Färg", @@ -319,6 +320,7 @@ "base_text size": "Bas", "bottom": "Botten", "bottom_direction": "Nederst", + "carousel": "Karusell", "center": "Centrum", "center_direction": "Center", "classic": "Klassisk", @@ -372,6 +374,7 @@ "fixed": "Fast", "friday": "Fredag", "fullWidth": "Full bredd", + "gallery": "Galleri", "hide": "Dölja", "hour12": "12-timmars", "hour24": "24-timmars", diff --git a/packages/visual-editor/locales/platform/tr/visual-editor.json b/packages/visual-editor/locales/platform/tr/visual-editor.json index 4a512dda7..1fcb184b1 100644 --- a/packages/visual-editor/locales/platform/tr/visual-editor.json +++ b/packages/visual-editor/locales/platform/tr/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "Düğmeler", "callToAction": "Harekete geçme çağrısı", "cards": "Kart", + "carouselImageCount": "Atlıkarınca Resim Sayısı", "category": "Kategori", "collapseDays": "Çökme günleri", "color": "Renk", @@ -318,6 +319,7 @@ "base_text size": "Temel", "bottom": "Alt", "bottom_direction": "Alt", + "carousel": "Atlıkarınca", "center": "Merkez", "center_direction": "Merkez", "classic": "Klasik", @@ -371,6 +373,7 @@ "fixed": "Sabit", "friday": "Cuma", "fullWidth": "Tam genişlik", + "gallery": "Galeri", "hide": "Saklamak", "hour12": "12 saat", "hour24": "24 saat", diff --git a/packages/visual-editor/locales/platform/zh-TW/visual-editor.json b/packages/visual-editor/locales/platform/zh-TW/visual-editor.json index 0e8f8e7cf..b147e35c3 100644 --- a/packages/visual-editor/locales/platform/zh-TW/visual-editor.json +++ b/packages/visual-editor/locales/platform/zh-TW/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "按鈕", "callToAction": "打電話給行動", "cards": "牌", + "carouselImageCount": "輪播圖像計數", "category": "類別", "collapseDays": "崩潰的日子", "color": "顏色", @@ -318,6 +319,7 @@ "base_text size": "基礎", "bottom": "底部", "bottom_direction": "底部", + "carousel": "輪播", "center": "中心", "center_direction": "中心", "classic": "經典的", @@ -371,6 +373,7 @@ "fixed": "固定的", "friday": "星期五", "fullWidth": "完整的寬度", + "gallery": "畫廊", "hide": "隱藏", "hour12": "12小時", "hour24": "24小時", diff --git a/packages/visual-editor/locales/platform/zh/visual-editor.json b/packages/visual-editor/locales/platform/zh/visual-editor.json index 6f0a41d36..d1b68092f 100644 --- a/packages/visual-editor/locales/platform/zh/visual-editor.json +++ b/packages/visual-editor/locales/platform/zh/visual-editor.json @@ -200,6 +200,7 @@ "buttons": "按钮", "callToAction": "打电话给行动", "cards": "牌", + "carouselImageCount": "轮播图像计数", "category": "类别", "collapseDays": "崩溃的日子", "color": "颜色", @@ -318,6 +319,7 @@ "base_text size": "基础", "bottom": "底部", "bottom_direction": "底部", + "carousel": "轮播", "center": "中心", "center_direction": "中心", "classic": "经典的", @@ -371,6 +373,7 @@ "fixed": "固定的", "friday": "星期五", "fullWidth": "完整的宽度", + "gallery": "画廊", "hide": "隐藏", "hour12": "12小时", "hour24": "24小时", diff --git a/packages/visual-editor/src/components/migrations/0053_photo_gallery_variant.ts b/packages/visual-editor/src/components/migrations/0053_photo_gallery_variant.ts new file mode 100644 index 000000000..dffb51aea --- /dev/null +++ b/packages/visual-editor/src/components/migrations/0053_photo_gallery_variant.ts @@ -0,0 +1,35 @@ +import { Migration } from "../../utils/migrate"; + +export const photoGalleryVariant: Migration = { + PhotoGallerySection: { + action: "updated", + propTransformation: (props) => { + if (!props.styles?.variant) { + return { + ...props, + styles: { + ...props.styles, + variant: "carousel", + }, + slots: { + ...props.slots, + PhotoGalleryWrapper: [ + { + ...props.slots.PhotoGalleryWrapper[0], + parentData: { + variant: "carousel", + }, + styles: { + ...props.slots.PhotoGalleryWrapper[0]?.styles, + carouselImageCount: 1, + }, + }, + ], + }, + }; + } + + return props; + }, + }, +}; diff --git a/packages/visual-editor/src/components/migrations/migrationRegistry.ts b/packages/visual-editor/src/components/migrations/migrationRegistry.ts index 226ac40cb..ecd30baa3 100644 --- a/packages/visual-editor/src/components/migrations/migrationRegistry.ts +++ b/packages/visual-editor/src/components/migrations/migrationRegistry.ts @@ -51,6 +51,7 @@ import { simplifyFaqSection } from "./0049_simplify_faq_section.ts"; import { promoVariants } from "./0050_promo_variants.ts"; import { updateLinksAlignmentMigration } from "./0051_update_link_align_prop.ts"; import { addDefaultLocatorAndDirectoryMetaFields } from "./0052_add_default_locator_and_directory_meta_fields.ts"; +import { photoGalleryVariant } from "./0053_photo_gallery_variant.ts"; // To add a migration: // Create a new file in this directory that exports a Migration @@ -110,4 +111,5 @@ export const migrationRegistry: MigrationRegistry = [ promoVariants, updateLinksAlignmentMigration, addDefaultLocatorAndDirectoryMetaFields, + photoGalleryVariant, ]; diff --git a/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.test.tsx b/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.test.tsx index 2a71cb300..e439d3a40 100644 --- a/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.test.tsx +++ b/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.test.tsx @@ -588,6 +588,470 @@ const tests: ComponentTest[] = [ }, version: 50, }, + { + name: "version 53 gallery variant with 3 images", + document: {}, + props: { + styles: { + backgroundColor: { + bgColor: "bg-white", + textColor: "text-black", + }, + variant: "gallery", + }, + slots: { + HeadingSlot: [ + { + type: "HeadingTextSlot", + props: { + id: "HeadingTextSlot-3c58d37f-7f1d-46ad-8938-e72ac3013b39", + data: { + text: { + field: "", + constantValue: { + en: "Gallery", + hasLocalizedValue: "true", + }, + constantValueEnabled: true, + }, + }, + styles: { + level: 2, + align: "left", + }, + }, + }, + ], + PhotoGalleryWrapper: [ + { + type: "PhotoGalleryWrapper", + props: { + id: "PhotoGalleryWrapper-96ee4ed8-d5f7-451a-ac90-8657c4526c42", + data: { + images: { + field: "", + constantValue: [ + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + es: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + width: 1000, + height: 570, + assetImage: { + name: "Placeholder", + }, + }, + }, + ], + constantValueEnabled: true, + }, + }, + styles: { + image: { + aspectRatio: 1.78, + }, + carouselImageCount: 1, + }, + parentData: { + variant: "gallery", + }, + }, + }, + ], + }, + liveVisibility: true, + id: "PhotoGallerySection-c8c122c3-2493-449b-a399-9f36a3372fed", + }, + version: 53, + }, + { + name: "version 53 gallery variant with 1 image", + document: {}, + props: { + styles: { + backgroundColor: { + bgColor: "bg-white", + textColor: "text-black", + }, + variant: "gallery", + }, + slots: { + HeadingSlot: [ + { + type: "HeadingTextSlot", + props: { + id: "HeadingTextSlot-3c58d37f-7f1d-46ad-8938-e72ac3013b39", + data: { + text: { + field: "", + constantValue: { + en: "Gallery", + hasLocalizedValue: "true", + }, + constantValueEnabled: true, + }, + }, + styles: { + level: 2, + align: "left", + }, + }, + }, + ], + PhotoGalleryWrapper: [ + { + type: "PhotoGalleryWrapper", + props: { + id: "PhotoGalleryWrapper-96ee4ed8-d5f7-451a-ac90-8657c4526c42", + data: { + images: { + field: "", + constantValue: [ + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + ], + constantValueEnabled: true, + }, + }, + styles: { + image: { + aspectRatio: 1.78, + }, + carouselImageCount: 1, + }, + parentData: { + variant: "gallery", + }, + }, + }, + ], + }, + liveVisibility: true, + id: "PhotoGallerySection-c8c122c3-2493-449b-a399-9f36a3372fed", + }, + version: 53, + }, + { + name: "version 53 carousel variant with carouselImageCount 1", + document: {}, + props: { + styles: { + backgroundColor: { + bgColor: "bg-white", + textColor: "text-black", + }, + variant: "carousel", + }, + slots: { + HeadingSlot: [ + { + type: "HeadingTextSlot", + props: { + id: "HeadingTextSlot-3c58d37f-7f1d-46ad-8938-e72ac3013b39", + data: { + text: { + field: "", + constantValue: { + en: "Gallery", + hasLocalizedValue: "true", + }, + constantValueEnabled: true, + }, + }, + styles: { + level: 2, + align: "left", + }, + }, + }, + ], + PhotoGalleryWrapper: [ + { + type: "PhotoGalleryWrapper", + props: { + id: "PhotoGalleryWrapper-96ee4ed8-d5f7-451a-ac90-8657c4526c42", + data: { + images: { + field: "", + constantValue: [ + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + width: 1000, + height: 570, + assetImage: { + name: "Placeholder", + }, + }, + }, + ], + constantValueEnabled: true, + }, + }, + styles: { + image: { + aspectRatio: 1.78, + }, + carouselImageCount: 1, + }, + parentData: { + variant: "carousel", + }, + }, + }, + ], + }, + liveVisibility: true, + id: "PhotoGallerySection-c8c122c3-2493-449b-a399-9f36a3372fed", + }, + version: 53, + }, + { + name: "version 53 carousel variant with carouselImageCount 2", + document: {}, + props: { + styles: { + backgroundColor: { + bgColor: "bg-white", + textColor: "text-black", + }, + variant: "carousel", + }, + slots: { + HeadingSlot: [ + { + type: "HeadingTextSlot", + props: { + id: "HeadingTextSlot-3c58d37f-7f1d-46ad-8938-e72ac3013b39", + data: { + text: { + field: "", + constantValue: { + en: "Gallery", + hasLocalizedValue: "true", + }, + constantValueEnabled: true, + }, + }, + styles: { + level: 2, + align: "left", + }, + }, + }, + ], + PhotoGalleryWrapper: [ + { + type: "PhotoGalleryWrapper", + props: { + id: "PhotoGalleryWrapper-96ee4ed8-d5f7-451a-ac90-8657c4526c42", + data: { + images: { + field: "", + constantValue: [ + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + width: 1000, + height: 570, + assetImage: { + name: "Placeholder", + }, + }, + }, + ], + constantValueEnabled: true, + }, + }, + styles: { + image: { + aspectRatio: 1.78, + }, + carouselImageCount: 2, + }, + parentData: { + variant: "carousel", + }, + }, + }, + ], + }, + liveVisibility: true, + id: "PhotoGallerySection-c8c122c3-2493-449b-a399-9f36a3372fed", + }, + version: 53, + }, + { + name: "version 53 carousel variant with carouselImageCount 3", + document: {}, + props: { + styles: { + backgroundColor: { + bgColor: "bg-white", + textColor: "text-black", + }, + variant: "carousel", + }, + slots: { + HeadingSlot: [ + { + type: "HeadingTextSlot", + props: { + id: "HeadingTextSlot-3c58d37f-7f1d-46ad-8938-e72ac3013b39", + data: { + text: { + field: "", + constantValue: { + en: "Gallery", + hasLocalizedValue: "true", + }, + constantValueEnabled: true, + }, + }, + styles: { + level: 2, + align: "left", + }, + }, + }, + ], + PhotoGalleryWrapper: [ + { + type: "PhotoGalleryWrapper", + props: { + id: "PhotoGalleryWrapper-96ee4ed8-d5f7-451a-ac90-8657c4526c42", + data: { + images: { + field: "", + constantValue: [ + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + en: { + alternateText: "", + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + height: 1, + width: 1, + }, + hasLocalizedValue: "true", + }, + }, + { + assetImage: { + url: "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&height=570&width=1000&fit=max", + width: 1000, + height: 570, + assetImage: { + name: "Placeholder", + }, + }, + }, + ], + constantValueEnabled: true, + }, + }, + styles: { + image: { + aspectRatio: 1.78, + }, + carouselImageCount: 3, + }, + parentData: { + variant: "carousel", + }, + }, + }, + ], + }, + liveVisibility: true, + id: "PhotoGallerySection-c8c122c3-2493-449b-a399-9f36a3372fed", + }, + version: 53, + }, ]; describe("PhotoGallerySection", async () => { @@ -638,8 +1102,16 @@ describe("PhotoGallerySection", async () => { await page.viewport(width, height); const images = Array.from(container.querySelectorAll("img")); await waitFor(() => { - // The gallery only loads the first image - expect(images[0].complete).toBe(true); + if (data.content[0].props.styles?.variant === "gallery") { + expect(images.every((i) => i.complete)).toBe(true); + } else { + const imagesPerSlide = + data.content[0].props.slots?.PhotoGalleryWrapper[0].props.styles + ?.carouselImageCount ?? 1; + expect(images.slice(0, imagesPerSlide).every((i) => i.complete)).toBe( + true + ); + } }); await expect( diff --git a/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.tsx b/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.tsx index 39e6ebf4c..2ff819c2a 100644 --- a/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.tsx +++ b/packages/visual-editor/src/components/pageSections/PhotoGallerySection/PhotoGallerySection.tsx @@ -1,5 +1,11 @@ import { useTranslation } from "react-i18next"; -import { ComponentConfig, Fields, PuckComponent, Slot } from "@measured/puck"; +import { + ComponentConfig, + Fields, + PuckComponent, + setDeep, + Slot, +} from "@measured/puck"; import "pure-react-carousel/dist/react-carousel.es.css"; import { backgroundColors, @@ -31,6 +37,12 @@ export interface PhotoGalleryStyles { * @defaultValue Background Color 1 */ backgroundColor?: BackgroundStyle; + + /** + * The layout style for displaying images in the gallery. + * @defaultValue "gallery" + */ + variant: "gallery" | "carousel"; } export interface PhotoGallerySectionProps { @@ -64,6 +76,16 @@ const photoGallerySectionFields: Fields = { options: "BACKGROUND_COLOR", } ), + variant: YextField(msg("fields.variant", "Variant"), { + type: "select", + options: [ + { label: msg("fields.options.gallery", "Gallery"), value: "gallery" }, + { + label: msg("fields.options.carousel", "Carousel"), + value: "carousel", + }, + ], + }), }, }), slots: { @@ -115,6 +137,7 @@ export const PhotoGallerySection: ComponentConfig<{ fields: photoGallerySectionFields, defaultProps: { styles: { + variant: "gallery", backgroundColor: backgroundColors.background1.value, }, slots: { @@ -188,6 +211,10 @@ export const PhotoGallerySection: ComponentConfig<{ image: { aspectRatio: 1.78, }, + carouselImageCount: 1, + }, + parentData: { + variant: "gallery", }, } satisfies PhotoGalleryWrapperProps, }, @@ -195,6 +222,20 @@ export const PhotoGallerySection: ComponentConfig<{ }, liveVisibility: true, }, + resolveData(data) { + if ( + data.props.slots.PhotoGalleryWrapper[0]?.props.parentData?.variant === + data.props.styles.variant + ) { + return data; + } + + return setDeep( + data, + "props.slots.PhotoGalleryWrapper[0].props.parentData.variant", + data.props.styles.variant + ); + }, render: (props) => ( = { type: "object", objectFields: ImageStylingFields, }), + carouselImageCount: YextField( + msg("fields.carouselImageCount", "Carousel Image Count"), + { + type: "radio", + options: [ + { label: "1", value: 1 }, + { label: "2", value: 2 }, + { label: "3", value: 3 }, + ], + visible: false, + } + ), }, }), }; @@ -111,6 +136,407 @@ const DynamicChildColors = ({ }); }; +type ResolvedGalleryImage = { + isEmpty: boolean; + originalIndex: number; + image: ImageType | AssetImageType; + aspectRatio?: number; + width?: number; + originalImage: unknown; +}; + +type GalleryRenderProps = { + allImages: ResolvedGalleryImage[]; + imageWidth: number; + isEditing: boolean; + imagesFieldId: string; + constantValueEnabled?: boolean; + onEmptyImageClick: (e: React.MouseEvent | undefined, index: number) => void; +}; + +const DesktopImageItem = ({ + imageData, + imageWidth, + isEditing, + onEmptyImageClick, + constrainToParent = false, +}: { + imageData: ResolvedGalleryImage; + imageWidth: number; + isEditing: boolean; + onEmptyImageClick: (e: React.MouseEvent | undefined, index: number) => void; + constrainToParent?: boolean; +}) => { + if (imageData.isEmpty && isEditing) { + return ( +
{ + const target = e.target as HTMLElement; + const isButton = target.closest('button[aria-label*="Add Image"]'); + if (isButton) { + return; + } + }} + onPointerDown={(e) => { + // Stop Puck from capturing pointer events on the button + const target = e.target as HTMLElement; + const isButton = target.closest('button[aria-label*="Add Image"]'); + if (isButton) { + e.stopPropagation(); + } + }} + > + +
+ ); + } + + const imageElement = ( + + ); + + if (!constrainToParent) { + return imageElement; + } + + return ( +
+ {imageElement} +
+ ); +}; + +const MobileImageItem = ({ + imageData, + isEditing, + onEmptyImageClick, +}: { + imageData: ResolvedGalleryImage; + isEditing: boolean; + onEmptyImageClick: (e: React.MouseEvent | undefined, index: number) => void; +}) => { + if (imageData.isEmpty && isEditing) { + return ( +
{ + const target = e.target as HTMLElement; + const isButton = target.closest('button[aria-label*="Add Image"]'); + if (isButton) { + return; + } + }} + onPointerDown={(e) => { + // Stop Puck from capturing pointer events on the button + const target = e.target as HTMLElement; + const isButton = target.closest('button[aria-label*="Add Image"]'); + if (isButton) { + e.stopPropagation(); + } + }} + > + +
+ ); + } + + return ( +
+ +
+ ); +}; + +const DesktopCarousel = ({ + allImages, + imageWidth, + carouselImageCount, + isEditing, + imagesFieldId, + constantValueEnabled, + onEmptyImageClick, +}: GalleryRenderProps & { carouselImageCount: number }) => { + const hasCarouselGap = carouselImageCount > 1; + return ( +
+
+ + + + + +
+ + + {allImages.map((imageData, idx) => { + return ( + +
+ +
+ + ); + })} + + +
+ {allImages.length < 20 && + allImages.map((_, idx) => { + const afterStyles = + "after:content-[' '] after:py-2 after:block"; + return ( +
+ + + +
+ ); + })} +
+
+ + + + + +
+
+ ); +}; + +const MobileCarousel = ({ + allImages, + isEditing, + imagesFieldId, + constantValueEnabled, + onEmptyImageClick, +}: GalleryRenderProps) => { + return ( +
+ + + {allImages.map((imageData, idx) => { + return ( + +
+ +
+ + ); + })} + + +
+ + + + + +
+ {allImages.map((_, idx) => ( + + + + ))} +
+ + + + + +
+
+ ); +}; + +const GalleryGrid = ({ + allImages, + imageWidth, + isEditing, + imagesFieldId, + constantValueEnabled, + onEmptyImageClick, +}: GalleryRenderProps) => { + return ( + +
+ {allImages.map((imageData, idx) => ( +
+ +
+ ))} +
+ + ); +}; + export const PhotoGalleryWrapper: ComponentConfig<{ props: PhotoGalleryWrapperProps; }> = { @@ -132,20 +558,37 @@ export const PhotoGalleryWrapper: ComponentConfig<{ image: { aspectRatio: 1.78, }, + carouselImageCount: 1, }, }, + resolveFields: (data) => { + if (data.props.parentData?.variant === "carousel") { + return updateFields( + photoGalleryWrapperFields, + ["styles.objectFields.carouselImageCount.visible"], + true + ); + } + return photoGalleryWrapperFields; + }, render: (props) => , }; const PhotoGalleryWrapperComponent: PuckComponent = ({ data, styles, + parentData, puck, }) => { const { i18n } = useTranslation(); const locale = i18n.language; const streamDocument = useDocument(); + const containerRef = React.useRef(null); + const [visibleSlides, setVisibleSlides] = React.useState( + styles.carouselImageCount + ); + const { sendToParent: openImageAssetSelector } = useSendMessageToParent( "constantValueEditorOpened", TARGET_ORIGINS @@ -253,308 +696,65 @@ const PhotoGalleryWrapperComponent: PuckComponent = ({ const hasAnyImages = allImages.length > 0; const imageWidth = styles.image?.width || 1000; - const renderImageOrEmpty = (imageData: (typeof allImages)[0]) => { - if (imageData.isEmpty && puck?.isEditing) { - return ( -
{ - // Only handle clicks that aren't on the button - const target = e.target as HTMLElement; - const isButton = target.closest('button[aria-label*="Add Image"]'); - if (isButton) { - return; - } - }} - onPointerDown={(e) => { - // Stop Puck from capturing pointer events on the button - const target = e.target as HTMLElement; - const isButton = target.closest('button[aria-label*="Add Image"]'); - if (isButton) { - e.stopPropagation(); - } - }} - > - -
- ); - } - return ( - - ); + const isEditing = Boolean(puck?.isEditing); + const sharedRenderProps: GalleryRenderProps = { + allImages, + imageWidth, + isEditing, + imagesFieldId: data.images.field, + constantValueEnabled: data.images.constantValueEnabled, + onEmptyImageClick: handleEmptyImageClick, }; + // Update visibleSlides based on container width + // Mobile view always shows 1 slide + React.useEffect(() => { + if (!containerRef.current) { + return; + } + + const observer = new ResizeObserver((entries) => { + for (let entry of entries) { + const width = entry.contentRect.width; + + if (width < 640) { + setVisibleSlides(1); + } else { + setVisibleSlides(styles.carouselImageCount); + } + } + }); + + observer.observe(containerRef.current); + return () => observer.disconnect(); + }, [styles.carouselImageCount]); + return ( - <> +
{hasAnyImages ? ( - -
-
- - - - - -
- - - {allImages.map((imageData, idx) => { - return ( - -
- {renderImageOrEmpty(imageData)} -
- - ); - })} - - -
- {allImages.map((_, idx) => { - const afterStyles = - "after:content-[' '] after:py-2 after:block"; - return ( -
- - - -
- ); - })} -
-
- - - - - -
-
-
- - - {allImages.map((imageData, idx) => { - return ( - -
- {imageData.isEmpty && puck?.isEditing ? ( -
{ - const target = e.target as HTMLElement; - const isButton = target.closest( - 'button[aria-label*="Add Image"]' - ); - if (isButton) { - return; - } - }} - onPointerDown={(e) => { - // Stop Puck from capturing pointer events on the button - const target = e.target as HTMLElement; - const isButton = target.closest( - 'button[aria-label*="Add Image"]' - ); - if (isButton) { - e.stopPropagation(); - } - }} - > - -
- ) : ( -
- -
- )} -
- - ); - })} - - -
- - - - - -
- {allImages.map((_, idx) => ( - - - - ))} -
- - - - - -
-
- + parentData?.variant === "gallery" ? ( + + ) : ( + + + + + ) ) : puck?.isEditing ? (
) : ( <> )} - +
); }; diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with document data.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with document data.png index d2686b313..7178923e2 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with document data.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with document data.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with empty document.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with empty document.png index d2686b313..7178923e2 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with empty document.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] default props with empty document.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with constant value.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with constant value.png index 3bf6d7ce5..58ad8ad7c 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with constant value.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with constant value.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with entity values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with entity values.png index d58a8b4bb..5545efa05 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with entity values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 0 props with entity values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with constant value.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with constant value.png index 3bf6d7ce5..58ad8ad7c 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with constant value.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with constant value.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with entity values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with entity values.png index d58a8b4bb..5545efa05 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with entity values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 1 props with entity values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with constant value.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with constant value.png index 8816bd184..3d135ae17 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with constant value.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with constant value.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with entity values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with entity values.png index d58a8b4bb..5545efa05 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with entity values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 38 props with entity values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 50 props with localized constant values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 50 props with localized constant values.png index cb4519f61..a50cec72e 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 50 props with localized constant values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 50 props with localized constant values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 1.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 1.png new file mode 100644 index 000000000..cd5b4fb45 Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 1.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 2.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 2.png new file mode 100644 index 000000000..2c04f7b4f Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 2.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 3.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 3.png new file mode 100644 index 000000000..0fef3ebc0 Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 carousel variant with carouselImageCount 3.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 gallery variant with 1 image.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 gallery variant with 1 image.png new file mode 100644 index 000000000..657552e54 Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 gallery variant with 1 image.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 gallery variant with 3 images.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 gallery variant with 3 images.png new file mode 100644 index 000000000..0ac461907 Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[desktop] version 53 gallery variant with 3 images.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with document data.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with document data.png index 1c25e10f2..70d546dcd 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with document data.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with document data.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with empty document.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with empty document.png index 1c25e10f2..70d546dcd 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with empty document.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] default props with empty document.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 1.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 1.png new file mode 100644 index 000000000..5b993084f Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 1.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 2.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 2.png new file mode 100644 index 000000000..5b993084f Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 2.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 3.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 3.png new file mode 100644 index 000000000..5b993084f Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 carousel variant with carouselImageCount 3.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 gallery variant with 1 image.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 gallery variant with 1 image.png new file mode 100644 index 000000000..ec5419a6b Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 gallery variant with 1 image.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 gallery variant with 3 images.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 gallery variant with 3 images.png new file mode 100644 index 000000000..cf154e873 Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[mobile] version 53 gallery variant with 3 images.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with document data.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with document data.png index 8c3b05e00..4d5a3dab1 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with document data.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with document data.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with empty document.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with empty document.png index 8c3b05e00..4d5a3dab1 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with empty document.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] default props with empty document.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with constant value.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with constant value.png index bf73d5814..4a1e6a431 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with constant value.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with constant value.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with entity values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with entity values.png index 3857fa2b0..2769daf42 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with entity values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 0 props with entity values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with constant value.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with constant value.png index bf73d5814..4a1e6a431 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with constant value.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with constant value.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with entity values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with entity values.png index 3857fa2b0..2769daf42 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with entity values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 1 props with entity values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with constant value.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with constant value.png index 79eb040c9..252d5d2f2 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with constant value.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with constant value.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with entity values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with entity values.png index 3857fa2b0..2769daf42 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with entity values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 38 props with entity values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 50 props with localized constant values.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 50 props with localized constant values.png index ef3b715e8..f52cade38 100644 Binary files a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 50 props with localized constant values.png and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 50 props with localized constant values.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 1.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 1.png new file mode 100644 index 000000000..2831695b1 Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 1.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 2.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 2.png new file mode 100644 index 000000000..978a653ee Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 2.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 3.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 3.png new file mode 100644 index 000000000..378fde7fe Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 carousel variant with carouselImageCount 3.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 gallery variant with 1 image.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 gallery variant with 1 image.png new file mode 100644 index 000000000..da615392a Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 gallery variant with 1 image.png differ diff --git a/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 gallery variant with 3 images.png b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 gallery variant with 3 images.png new file mode 100644 index 000000000..002714c6c Binary files /dev/null and b/packages/visual-editor/src/components/testing/screenshots/PhotoGallerySection/[tablet] version 53 gallery variant with 3 images.png differ diff --git a/packages/visual-editor/src/docs/ai/components.d.ts b/packages/visual-editor/src/docs/ai/components.d.ts index cae33ffb8..856c6a279 100644 --- a/packages/visual-editor/src/docs/ai/components.d.ts +++ b/packages/visual-editor/src/docs/ai/components.d.ts @@ -783,6 +783,11 @@ interface PhotoGalleryStyles { * @defaultValue Background Color 1 */ backgroundColor?: BackgroundStyle; + /** + * The layout style for displaying images in the gallery. + * @defaultValue "gallery" + */ + variant: "gallery" | "carousel"; } interface ProfessionalHeroStyles { diff --git a/packages/visual-editor/src/docs/components.md b/packages/visual-editor/src/docs/components.md index 72ba12b33..e022ceb50 100644 --- a/packages/visual-editor/src/docs/components.md +++ b/packages/visual-editor/src/docs/components.md @@ -622,9 +622,10 @@ The Photo Gallery Section is designed to display a collection of images in a vis This object contains properties for customizing the component's appearance. -| Prop | Type | Description | Default | -| :----------------------- | :---------------- | :-------------------------------------------------------------------- | :------------------- | -| `styles.backgroundColor` | `BackgroundStyle` | The background color for the entire section, selected from the theme. | `Background Color 1` | +| Prop | Type | Description | Default | +| :----------------------- | :------------------------ | :-------------------------------------------------------------------- | :------------------- | +| `styles.backgroundColor` | `BackgroundStyle` | The background color for the entire section, selected from the theme. | `Background Color 1` | +| `styles.variant` | `"gallery" \| "carousel"` | The layout style for displaying images in the gallery. | `"gallery"` | #### Other Props diff --git a/packages/visual-editor/src/internal/puck/constant-value-fields/ImageList.tsx b/packages/visual-editor/src/internal/puck/constant-value-fields/ImageList.tsx index 09787b651..88c7fe65d 100644 --- a/packages/visual-editor/src/internal/puck/constant-value-fields/ImageList.tsx +++ b/packages/visual-editor/src/internal/puck/constant-value-fields/ImageList.tsx @@ -1,6 +1,7 @@ import { Field } from "@measured/puck"; import { pt } from "../../../utils/i18n/platform.ts"; import { IMAGE_CONSTANT_CONFIG } from "./Image.tsx"; +import { getRandomPlaceholderImageObject } from "../../../utils/imagePlaceholders"; export const IMAGE_LIST_CONSTANT_CONFIG = (): Field => { return { @@ -12,6 +13,13 @@ export const IMAGE_LIST_CONSTANT_CONFIG = (): Field => { label: pt("fields.image", "Image"), }, }, + defaultItemProps: { + assetImage: { + ...getRandomPlaceholderImageObject({ width: 1000, height: 570 }), + width: 1000, + height: 570, + }, + }, getItemSummary: (_, i) => pt("photo", "Photo") + " " + ((i ?? 0) + 1), }; };