first commit
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
BaseControl,
|
||||
Placeholder,
|
||||
ToggleControl,
|
||||
TextControl,
|
||||
TextareaControl,
|
||||
SelectControl,
|
||||
RangeControl,
|
||||
PanelBody,
|
||||
Disabled,
|
||||
Notice,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
ColorPalette,
|
||||
} = wp.editor;
|
||||
/**
|
||||
* Add fields to Color Settings.
|
||||
*
|
||||
* @param {JSX} fields Original block.
|
||||
* @param {Object} props Block data.
|
||||
* @param {Object} config Block config.
|
||||
*
|
||||
* @return {JSX} Block.
|
||||
*/
|
||||
function setColorSettings(fields, props, config) {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isFieldVisible,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ ( isFieldVisible('color_heading', config, attributes) ) ? (
|
||||
<BaseControl
|
||||
label={__("Heading Color")}
|
||||
>
|
||||
{ <ColorPalette
|
||||
value={ attributes['color_heading'] || '' }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'color_heading': val });
|
||||
} }
|
||||
/> }
|
||||
</BaseControl>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('color_heading_hover', config, attributes) ) ? (
|
||||
<BaseControl
|
||||
label={__("Heading Hover Color")}
|
||||
>
|
||||
{ <ColorPalette
|
||||
value={ attributes['color_heading_hover'] || '' }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'color_heading_hover': val });
|
||||
} }
|
||||
/> }
|
||||
</BaseControl>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('color_caption', config, attributes) ) ? (
|
||||
<BaseControl
|
||||
label={__("Caption Color")}
|
||||
>
|
||||
{ <ColorPalette
|
||||
value={ attributes['color_caption'] || '' }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'color_caption': val });
|
||||
} }
|
||||
/> }
|
||||
</BaseControl>
|
||||
) : ( null ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
addFilter('sight.colorSettings.fields', 'sight/colorSettings/set/fields', setColorSettings, 10);
|
||||
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
BaseControl,
|
||||
Placeholder,
|
||||
ToggleControl,
|
||||
TextControl,
|
||||
TextareaControl,
|
||||
SelectControl,
|
||||
RangeControl,
|
||||
PanelBody,
|
||||
Disabled,
|
||||
Notice,
|
||||
} = wp.components;
|
||||
|
||||
/**
|
||||
* Add fields to Media Settings.
|
||||
*
|
||||
* @param {JSX} fields Original block.
|
||||
* @param {Object} props Block data.
|
||||
* @param {Object} config Block config.
|
||||
*
|
||||
* @return {JSX} Block.
|
||||
*/
|
||||
function setMediaSettings(fields, props, config) {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isFieldVisible,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ ( isFieldVisible('attachment_lightbox', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Enable lightbox")}
|
||||
checked={ attributes['attachment_lightbox'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'attachment_lightbox': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('attachment_lightbox_icon', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Display lightbox zoom icon")}
|
||||
checked={ attributes['attachment_lightbox_icon'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'attachment_lightbox_icon': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('attachment_link_to', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Link To")}
|
||||
value={ attributes['attachment_link_to'] }
|
||||
options={
|
||||
( 'categories' === attributes['source'] && ! config.archive ) ? [
|
||||
{ value: 'none', label: __('None') },
|
||||
{ value: 'media', label: __('Media File') },
|
||||
] : [
|
||||
{ value: 'none', label: __('None') },
|
||||
{ value: 'media', label: __('Media File') },
|
||||
{ value: 'page', label: __('Page') },
|
||||
]
|
||||
}
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'attachment_link_to': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('attachment_view_more', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Enable view more")}
|
||||
checked={ attributes['attachment_view_more'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'attachment_view_more': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('attachment_size', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Size")}
|
||||
value={ attributes['attachment_size'] }
|
||||
options={ config.image_sizes }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'attachment_size': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('attachment_orientation', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Orientation")}
|
||||
value={ attributes['attachment_orientation'] }
|
||||
options={
|
||||
[
|
||||
{ value: 'original', label: __('Original') },
|
||||
{ value: 'landscape-4-3', label: __('Landscape 4:3') },
|
||||
{ value: 'landscape-3-2', label: __('Landscape 3:2') },
|
||||
{ value: 'landscape-16-9', label: __('Landscape 16:9') },
|
||||
{ value: 'portrait-3-4', label: __('Portrait 3:4') },
|
||||
{ value: 'portrait-2-3', label: __('Portrait 2:3') },
|
||||
{ value: 'square', label: __('Square') },
|
||||
]
|
||||
}
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'attachment_orientation': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
addFilter('sight.mediaSettings.fields', 'sight/mediaSettings/set/fields', setMediaSettings, 10);
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
ToggleControl,
|
||||
RangeControl,
|
||||
} = wp.components;
|
||||
|
||||
|
||||
/**
|
||||
* Add fields to Meta Settings.
|
||||
*
|
||||
* @param {JSX} fields Original block.
|
||||
* @param {Object} props Block data.
|
||||
* @param {Object} config Block config.
|
||||
*
|
||||
* @return {JSX} Block.
|
||||
*/
|
||||
function setMetaSettings(fields, props, config) {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isFieldVisible,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ ( isFieldVisible('meta_title', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Display item title")}
|
||||
checked={ attributes['meta_title'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'meta_title': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('meta_caption', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Display item caption")}
|
||||
checked={ attributes['meta_caption'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'meta_caption': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('meta_caption_length', config, attributes) ) ? (
|
||||
<RangeControl
|
||||
label={__("Caption length")}
|
||||
value={ attributes['meta_caption_length'] }
|
||||
min={ 1 }
|
||||
max={ 1000 }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'meta_caption_length': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('meta_category', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Display meta category")}
|
||||
checked={ attributes['meta_category'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'meta_category': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('meta_date', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Display meta date")}
|
||||
checked={ attributes['meta_date'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'meta_date': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
addFilter('sight.metaSettings.fields', 'sight/metaSettings/set/fields', setMetaSettings, 10);
|
||||
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* Components dependencies
|
||||
*/
|
||||
import ReactSelectControl from '../components/react-select-control';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
BaseControl,
|
||||
Placeholder,
|
||||
ToggleControl,
|
||||
TextControl,
|
||||
TextareaControl,
|
||||
SelectControl,
|
||||
RangeControl,
|
||||
PanelBody,
|
||||
Disabled,
|
||||
Notice,
|
||||
} = wp.components;
|
||||
|
||||
/**
|
||||
* Add fields to Query Settings.
|
||||
*
|
||||
* @param {JSX} fields Original block.
|
||||
* @param {Object} props Block data.
|
||||
* @param {Object} config Block config.
|
||||
*
|
||||
* @return {JSX} Block.
|
||||
*/
|
||||
function setQuerySettings(fields, props, config) {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isFieldVisible,
|
||||
} = props;
|
||||
|
||||
if ( 'projects' !== attributes['source'] && 'categories' !== attributes['source'] ) {
|
||||
return fields;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ ( isFieldVisible('projects_filter_post_type', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Filter by Post Type")}
|
||||
value={ attributes['projects_filter_post_type'] }
|
||||
options={ config.post_types_stack }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'projects_filter_post_type': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('projects_filter_categories', config, attributes) ) ? (
|
||||
<ReactSelectControl
|
||||
label={__("Filter by Categories")}
|
||||
isMulti={ true }
|
||||
val={ attributes['projects_filter_categories'] }
|
||||
options={ config.categories_stack }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'projects_filter_categories': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('projects_filter_offset', config, attributes) ) ? (
|
||||
<TextControl
|
||||
label={__("Offset")}
|
||||
value={ attributes['projects_filter_offset'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'projects_filter_offset': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('projects_orderby', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Order By")}
|
||||
value={ attributes['projects_orderby'] }
|
||||
options={
|
||||
[
|
||||
{ value: 'date', label: __('Published Date') },
|
||||
{ value: 'modified', label: __('Modified Date') },
|
||||
{ value: 'title', label: __('Title') },
|
||||
{ value: 'rand', label: __('Random') },
|
||||
{ value: 'views', label: __('Views') },
|
||||
{ value: 'comment_count', label: __('Comment Count') },
|
||||
{ value: 'ID', label: __('ID') },
|
||||
]
|
||||
}
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'projects_orderby': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('projects_order', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Order")}
|
||||
value={ attributes['projects_order'] }
|
||||
options={
|
||||
[
|
||||
{ value: 'DESC', label: __('Descending') },
|
||||
{ value: 'ASC', label: __('Ascending') },
|
||||
]
|
||||
}
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'projects_order': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('categories_filter_ids', config, attributes) ) ? (
|
||||
<ReactSelectControl
|
||||
label={__("Filter by Categories")}
|
||||
isMulti={ true }
|
||||
val={ attributes['categories_filter_ids'] }
|
||||
options={ config.categories_stack }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'categories_filter_ids': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('categories_orderby', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Order By")}
|
||||
value={ attributes['categories_orderby'] }
|
||||
options={
|
||||
[
|
||||
{ value: 'name', label: __('Name') },
|
||||
{ value: 'count', label: __('Posts count') },
|
||||
{ value: 'include', label: __('Filter include') },
|
||||
{ value: 'id', label: __('ID') },
|
||||
]
|
||||
}
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'categories_orderby': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('categories_order', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Order")}
|
||||
value={ attributes['categories_order'] }
|
||||
options={
|
||||
[
|
||||
{ value: 'DESC', label: __('Descending') },
|
||||
{ value: 'ASC', label: __('Ascending') },
|
||||
]
|
||||
}
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'categories_order': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
addFilter('sight.querySettings.fields', 'sight/querySettings/set/fields', setQuerySettings, 10);
|
||||
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* Components dependencies
|
||||
*/
|
||||
import PostsSelectorControl from '../components/posts-selector-control';
|
||||
import GalleryControl from '../components/gallery-control';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style-panel-settings.scss';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
ToggleControl,
|
||||
SelectControl,
|
||||
RangeControl,
|
||||
} = wp.components;
|
||||
|
||||
/**
|
||||
* Add fields to Block Settings.
|
||||
*
|
||||
* @param {JSX} fields Original block.
|
||||
* @param {Object} props Block data.
|
||||
* @param {Object} config Block config.
|
||||
*
|
||||
* @return {JSX} Block.
|
||||
*/
|
||||
function setBlockSettings(fields, props, config) {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isFieldVisible,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ ( isFieldVisible('source', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Source")}
|
||||
value={attributes['source']}
|
||||
options={
|
||||
[
|
||||
{ value: 'projects', label: __('Projects') },
|
||||
{ value: 'custom', label: __('Images') },
|
||||
{ value: 'categories', label: __('Categories') },
|
||||
{ value: 'post', label: __('Post Attachments') },
|
||||
]
|
||||
}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'source': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
|
||||
{/* Type Projects */}
|
||||
|
||||
{ ( isFieldVisible('video', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Video Background")}
|
||||
value={attributes['video']}
|
||||
options={
|
||||
[
|
||||
{ value: 'none', label: __('None') },
|
||||
{ value: 'always', label: __('Always') },
|
||||
{ value: 'hover', label: __('On Hover') },
|
||||
]
|
||||
}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'video': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('video_controls', config, attributes) ) ? (
|
||||
<ToggleControl
|
||||
label={__("Enable video controls")}
|
||||
checked={attributes['video_controls']}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'video_controls': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{/* Post */}
|
||||
|
||||
{ ( isFieldVisible('custom_post', config, attributes) ) ? (
|
||||
<PostsSelectorControl
|
||||
label={__("Post")}
|
||||
isMulti={true}
|
||||
value={attributes['custom_post']}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'custom_post': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
|
||||
{/* Type Custom */}
|
||||
|
||||
{ ( isFieldVisible('custom_images', config, attributes) ) ? (
|
||||
<GalleryControl
|
||||
label={__("Images")}
|
||||
val={attributes['custom_images']}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'custom_images': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{/* Common end */}
|
||||
|
||||
{ ( isFieldVisible('number_items', config, attributes) ) ? (
|
||||
<RangeControl
|
||||
label={__("Number of Items")}
|
||||
value={attributes['number_items']}
|
||||
min={1}
|
||||
max={100}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'number_items': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
addFilter('sight.blockSettings.fields', 'sight/blockSettings/set/fields', setBlockSettings, 10);
|
||||
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* Components dependencies
|
||||
*/
|
||||
import DimensionControl from '../components/dimension-control';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
BaseControl,
|
||||
Placeholder,
|
||||
ToggleControl,
|
||||
TextControl,
|
||||
TextareaControl,
|
||||
SelectControl,
|
||||
RangeControl,
|
||||
PanelBody,
|
||||
Disabled,
|
||||
Notice,
|
||||
} = wp.components;
|
||||
/**
|
||||
* Add fields to Typography Settings.
|
||||
*
|
||||
* @param {JSX} fields Original block.
|
||||
* @param {Object} props Block data.
|
||||
* @param {Object} config Block config.
|
||||
*
|
||||
* @return {JSX} Block.
|
||||
*/
|
||||
function setTypographySettings(fields, props, config) {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
isFieldVisible,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ ( isFieldVisible('typography_heading', config, attributes) ) ? (
|
||||
<DimensionControl
|
||||
label={__("Heading Font Size")}
|
||||
value={ attributes['typography_heading'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'typography_heading': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('typography_heading_tag', config, attributes) ) ? (
|
||||
<SelectControl
|
||||
label={__("Heading Tag")}
|
||||
value={attributes['typography_heading_tag']}
|
||||
options={
|
||||
[
|
||||
{ value: 'h1', label: __('H1') },
|
||||
{ value: 'h2', label: __('H2') },
|
||||
{ value: 'h3', label: __('H3') },
|
||||
{ value: 'h4', label: __('H4') },
|
||||
{ value: 'h5', label: __('H5') },
|
||||
{ value: 'h6', label: __('H6') },
|
||||
{ value: 'p', label: __('P') },
|
||||
{ value: 'div', label: __('DIV') },
|
||||
]
|
||||
}
|
||||
onChange={function (val) {
|
||||
setAttributes({ 'typography_heading_tag': val });
|
||||
}}
|
||||
/>
|
||||
) : ( null ) }
|
||||
|
||||
{ ( isFieldVisible('typography_caption', config, attributes) ) ? (
|
||||
<DimensionControl
|
||||
label={__("Caption Font Size")}
|
||||
value={ attributes['typography_caption'] }
|
||||
onChange={ function(val){
|
||||
setAttributes({ 'typography_caption': val });
|
||||
} }
|
||||
/>
|
||||
) : ( null ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
addFilter('sight.typographySettings.fields', 'sight/typographySettings/set/fields', setTypographySettings, 10);
|
||||
Reference in New Issue
Block a user