README

# Gutengeek - 组件参考

该包是一个库，提供创建控制力量和UI美观块检查器的所有组件。这是 GutenGeek 插件的一部分。 查看 Gutengeek 块的完整功能。

安装

安装 composer 包

cd path/to/your-[plugin|theme]
composer require gutengeek/components

确保 autoload.php 已包含

// require autoload into your plugin or theme
require_once 'path/to/project/vendor/autoload.php';

或者 - 安装 npm 包

cd path/to/your-folder
npm i @gutengeek/components

要求

// make sure 'wp_enqueue_script' function enqueued with dependencies required
// example
wp_register_script( 'gutengeek-advanced-components', YOUR_PLUGIN_URL . 'path/to/blocks/scripts/index.js', [ 'wp-edit-post', 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor', 'wp-api-fetch', 'wp-compose', 'wp-data' ], false, true );

用法

在 GutenGeek 插件 中，可以通过从 wp.gutengeek.components 根目录导入来访问这些组件

// use with gtg-advanced-blocks wordpress plugin
const {
	BorderControl
} = wp.gutengeek.components

// import via npm
import Components from "@gutengeek/components";
import '@gutengeek/components/build/core.css';
import '@gutengeek/components/build/index.css';

/**
 * GutenBerg dependencies
 */
const {
	InspectorControls
} = wp.blockEditor;

const { __ } = wp.i18n;

const {
	PanelBody,
} = wp.components;


/**
 * GutenGeek dependencies
 */
const {
	BorderControl
} = wp.gutengeek.components

export default function MyComponent() {
	const [ device, setDevice ] = useState( 'desktop' ); // desktop, tablet, mobile
	const [ value, setValue ] = useState( {} ); // border control value default is an object

	return <InspectorControls>
		<PanelBody title={ __('My Panel Body') }>
			<BorderControl
				className="your-extra-class"
				title={ __( 'Border' ) }
				value={ value }
				onChangeDevice={ ( device ) => setDevice(device) }
				device={ device }
				onChange={ value => setValue( value ) }
				units={ [ 'px', 'em', '%' ] }
			/>
		</PanelBody>
	</InspectorControls>
}

Gutengeek 工具栏组件可用

ShapeControl

SizeTypeUnits

GradientControl

IconPickerControl

PaddingControl

MarginControl

HeadingControl

RangeSlider

BackgroundControl

Typography

AlignmentsControl

BorderControl

BorderRadiusControl

BoxShadowControl

TransformControl

ButtonGroupControl

Dimension

ParallaxControls

Color

MediaControl

TransitionControl

ResponsiveControl

InspectorTabs

InspectorTab

开发指南

ShapeControl

使用 Gutengeek，您可以轻松控制所有形状分隔符，这些分隔符将页面部分隔开。可以选择顶部形状和底部形状。

const shapes = {
	'mask01' : '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 viewBox="0 0 1920 470" style="enable-background:new 0 0 1920 470;" xml:space="preserve">
		<path d="M0,0h1920v310L0,470V0z"/>
		</svg>'
	'mask02' : '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1920 160" style="enable-background:new 0 0 1920 160;" xml:space="preserve">
	<g style="transform: rotate3d(-180, 0, 0, -180deg); transform-origin: center"><polygon points="1920,160 1920,0 0,160 "/></g>
	</svg>'
}
export default function MyComponent( props ) {
	const {
		attributes: {
			shape
		},
		setAttributes
	} = props
	const [ device, setDevice ] = useState( 'desktop' );

	return <InspectorControls>
		<PanelBody title={ __('My Panel Body') }>
			<ShapeControl value={ shape }
				shapes={shapes}
				device={ device }
			  	onChangeDevice={ ( device ) => setDevice( device ) }
			  	onChange={ ( value ) => setAttributes( { shape: value } ) }
		  	/>
		</PanelBody>
	</InspectorControls>
}

SizeTypeUnits

Gutengeek 提供了用于测量尺寸的单位选项，如 px、em、rem、% 的 CSS。

export default function MyComponent() {
	const [ value, setValue ] = useState( 'em' ); // default value maybe em, px, %, vh, vw, whatever you want

	return <InspectorControls>
		<PanelBody title={ __('My Panel Body') }>
			<SizeTypeUnit units={ ['px', 'em', '%'] } value={ value } onClick={ ( value ) => setValue( value ) }/>
		</PanelBody>
	</InspectorControls>
}

GradientControl

支持 CSS 渐变，以便在至少两种或更多颜色之间显示平滑的颜色。

<GradientControl value={ value } onChange={ ( value ) => setAttributes({value: value}) } presetAllowed={true}/>

IconPickerControl

支持显示从 font awesome 到的所有图标，以便您可以选择按钮、列表项目符号、社交网络图标，以给客户留下第一印象。

const icons = {
	500px: {
		label: "500px",
		search: {
			terms: []
		},
		styles: ["brands"],
		svg: {
			brands: {
				path: "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"
			},
			viewBox: [0, 0, 448, 512]
		}
	},
	search: {
		label: "Ad",
		search: {
			terms: []
		},
		styles: ["solid"],
		svg: {
			solid: {
				path: ""M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z""
			},
			viewBox: [0, 0, 512, 512]
		}
	}
}
<IconPickerControl icons={icons} renderIcon={(icon) => {
		console.log(icon);
		return (
			// render your icon here
		)
	} }
	label={ __( 'Icon' ) }
	value={ value }
	onChange={ value => setAttributes( { value: value } ) }
/>
// renderIcon is optional, default icon will be render as svg

PaddingControl

为元素内容周围设置空间。有填充（顶部、右侧、底部、左侧）的设置。

const [ device, setDevice ] = useState( 'desktop' );

<PaddingControl
	value={ padding }
	label={__( 'Padding' )}
	onChange={ ( value ) => setAttributes({ padding: value } )}
	device={ device}
	onChangeDevice={ (value) => setDevice(value) } units={ [ 'px', 'em', '%' ] }
/>

MarginControl

设置元素每边的边距，带边框（顶部、右侧、底部和左侧）。

const [ device, setDevice ] = useState( 'desktop' );

<MarginControl
	value={ margin }
	label={__( 'Margin' )}
	onChange={ ( value ) => setAttributes({ margin: value } )}
	device={ device}
	onChangeDevice={ (value) => setDevice(value) } units={ [ 'px', 'em', '%' ] }
/>

HeadingControl

允许选择标题标签：h1、h2、h3、h4、h5、h6

<HeadingControl
	label={ __( 'Heading Tag' ) }
	value={ headingTag }
	onChange={ ( value ) => setAttributes( { headingTag: value } ) }
/>

RangeSlider

拖放数字，支持不同设备。

const [ device, setDevice ] = useState( 'desktop' );

<RangeSlider
	label={ __( 'Column Gap' ) }
	value={ marginBottom } min={ 1 }
	max={ 33 }
	onChange={ ( value ) => setAttributes( { marginBottom: value } ) }
	units={['px', 'em', '%']}
	min={0}
	max={100}
	device={device}
	onChangeDevice={ ( device ) => setDevice( device ) }
	allowReset
/>

BackgroundControl

选择正常和悬停。可以设置背景：颜色、渐变、视频和图片

const [ device, setDevice ] = useState( 'desktop' );

<BackgroundControl
	className="your-extra-class"
	label={ __( 'Background' ) }
	value={ background }
	allows={ [ 'color', 'gradient', 'image' ] }
	device={ gutengeek_device_mode }
	onChange={ value => setAttributes( { background: value } ) }
	onChangeDevice={ ( device ) => setDevice( device ) }
/>

Typography

字体大小、字体族、变体、字体样式、字体粗细、文本转换控制

const [ device, setDevice ] = useState( 'desktop' );

<Typography
	label={ __( 'Typography' ) }
	value={ headingTypo }
	onChange={ value => setAttributes( { headingTypo: value } ) }
	device={ gutengeek_device_mode }
	onChangeDevice={ value => setDevice(value) }
/>

AlignmentsControl

可以设置 CSS 中的文本对齐：居中、宽宽度、全宽度

<AlignmentsControl
	className="your-prefix"
	label={ __( 'Text Alignment' ) }
	device={ device }
	onChangeDevice={ ( device ) => setDevice( device ) }
	value={ value }
	onChange={ ( value ) => setAttributes( { value: value } ) }
	toggle={true}
	options={[
		{ label: __('Left'), value: 'left', text: __( 'Left' ) },
		{ label: __('Center'), value: 'center', text: __( 'Center' ) },
		{ label: text: __( 'Right' ), value: 'right', text: __( 'Right' ) },
	]}
/>

BorderControl

在 CSS 中启用/禁用边框，设置位置、宽度（px、em、%）、边框形状。

<BorderControl
	className="your-extra-class"
	title={ __( 'Border' ) }
	value={ value }
	onChangeDevice={ ( device ) => setDevice(device) }
	device={ device }
	onChange={ value => setValue( value ) }
	units={ [ 'px', 'em', '%' ] }
/>

BorderRadius

定义元素角落的 CSS 半径

<BorderRadiusControl
	className="your-extra-classs"
	label={ __( 'Border Radius' ) }
	units={ [ 'px', 'em', '%' ] }
	value={ value }
	responsive={ true }
	device={ device }
	onChangeDevice={ ( device ) => setDevice( device ) }
	min={ 0 }
	max={ 100 }
	onChange={ value => setAttributes( { value: value } ) }
/>

BoxShadowControl

在 CSS 中选择盒子阴影

const [ device, setDevice ] = useState( 'desktop' );

<BoxShadowControl
	value={ boxShadow } device={ device }
	unit='px'
	onChangeDevice={ ( device ) => setDevice( device ) }
	onChange={ value => setAttributes( { boxShadow: value } ) }
/>

TransformControl

所有 CSS 转换属性

const [ device, setDevice ] = useState( 'desktop' );

<TransformControl
	label={ __( 'Transform' ) }
	value={ transform }
	onChange={(value) => setAttributes( { transform: value } )}
	device={ device} onChangeDevice={ ( device ) => setDevice( device ) }
/>

ButtonGroupControl

启用/禁用按钮，类型，大小，启用/禁用排版，文本，链接（在新窗口中打开，在同一窗口中打开），边距和图标。仅悬停（启用/禁用），图标位置，图标间距

<ButtonGroupControl
	className="your-extra-class"
	label={ __( 'Button Position' ) }
	value={ position }
	options={ [
		{ value: 'left', label: <Dashicon icon="arrow-left"/>, text: __( 'Left' ) },
		{ value: 'right', label: <Dashicon icon="arrow-right"/>, text: __( 'Right' ) },
	] }
	toggle={ true }
	onClick={ ( value ) => setAttributes( { position: value } ) }
/>

Dimension

使用 CSS 中的 Top、Right、Bottom 和 Left 设置填充和边距，选项为 px、em、rem、%

<Dimension
	label={ __( 'Card Padding' ) }
	value={ cardPadding }
	device={ gutengeek_device_mode }
	min={ 0 }
	max={ 500 }
	onChangeDevice={ ( device ) => this.props.setDevice(device) }
	onChange={ value => setAttributes( { panelSpacing: value } ) }
/>

ParallaxControls

启用/禁用视差控制，事件类型，项目 #1（选择图片、宽度、高度、位置、速度、持续时间、索引）

<ParallaxControls parallax={parallax} onChange={(value) => setAttributes({ parallax: { ...parallax, ...value } })}/>

Color

从调色板中选择合适的颜色

<Color className="your-extra-class" label={ __( 'Color' ) } value={ color } onChange={ ( value ) => setAttributes( { color: value } ) }/>

媒体

上传媒体到库或导入媒体 URL。

<MediaControl
	label={ __( 'Select Image' ) } multiple={ false }
	type={ [ 'image', 'color', 'gradient', 'video' ] }
	value={ iconImg } panel={ true }
	onChange={ media => setAttributes( { iconImg: media } ) }
/>

TransitionControl

CSS 中的过渡效果属性控制

<TransitionControl value={ transition } onChange={(value) => setAttributes({ transition: value } )}/>

ResponsiveControl

选项：在桌面、平板电脑、手机上隐藏/启用

const [ device, setDevice ] = useState( 'desktop' );
const [ unit, setUnit ] = useState( 'px' );

<ResponsiveControl label={ label }
		device={ device }
		units={ [ 'px', 'em' ] }
		unit={ unit }
		onChangeSizeType={ ( value ) => setUnit( value ) }
		onChangeDevice={ ( value ) => setDevice( value ) }>
{
	( deviceMode ) => {
		return (
			// return your children component
		);
	}
}

InspectorTabs & InspectorTab

分割标签布局、样式、高级

<InspectorControls>
	<InspectorTabs tabs={[ 'layout', 'style', 'advanced' ]} active="advanced">
		<InspectorTab key="layout">
			// do something
		</InspectorTab>
		<InspectorTab key="style">
			// do something
		</InspectorTab>
		<InspectorTab key="advanced">
			// do something
		</InspectorTab>
	</InspectorTabs>
</InspectorControls>

标签 & 标签

分割标签悬停、活动状态

<Tabs tabs={[ { name: 'normal', label: __( 'Normal' ) }, { name: 'hover', label: __( 'Hover' ) } ]} onChange={(value) => setState( { state: value } )}>
	<Tab key="normal">
		// do something
	</Tab>
	<Tab key="hover">
		// do something
	</Tab>
</Tabs>

URL

URL 完整选项

// imageUrl: object
<URL
	label={ __( 'URL' ) }
	value={imageUrl}
	onChange={value => setAttributes({ imageUrl: value })}
/>