Gutenberg: Membuat Kolom dengan Blok

Dibuat pada 9 Mar 2017  ·  39Komentar  ·  Sumber: WordPress/gutenberg

Dengan UI mockup saat ini, Anda akan dapat dengan mudah mengatur ulang urutan blok.

Mempertimbangkan aliran ini, saya mencari solusi untuk membuat tata letak kolom dua atau tiga kotak sederhana.

Tidak yakin apakah ini target proyek Gutenberg, tetapi saya ingin mengimplementasikan fitur serupa karena saya telah melihat begitu banyak kasus di mana saya memerlukan cara mudah untuk membuat tata letak halaman seperti itu.

Saya sudah membangun prototipe awal di Invision di mana Anda dapat melihatnya: https://invis.io/3FAS8VQE8#/222711568_Creating_Columns_-_0

creating columns - 1
creating columns - 2
creating columns - 3
creating columns - 4
creating columns - 5
creating columns - 6
creating columns - 7

Customization [Type] Enhancement

Komentar yang paling membantu

Fitur ini harus dibangun dengan mempertimbangkan alat tata letak modern. Membuat wadah yang tidak perlu untuk membuat tata letak kolom sekarang akan membatasi kemampuan kita untuk menggunakan teknologi modern di masa depan.

Untuk layout satu dimensi sederhana seperti kolom, kita dapat menggunakan flex atau grid. Saya condong ke arah grid untuk alasan sederhana bahwa sementara kita hanya berbicara tentang kolom hari ini, pengguna jalan akan menginginkan kontrol grid yang lebih maju jadi kita harus meletakkan dasar sekarang.

Adapun dukungan browser, baik flex dan grid memiliki dukungan luas di browser modern dan kembali dengan bersih di browser lama. Ini juga relatif mudah untuk menyediakan fallback untuk browser lama.

Saya sangat tidak menyarankan untuk mengadopsi pendekatan kerangka kerja klasik dari elemen bersarang untuk membuat ini berhasil. Ini akan menghasilkan biaya warisan segera dan menghambat pekerjaan tata letak di masa depan.

Mengadopsi grid di sini membuka pintu ke wilayah yang belum dijelajahi di mana tata letak yang bersangkutan. Saya akan mencoba mencari waktu minggu depan untuk menulis sesuatu yang lebih komprehensif tentang apa yang mungkin terjadi di sini. Sementara itu, ini relevan: https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/

Semua 39 komentar

😍

Ini ️ ️ ️ ️ ️ bekerja. Maket STELLAR, saya menyukainya. Ini adalah jenis tata letak kaya yang kami harapkan dapat dicapai oleh UI blok-pertama.

CC: @melchoyce Anda akan ingin melihat ini untuk fokus penyesuaian di akhir tahun.

Untuk editor V1, saya khawatir kolom seperti ini di luar jangkauan. Itu bukan "tidak" — melainkan, kita membutuhkan beberapa dasar teknis untuk menjadi kuat terlebih dahulu, sebelum kita berkomitmen pada hal-hal yang benar-benar menarik. Tapi itu mungkin V1.1, atau setidaknya sesuatu untuk orang-orang kustomisasi di akhir tahun. Bahkan sebelum itu, akan lebih baik untuk mengingat UI ini, sehingga mungkin sebuah plugin dapat menambahkan ini lebih awal.

Terima kasih untuk ini!

Umpan balik saya adalah ini mulai mengubah editor menjadi alat tata letak daripada alat pengeditan konten. Hal-hal seperti desain responsif membuat kontrol tata letak sangat sulit di CMS dan IMHO sebaiknya diserahkan kepada perancang / pengembang tema. Saya pasti bisa melihat opsi seperti "2-col" tetapi sebenarnya menyeret pembagi untuk pada dasarnya memungkinkan pengguna untuk meletakkan konten tampaknya di luar cakupan alat editor konten bagi saya.

Tidak yakin apakah filosofi itu sesuai dengan bagaimana Project Gutenberg melihat dirinya sendiri?..

Saya pikir ini juga ide yang menarik untuk galeri. Kami mungkin tidak ingin mempertahankan pendekatan kolom tetap saat ini dan mengizinkan baris memiliki jumlah kolom yang berbeda. Sama seperti kolom teks, blok galeri yang bagus terdengar seperti sesuatu yang bisa menjadi sangat kompleks.

Tidak yakin apakah filosofi itu sesuai dengan bagaimana Project Gutenberg melihat dirinya sendiri?..

Nanti di tahun ini, penyesuai akan menjadi fokus:

Penyesuai akan membantu editor pada awalnya, kemudian beralih untuk membawa blok bangunan mendasar itu menjadi sesuatu yang dapat memungkinkan penyesuaian "di luar kotak" post_content, termasuk bilah sisi dan bahkan mungkin seluruh tema.

Kolom sangat mungkin menjadi bagian dari itu.

Gutenberg adalah untuk menulis dan meletakkan posting pertama dan terutama. Itu yang harus kita luruskan. Tetapi editor kemungkinan akan membagikan beberapa DNA dengan penyesuai nanti, khususnya ketika menyangkut beberapa blok, dan mungkin juga mengontrol. Dengan demikian, maket ini masih membantu untuk fokus penyesuaian.

Solusi yang sangat elegan. Terasa jauh lebih baik daripada menjatuhkan sekelompok blok kolom, IMO. Saya juga dapat melihat lebar kolom berubah menjadi persentase tertentu (jadi 50% / 50%, atau 33% / 66%, atau 25% / 75%, dll.). Kolom hampir pasti akan menjadi fitur di Customizer yang diperbarui :)

@jasmussen senang Anda menyukainya — versi 1.1 juga bagus :)
@simonrjones memperluas WordPress lebih jauh dari Postingan Blog default secara otomatis menyiratkan perlunya tata letak multi-kolom untuk halaman presentasi. Saya lebih suka menangani fitur ini di muka, daripada membiarkan setiap pengembang melakukannya sendiri (lihat banyak plugin pembuat halaman).
@melchoyce pasti lebar kolom harus

Saya ingin tahu apakah kita dapat menemukan cara untuk membuat gertakan kolom bergantung pada tema. Sesuatu yang ingin kami renungkan dalam beberapa bulan ke depan seiring perkembangan Gutenberg.

Harus ada default baik dalam hal gertakan kolom dan untuk kisi CSS (termasuk bagian responsif). Maka tema harus dapat menimpanya.

Kami sedang mengerjakan sebuah plugin yang terintegrasi ke dalam TinyMCE Editor yang berbagi beberapa perilaku tersebut — hanya saja itu bukan berbasis blok drag&drop, melainkan pendekatan baris/kolom. Ini disebut Gridable dan mungkin patut dicoba.

+100 dari saya. Saya sangat menyukai ide blok kolom.

Apakah ini kandidat untuk grid CSS?

https://css-tricks.com/getting-started-css-grid/

Terima kasih atas klarifikasi atas komentar saya.

Kisi-kisi CSS akan fantastis dan sangat cocok untuk tata letak kolom. Namun, saya kira dukungan browser yang luas masih ada beberapa waktu lagi yang mungkin menjadi masalah bagi WP (berfungsi hari ini di Firefox terbaru). Beberapa sumber daya yang sangat bagus tentang grid CSS di situs Rachel Andrew dan beberapa hal bagus di situs Jen Simmons .

Dengan satu atau lain cara menambahkan kolom berarti CSS dan juga HTML, jadi idealnya kita membutuhkan pola sederhana dan berbasis standar untuk memudahkan pengembang tema. Ini dapat dienkapsulasi dalam kode sehingga titik awal default dapat ditentukan yang kemudian dapat diganti (misalnya jika seseorang ingin menggunakan Foundation untuk membangun situs mereka, maka perlu pengaturan kolom dengan cara Foundation).

Aturan praktis yang saya dengar adalah:

  • Kisi untuk struktur/tata letak situs
  • Flexbox untuk konten dalam tata letak itu

Artikel bagus tentang flexbox vs. grid oleh Rachel Andrew: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

Berdasarkan persyaratan kompatibilitas browser WordPress saat ini, saya pikir grid "baris+kolom" standar sebagai sistem default (misalnya Bootstrap atau Foundation) akan memberikan keseimbangan terbaik antara kesederhanaan dan fleksibilitas.

Saya setuju bahwa struktur baris + kolom standar adalah cara yang harus dilakukan.

Alangkah baiknya jika ada opsi untuk memilih sistem grid di pengaturan WordPress:

  • Bawaan
  • Bootstrap
  • Dasar
  • Kebiasaan

Sistem grid default akan menyertakan CSS pendukung (sebagai bagian dari tema TwentyEighteen?), sedangkan opsi lainnya akan bergantung pada tema untuk CSS. Pada dasarnya, WordPress mengeluarkan kelas grid dan tema menyediakan gaya.

Opsi kustom akan memungkinkan Anda untuk mengatur nama kelas untuk baris dan kolom. Perbandingan UI yang dekat untuk apa yang saya gambarkan adalah layar pengaturan tautan permanen saat ini.

Tata letak multi kolom harus dimiliki! Saat ini, Gutenberg tidak menyelesaikan masalah apa pun. Anda masih berakhir dengan satu kolom konten yang panjang. Seluruh alasan pembuat halaman sangat populer, dan mengapa ratusan ribu orang menggunakannya, adalah karena mereka menyediakan kemampuan untuk membuat tata letak multi-kolom dengan mudah. Tanpa fungsi ini, Anda tidak memberikan alasan apa pun untuk menggunakan Gutenberg di atas plugin pembuat halaman.

@maddisondesigns Ya, melakukan tata letak multi-kolom direncanakan untuk V2. Pekerjaan dasar untuk mereka sedang dilakukan sekarang di V1. Sebenarnya, parser yang mendasari untuk blok memang mendukung bersarang, tetapi hanya saja UI untuk menampilkan blok bersarang belum diimplementasikan. Lihat juga #428.

@westonruter Senang mendengar bahwa itu sedang direncanakan. Akan senang melihatnya diimplementasikan di V1. Saya yakin mengatakan bahwa ini akan menjadi salah satu hal pertama yang dikeluhkan orang, jika ditambahkan ke inti tanpa dapat membuat tata letak multi-kolom. Saat ini, Gutenberg tidak melakukan apa pun yang tidak dapat dilakukan di TinyMCE yang ada. Tentu, ini terlihat lebih cantik dan memiliki beberapa fungsi keren seperti dapat memindahkan blok teks ke atas dan ke bawah dengan lebih mudah, tetapi sekali lagi, ini pada dasarnya sama dengan menyalin 'n menempelkan blok teks di TinyMCE. Sedikit lebih rumit, tentu saja, tetapi hasil akhirnya tetap sama. Saya pikir tujuan utama di balik Gutenberg adalah untuk memberikan peningkatan yang signifikan dalam cara Anda menata konten, bukan hanya untuk menyediakan editor yang lebih cantik. Tampaknya kontra-intuitif memiliki antarmuka berbasis blok jika Anda hanya dapat memiliki satu blok per baris/baris. Jelas tidak perlu dikatakan lagi, saya memahami pekerjaan ekstra yang terlibat,, tetapi saya pikir orang lebih suka melihat fungsionalitas semacam ini ketika pertama kali diluncurkan, bahkan jika itu berarti tidak ditambahkan ke inti untuk beberapa rilis lainnya.

Saya menghargai kegembiraan dan urgensi untuk menginginkan kolom. Kami merasakan urgensi yang sama. Ini bukan tentang tidak menginginkan kolom, ini murni tentang mengelola sumber daya pada saat ini. Kami akan mencapainya, itu benar-benar meta-tujuan. Andai saja kita bisa menjentikkan jari dan mewujudkannya ;)

Bahkan tanpa kolom, Guttenberg adalah langkah maju yang besar dan saya sangat terkesan, tetapi saya setuju bahwa menyertakan kolom-kolom itu penting untuk V1 dan sebaiknya menunda V1 hingga fitur itu siap.

Jika Anda menambahkan pemasangan aktif untuk tiga pembuat halaman teratas dan halaman pertama kolom plugin dari .org, Anda mendapatkan lebih dari 1,5 juta ... dan jika Anda menambahkan premium, itu bukan setengahnya. Intinya adalah saya tidak berpikir editor tanpa kolom memenuhi kebutuhan saat ini. Jika Guttenberg dirilis tanpa kolom maka saya membayangkan selusin plugin akan muncul untuk menambahkannya pada hari pertama. Kemudian ketika ditambahkan selanjutnya pengguna memiliki sesuatu untuk dikelola.

Guttenberg akan sangat mengganggu, tetapi saya mendesak agar semua elemen penting sudah ada di tempatnya. +1 untuk kegembiraan dan urgensi.

Saya ingin menantang gagasan tentang "membutuhkan" dukungan untuk tata letak yang kompleks di Gutenberg.

Kombinasi kolom dan sarang yang diusulkan adalah lubang kelinci yang tidak akan berakhir sampai pengalaman pengguna benar-benar buruk bagi orang yang benar-benar menulis konten. Setiap pembuat halaman "penuh" adalah buktinya.

Tidak semua orang membuat tata letak dengan pembuat halaman, dan memiliki struktur halaman semacam itu dalam database sangat bermasalah. Akan jauh lebih baik untuk fokus pada memiliki API yang baik untuk memperluas Gutenberg dan sangat berhati-hati dalam menambahkan fitur kompleks ke inti Gutenberg.

@khromov - Sepertinya Anda mungkin membalas komentar saya. Saya menganjurkan kolom, bukan tata letak yang rumit, bersarang, atau pembuat halaman penuh. Saya terkadang membutuhkan kolom saat menulis konten. Saya menolak untuk menggunakan kode pendek, jadi saya punya dua pilihan: membuat div bersarang dengan tangan, yang merupakan pengalaman pengguna yang mengerikan dan gangguan besar untuk benar-benar menulis konten, atau menggunakan pembuat halaman, yang biasanya berlebihan. Saya pikir menggunakan kolom sangat umum, mungkin lebih umum daripada menyematkan video.

Bagaimanapun, pemahaman saya adalah bahwa kolom ada di peta jalan. Saya ingin melihat mereka di V1 bukan V2. Seperti Anda, saya menghargai perhatian yang diberikan untuk meletakkan dasar yang baik.

Salah satu aspek "kolom" yang perlu diingat adalah bahwa ini bukan hanya masalah tata letak desktop. Ini memiliki sistem yang menskala dari seluler ke desktop.

Apakah column-count di CSS? Jika kami menggunakannya, akan sangat mudah untuk membuat sesuatu yang responsif dengan cepat, tetapi Anda tidak akan dapat meletakkan konten di kolom yang Anda inginkan pada titik henti sementara tertentu.

Apakah itu CSS Grid atau flexbox? Kemudian kami ingin memastikan bahwa pengguna memiliki opsi responsif yang tepat sehingga hasilnya dapat diprediksi di seluruh perangkat, dan tidak hanya itu, tetapi kami juga ingin memberi tahu tema WordPress tentang fitur ini sehingga dapat beradaptasi dengan tepat.

Kami tahu kami menginginkan kolom. Faktanya, plugin pihak ke-3 dapat membuat blok kolom hari ini. Tapi itu adalah fitur yang rumit dengan banyak aspek yang perlu ditempatkan dengan benar agar bisa berfungsi, dan tanpa lebih banyak kontributor pada proyek, itu tidak mungkin terjadi di V1.

@jasmussen - Ya. Saya menghargai bahwa kolom ada di peta jalan dan mungkin akan ada beberapa wawasan dari blok galeri yang akan membantu.

Fitur ini harus dibangun dengan mempertimbangkan alat tata letak modern. Membuat wadah yang tidak perlu untuk membuat tata letak kolom sekarang akan membatasi kemampuan kita untuk menggunakan teknologi modern di masa depan.

Untuk layout satu dimensi sederhana seperti kolom, kita dapat menggunakan flex atau grid. Saya condong ke arah grid untuk alasan sederhana bahwa sementara kita hanya berbicara tentang kolom hari ini, pengguna jalan akan menginginkan kontrol grid yang lebih maju jadi kita harus meletakkan dasar sekarang.

Adapun dukungan browser, baik flex dan grid memiliki dukungan luas di browser modern dan kembali dengan bersih di browser lama. Ini juga relatif mudah untuk menyediakan fallback untuk browser lama.

Saya sangat tidak menyarankan untuk mengadopsi pendekatan kerangka kerja klasik dari elemen bersarang untuk membuat ini berhasil. Ini akan menghasilkan biaya warisan segera dan menghambat pekerjaan tata letak di masa depan.

Mengadopsi grid di sini membuka pintu ke wilayah yang belum dijelajahi di mana tata letak yang bersangkutan. Saya akan mencoba mencari waktu minggu depan untuk menulis sesuatu yang lebih komprehensif tentang apa yang mungkin terjadi di sini. Sementara itu, ini relevan: https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/

Kekhawatiran saya dengan ini adalah bahwa itu mengunci pengguna ke dalam satu jenis struktur HTML tertentu. Semua tema kemudian harus beradaptasi untuk mendukung struktur ini. Apakah itu bersarang div s? section bersarang? Apakah kita menggunakan float s untuk kompatibilitas mundur (karena banyak situs membutuhkan itu. Win7 masih memiliki pangsa pasar yang besar, yang berarti IE11 masih melakukannya juga, dan IE11 tidak bermain dengan baik dengan flexbox ), atau gunakan flexbox/grid untuk masa depan. Apakah kami memberi pengguna opsi untuk mengubah (dan kemudian kembali ke mereka harus mengetahui CSS)? Ini bisa menjadi berbahaya dengan cepat.

Konten akan berisi blok bersarang tetapi markup yang dihasilkan untuk rendering berpotensi ditentukan oleh tema.

Saya pikir Gutenberg malah harus fokus pada penyediaan fungsionalitas dan UI untuk menambahkan blok bersarang sebagai gantinya yang akan memungkinkan pengembang membuat blok khusus untuk hal-hal seperti kolom. Gutenberg seharusnya tidak peduli dengan kisi-kisi karena itu adalah sesuatu yang harus dikontrol oleh tema.

@westonruter +100000 tentang ini. Saya pikir Gutenberg dapat memberikan cara default untuk menandai kisi dan gayanya, tetapi penting bahwa itu harus dapat ditimpa oleh tema, misalnya melalui add_theme_support() .

Besar +1 dari saya, ini akan menjadi fitur yang sangat populer.

Ini adalah contoh bagus mengapa data Gutenberg tidak boleh disimpan sebagai HTML mentah... jika disimpan dalam metode yang sesuai standar, seperti mobiledoc, maka kolom hanya akan menjadi objek, dan merendernya akan mudah ditimpa oleh tema apapun. Jika tema ingin menggunakan struktur warisan, seperti baris/kolom, mereka bisa. Jika mereka ingin menggunakan grid, mereka bisa. jika mereka ingin menggunakan flex, mereka bisa. Jika mereka ingin menggunakan teknologi apa pun yang akan datang, mereka bisa. Metode penyimpanan objek yang benar akan membuat konten terbukti di masa depan. HTML + Komentar tidak bisa.

+1 fitur ini sangat penting bagi semua orang.

Saya sedang bersiap-siap untuk mendesain ulang situs web B2B yang besar. Saat ini menggunakan Divi dan saya akan senang untuk dapat menggunakan Gutenberg untuk mendesain ulang atau saya akan terjebak dengan Divi lagi selama beberapa tahun.

Jika kolom tidak ditangani - kami akan dipaksa untuk melanjutkan dengan pendekatan "non-WordPress" untuk membangun situs WP kami. Saya juga ingin tahu apakah Gutenberg akan menyertakan beberapa prasetel "tata letak halaman" untuk mengganti tema yang tidak kompatibel dan menyertakan tata letak dasar.

Kisi berdasarkan Flexbox, tolong. Bukan CSS Grid, karena memerlukan pembaruan CSS wadah untuk perubahan apa pun. Flexbox akan bekerja hanya dengan menambahkan blok. Terima kasih.

Benar-benar akan menyukai fitur ini. Diskusi hebat di sini, menantikan untuk melihat bagaimana perkembangannya.

Aku suka ini. Terutama kemampuan untuk mengubah ukuran kolom. Saya secara khusus menyukai kenyataan bahwa Anda dapat mengontrol tata letak. Saya tidak berpikir ini adalah kelemahan sama sekali. Persis seperti yang saya inginkan di Gutenberg dan frustrasi karena saya belum bisa melakukannya, mengingat begitu banyak alat serupa lainnya menawarkan fitur ini.

Jadi saya baru saja memperbarui plugin Gutenberg, dan mencoba mengacaukan kolom di dalamnya. Saya membuat posting baru dan menambahkan blok tata letak kolom, dan mencoba meningkatkannya menggunakan bilah geser. Setiap kali saya mencoba melakukan ini, ini akan menampilkan kesalahan: "Blok ini mengalami kesalahan dan tidak dapat dipratinjau."

Terima kasih atas laporan bugnya ,

3745 digabung awal minggu ini, yang sebagian mengimplementasikan proposal di sini.

Dari apa yang saya tahu, tugas yang tersisa sebagian besar ditingkatkan UX di sekitar penataan ulang blok menjadi tata letak kolom, apakah saya benar? Apakah saya benar dengan asumsi ini akan lebih cocok untuk fokus Penyesuaian mengikuti proposal penggabungan awal?

Akan menutup ini yang akan tetap sebagai referensi untuk perbaikan lebih lanjut dalam kustomisasi.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat