Draft Website Builder

描述

Build beautiful websites faster by adding TailwindCSS utility classes to Gutenberg blocks.

Free plugin responsive utility classes:

  • Margin [‘responsive’ ]
  • padding [‘responsive’,’child’]
  • Display [‘responsive’ ]
  • Flex Basis [‘responsive’ ]

Pro plugin utility classes:

  • Margin [‘responsive’ ]
  • Padding [‘responsive’ ]
  • Display [‘responsive’ ]
  • Flex Basis [‘responsive’ ]

All the FREE utility classes PLUS

  • accessibility [‘responsive’ ]
  • alignContent [‘responsive’]
  • alignItems [‘responsive’]
  • alignSelf [‘responsive’]
  • animation [‘responsive’]
  • appearance [‘responsive’]
  • backdropBlur [‘responsive’]
  • backdropBrightness [‘responsive’]
  • backdropContrast [‘responsive’]
  • backdropFilter [‘responsive’]
  • backdropGrayscale [‘responsive’]
  • backdropHueRotate [‘responsive’]
  • backdropInvert [‘responsive’]
  • backdropSaturate [‘responsive’]
  • backdropSepia [‘responsive’]
  • backgroundAttachment [‘responsive’]
  • backgroundBlendMode [‘responsive’]
  • backgroundClip [‘responsive’]
  • backgroundColor [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • backgroundImage [‘responsive’]
  • backgroundOpacity [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • backgroundPosition [‘responsive’]
  • backgroundRepeat [‘responsive’]
  • backgroundSize [‘responsive’]
  • backgroundOrigin [‘responsive’]
  • blur [‘responsive’]
  • borderCollapse [‘responsive’]
  • borderColor [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • borderOpacity [‘responsive’, ‘hover’,’focus’,’group-hover’ ]
  • borderRadius [‘responsive’]
  • borderStyle [‘responsive’]
  • borderWidth [‘responsive’]
  • boxDecorationBreak [‘responsive’]
  • boxShadow [‘responsive’, ‘hover’,’focus’,’group-hover’]
  • boxSizing [‘responsive’]
  • brightness [‘responsive’]
  • clear [‘responsive’]
  • container [‘responsive’]
  • contrast [‘responsive’]
  • cursor [‘responsive’]
  • divideColor [‘responsive’]
  • divideOpacity [‘responsive’]
  • divideStyle [‘responsive’]
  • divideWidth [‘responsive’]
  • dropShadow [‘responsive’]
  • fill [‘responsive’]
  • filter [‘responsive’]
  • flex [‘responsive’]
  • flexDirection [‘responsive’]
  • flexGrow [‘responsive’]
  • flexShrink [‘responsive’]
  • flexWrap [‘responsive’]
  • float [‘responsive’]
  • fontFamily [‘responsive’]
  • fontSize [‘responsive’]
  • fontSmoothing [‘responsive’]
  • fontStyle [‘responsive’]
  • fontVariantNumeric [‘responsive’]
  • fontWeight [‘responsive’]
  • gap [‘responsive’]
  • gradientColorStops [‘responsive’,’hover’,’focus’]
  • grayscale [‘responsive’]
  • gridAutoColumns [‘responsive’]
  • gridAutoFlow [‘responsive’]
  • gridAutoRows [‘responsive’]
  • gridColumn [‘responsive’]
  • gridColumnEnd [‘responsive’]
  • gridColumnStart [‘responsive’]
  • gridRow [‘responsive’]
  • gridRowEnd [‘responsive’]
  • gridRowStart [‘responsive’]
  • gridTemplateColumns [‘responsive’]
  • gridTemplateRows [‘responsive’]
  • height [‘responsive’]
  • hueRotate [‘responsive’]
  • inset [‘responsive’]
  • invert [‘responsive’]
  • isolation [‘responsive’]
  • justifyContent [‘responsive’]
  • justifyItems [‘responsive’]
  • justifySelf [‘responsive’]
  • letterSpacing [‘responsive’]
  • lineHeight [‘responsive’]
  • listStylePosition [‘responsive’]
  • listStyleType [‘responsive’]
  • maxHeight [‘responsive’]
  • maxWidth [‘responsive’]
  • minHeight [‘responsive’]
  • minWidth [‘responsive’]
  • mixBlendMode [‘responsive’]
  • objectFit [‘responsive’]
  • objectPosition [‘responsive’]
  • opacity [‘responsive’, ‘hover’,’focus’,’group-hover’]
  • order [‘responsive’]
  • outline [‘responsive’,’focus’ ]
  • overflow [‘responsive’]
  • overscrollBehavior [‘responsive’]
  • placeContent [‘responsive’]
  • placeItems [‘responsive’]
  • placeSelf [‘responsive’]
  • placeholderColor [‘responsive’,’focus’ ]
  • placeholderOpacity [‘responsive’,’focus’ ]
  • pointerEvents [‘responsive’]
  • position [‘responsive’]
  • resize [‘responsive’]
  • ringColor [‘responsive’,’focus’ ]
  • ringOffsetColor [‘responsive’,’focus’ ]
  • ringOffsetWidth [‘responsive’,’focus’ ]
  • ringOpacity [‘responsive’,’focus’ ]
  • ringWidth [‘responsive’,’focus’ ]
  • rotate [‘responsive’,’hover’]
  • saturate [‘responsive’]
  • scale [‘responsive’, ‘hover’]
  • sepia [‘responsive’]
  • skew [‘responsive’, ‘hover’]
  • space [‘responsive’]
  • stroke [‘responsive’]
  • strokeWidth [‘responsive’]
  • tableLayout [‘responsive’]
  • textAlign [‘responsive’]
  • textColor [‘responsive’,’hover’,’focus’,’group-hover’]
  • textDecoration [‘responsive’,’hover’,’focus’,’group-hover’]
  • textOpacity [‘responsive’, ‘hover’,’focus’,’group-hover’]
  • textOverflow [‘responsive’]
  • textTransform [‘responsive’]
  • transform [‘responsive’]
  • transformOrigin [‘responsive’]
  • transitionDelay [‘responsive’]
  • transitionDuration [‘responsive’]
  • transitionProperty [‘responsive’]
  • transitionTimingFunction [‘responsive’]
  • translate [‘responsive’,’hover’]
  • userSelect [‘responsive’]
  • verticalAlign [‘responsive’]
  • visibility [‘responsive’]
  • whitespace [‘responsive’]
  • width [‘responsive’]
  • wordBreak [‘responsive’]
  • zIndex [‘responsive’,’hover’]

螢幕截圖

安裝

This section describes how to install the plugin and get it working.

  1. Upload the draft website builder plugin files to the /wp-content/plugins/ directory, or upload the website-builder.zip file through the WordPress plugins screen directly by clicking ‘Add New’ and selecting the zip file from your computer.
  2. Install and active the Gutenberg WordPress plugin.
  3. Activate the Draft Website Builder plugin through the ‘Plugins’ screen in WordPress.
  4. Use the Draft Website Builder plugin on your pages and posts.

常見問題

Will TailwindCSS utility classes conflict with other plugins?

No.

What themes is the Draft plugin compatible with?

Any theme built for the Gutenberg editor.

評價

2021年10月22日
Hi Lee, Really enjoyed your demo on the Page Builder Summit yesterday. While I am not a Tailwind CSS user, more a Divi user, I totally agree with the way you have implemented your system from a minimalist point of view, where only the existing blocks in core are extended or, as you have done, reduced to be manipulated with the Tailwind CSS only. So far I have some niggles with the Gutenberg project which I see as fundamental design flaws in the long run; the fact that they didn’t nail the main layout and structural elements (Sections/containers, rows and columns + better responsiveness on device breakpoints ) and make these, along with all the other blocks, a restricted set which third parties could extend, via an API, with their own UI, bells and whistles. So far I see many vendors out there making their own implementations of block sets where they are reinventing the wheel. Seems to me that they are perpetuating the age old problem where, if you disable any one of these solutions you potentially lose content, layout or both, whereas, if WordPress had a core foundation of set blocks, turning off or switching to another solution would retain content and maintain layout to some degree. Having this systematic approach would have had more buy-in from page builder vendors and subsequently a better overall direction in the development of the Gutenberg project. It would have also driven better consistency and interoperability between builders. What you have done makes the whole enterprise of using the block editor "Safer" and in this context third party vendors should only be allowed to override existing blocks in core by plugging in their own UI and features.
閱讀全部1個評價

貢獻者及開發者

“Draft Website Builder” 是一個開源的軟體。以下的人對這個外掛作出了貢獻。

貢獻者

將 Draft Website Builder 外掛本地化為台灣繁體中文版。

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

修改日誌

1.0.1

  • Added missing utility classes to class picker (py-72,py-80,py-96)

1.0.0

  • Plugin Release