first
This commit is contained in:
@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "visual-portfolio/block",
|
||||
"category": "media",
|
||||
"title": "Visual Portfolio",
|
||||
"description": "Display galleries, posts and portfolio grids.",
|
||||
"keywords": ["gallery", "images", "posts", "portfolio", "vpf"],
|
||||
"textdomain": "visual-portfolio",
|
||||
"supports": {
|
||||
"ghostkit": true,
|
||||
"anchor": true,
|
||||
"className": false,
|
||||
"html": false,
|
||||
"align": ["wide", "full"]
|
||||
}
|
||||
}
|
@ -0,0 +1,124 @@
|
||||
import save from './save';
|
||||
|
||||
const { attributes } = window.VPGutenbergVariables;
|
||||
|
||||
const V2_23_0_ATTRIBUTES = {
|
||||
// Align.
|
||||
items_style_default__align: 'items_style_default__caption_text_align',
|
||||
items_style_fade__align: 'items_style_fade__overlay_text_align',
|
||||
items_style_fly__align: 'items_style_fly__overlay_text_align',
|
||||
items_style_emerge__align: 'items_style_emerge__caption_text_align',
|
||||
items_style_caption_move__align:
|
||||
'items_style_caption_move__caption_text_align',
|
||||
|
||||
// Color.
|
||||
items_style_default__bg_color: 'items_style_default__overlay_bg_color',
|
||||
items_style_default__text_color: 'items_style_default__overlay_text_color',
|
||||
items_style_default__meta_text_color:
|
||||
'items_style_default__caption_text_color',
|
||||
items_style_default__meta_links_color:
|
||||
'items_style_default__caption_links_color',
|
||||
items_style_default__meta_links_hover_color:
|
||||
'items_style_default__caption_links_hover_color',
|
||||
items_style_fade__bg_color: 'items_style_fade__overlay_bg_color',
|
||||
items_style_fade__text_color: 'items_style_fade__overlay_text_color',
|
||||
items_style_fly__bg_color: 'items_style_fly__overlay_bg_color',
|
||||
items_style_fly__text_color: 'items_style_fly__overlay_text_color',
|
||||
items_style_emerge__bg_color: 'items_style_emerge__caption_bg_color',
|
||||
items_style_emerge__text_color: 'items_style_emerge__caption_text_color',
|
||||
items_style_emerge__links_color: 'items_style_emerge__caption_links_color',
|
||||
items_style_emerge__links_hover_color:
|
||||
'items_style_emerge__caption_links_hover_color',
|
||||
items_style_emerge__img_overlay_bg_color:
|
||||
'items_style_emerge__overlay_bg_color',
|
||||
'items_style_caption-move__bg_color':
|
||||
'items_style_caption-move__caption_bg_color',
|
||||
'items_style_caption-move__text_color':
|
||||
'items_style_caption-move__caption_text_color',
|
||||
'items_style_caption-move__img_overlay_bg_color':
|
||||
'items_style_caption-move__overlay_bg_color',
|
||||
'items_style_caption-move__overlay_text_color':
|
||||
'items_style_caption-move__overlay_text_color',
|
||||
|
||||
// Move Under Image.
|
||||
items_style_fade__move_overlay_under_image:
|
||||
'items_style_fade__overlay_under_image',
|
||||
items_style_fly__move_overlay_under_image:
|
||||
'items_style_fly__overlay_under_image',
|
||||
items_style_emerge__move_overlay_under_image:
|
||||
'items_style_emerge__caption_under_image',
|
||||
'items_style_caption-move__move_overlay_under_image':
|
||||
'items_style_caption-move__caption_under_image',
|
||||
};
|
||||
|
||||
const V2_23_0_BORDER_RADIUS = [
|
||||
'items_style_default__images_rounded_corners',
|
||||
'items_style_fade__images_rounded_corners',
|
||||
'items_style_fly__images_rounded_corners',
|
||||
'items_style_emerge__images_rounded_corners',
|
||||
'items_style_caption_move__images_rounded_corners',
|
||||
];
|
||||
|
||||
export default [
|
||||
// v3.0.0
|
||||
// Changed items style builtin_controls structure.
|
||||
{
|
||||
attributes: {
|
||||
...attributes,
|
||||
...(() => {
|
||||
const attrs = {};
|
||||
Object.keys(V2_23_0_ATTRIBUTES).forEach((k) => {
|
||||
attrs[k] = { type: 'string' };
|
||||
});
|
||||
return attrs;
|
||||
})(),
|
||||
...(() => {
|
||||
const attrs = {};
|
||||
V2_23_0_BORDER_RADIUS.forEach((k) => {
|
||||
attrs[k] = { type: 'number', default: 0 };
|
||||
});
|
||||
return attrs;
|
||||
})(),
|
||||
},
|
||||
migrate(oldAttributes) {
|
||||
const newAttributes = { ...oldAttributes };
|
||||
|
||||
Object.keys(V2_23_0_ATTRIBUTES).forEach((k) => {
|
||||
if (k in newAttributes) {
|
||||
if (newAttributes[k]) {
|
||||
newAttributes[V2_23_0_ATTRIBUTES[k]] = newAttributes[k];
|
||||
}
|
||||
|
||||
delete newAttributes[k];
|
||||
}
|
||||
});
|
||||
|
||||
V2_23_0_BORDER_RADIUS.forEach((k) => {
|
||||
if (typeof newAttributes[k] === 'number') {
|
||||
newAttributes[k] = `${newAttributes[k]}px`;
|
||||
}
|
||||
});
|
||||
|
||||
return [newAttributes, []];
|
||||
},
|
||||
isEligible(attrs) {
|
||||
const keys = Object.keys(V2_23_0_ATTRIBUTES);
|
||||
let eligible = false;
|
||||
|
||||
keys.forEach((key) => {
|
||||
if (!eligible && key in attrs) {
|
||||
eligible = true;
|
||||
}
|
||||
});
|
||||
|
||||
V2_23_0_BORDER_RADIUS.forEach((k) => {
|
||||
if (!eligible && typeof attrs[k] === 'number') {
|
||||
eligible = true;
|
||||
}
|
||||
});
|
||||
|
||||
return eligible;
|
||||
},
|
||||
save,
|
||||
},
|
||||
];
|
103
wp-content/plugins/visual-portfolio/gutenberg/block/edit.js
Normal file
103
wp-content/plugins/visual-portfolio/gutenberg/block/edit.js
Normal file
@ -0,0 +1,103 @@
|
||||
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
|
||||
import ControlsRender from '../components/controls-render';
|
||||
import IframePreview from '../components/iframe-preview';
|
||||
import SetupWizard from '../components/setup-wizard';
|
||||
|
||||
const {
|
||||
plugin_url: pluginUrl,
|
||||
controls_categories: registeredControlsCategories,
|
||||
} = window.VPGutenbergVariables;
|
||||
|
||||
function renderControls(props) {
|
||||
const { attributes } = props;
|
||||
|
||||
let { content_source: contentSource } = attributes;
|
||||
|
||||
// Saved layouts by default displaying Portfolio source.
|
||||
if (contentSource === 'portfolio') {
|
||||
contentSource = '';
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ControlsRender category="content-source" {...props} />
|
||||
|
||||
{/* Display all settings once selected Content Source */}
|
||||
{contentSource ? (
|
||||
<>
|
||||
{Object.keys(registeredControlsCategories).map((name) => {
|
||||
if (name === 'content-source') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ControlsRender
|
||||
key={name}
|
||||
category={name}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Edit Class.
|
||||
*
|
||||
* @param props
|
||||
*/
|
||||
export default function BlockEdit(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
|
||||
const {
|
||||
block_id: blockId,
|
||||
content_source: contentSource,
|
||||
setup_wizard: setupWizard,
|
||||
preview_image_example: previewExample,
|
||||
layout,
|
||||
} = attributes;
|
||||
|
||||
// Display setup wizard on mount.
|
||||
useEffect(() => {
|
||||
if (!setupWizard && (!blockId || !contentSource)) {
|
||||
setAttributes({
|
||||
setup_wizard: 'true',
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Display block preview.
|
||||
if (previewExample === 'true') {
|
||||
return (
|
||||
<div className="vpf-example-preview">
|
||||
<img
|
||||
src={`${pluginUrl}/assets/admin/images/example-${layout}.png`}
|
||||
alt={`Preview of ${layout} layout`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
{setupWizard === 'true' ? (
|
||||
<SetupWizard {...props} />
|
||||
) : (
|
||||
<>
|
||||
<InspectorControls>
|
||||
{renderControls(props)}
|
||||
</InspectorControls>
|
||||
<IframePreview {...props} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
32
wp-content/plugins/visual-portfolio/gutenberg/block/index.js
Normal file
32
wp-content/plugins/visual-portfolio/gutenberg/block/index.js
Normal file
@ -0,0 +1,32 @@
|
||||
import './style.scss';
|
||||
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
import { ReactComponent as ElementIcon } from '../../assets/admin/images/icon-gutenberg.svg';
|
||||
import metadata from './block.json';
|
||||
import deprecated from './deprecated';
|
||||
import edit from './edit';
|
||||
import save from './save';
|
||||
import transforms from './transforms';
|
||||
import variations from './variations';
|
||||
|
||||
const { name } = metadata;
|
||||
|
||||
const settings = {
|
||||
icon: {
|
||||
foreground: '#2540CC',
|
||||
src: <ElementIcon width="20" height="20" />,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
preview_image_example: 'true',
|
||||
},
|
||||
},
|
||||
variations,
|
||||
edit,
|
||||
save,
|
||||
transforms,
|
||||
deprecated,
|
||||
};
|
||||
|
||||
registerBlockType(name, settings);
|
@ -0,0 +1,3 @@
|
||||
export default function BlockSave() {
|
||||
return null;
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
// Block preview example.
|
||||
.vpf-example-preview {
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
@ -0,0 +1,113 @@
|
||||
import { createBlock } from '@wordpress/blocks';
|
||||
|
||||
export default {
|
||||
from: [
|
||||
// Transform from default Gallery block.
|
||||
{
|
||||
type: 'block',
|
||||
blocks: ['core/gallery'],
|
||||
isMatch(attributes, blockData) {
|
||||
return (
|
||||
(blockData &&
|
||||
blockData.innerBlocks &&
|
||||
blockData.innerBlocks.length) ||
|
||||
(attributes &&
|
||||
attributes.images &&
|
||||
attributes.images.length)
|
||||
);
|
||||
},
|
||||
transform(attributes, innerBlocks) {
|
||||
const { className } = attributes;
|
||||
|
||||
// New gallery since WordPress 5.9
|
||||
const isNewGallery = innerBlocks && innerBlocks.length;
|
||||
let images = [];
|
||||
|
||||
if (isNewGallery) {
|
||||
images = innerBlocks.map((img) => ({
|
||||
id: parseInt(img.attributes.id, 10),
|
||||
imgUrl: img.attributes.url,
|
||||
imgThumbnailUrl: img.attributes.url,
|
||||
title: img.attributes.caption,
|
||||
url:
|
||||
(img.attributes.linkDestination === 'custom' ||
|
||||
img.attributes.linkDestination ===
|
||||
'attachment') &&
|
||||
img.attributes.href
|
||||
? img.attributes.href
|
||||
: '',
|
||||
}));
|
||||
} else {
|
||||
images = attributes.images.map((img) => ({
|
||||
id: parseInt(img.id, 10),
|
||||
imgUrl: img.fullUrl,
|
||||
imgThumbnailUrl: img.url,
|
||||
title: img.caption,
|
||||
}));
|
||||
}
|
||||
|
||||
return createBlock('visual-portfolio/block', {
|
||||
setup_wizard: 'false',
|
||||
content_source: 'images',
|
||||
items_count: -1,
|
||||
layout: 'masonry',
|
||||
items_style_fly__align: 'bottom-center',
|
||||
masonry_columns: parseInt(attributes.columns, 10) || 3,
|
||||
items_click_action:
|
||||
attributes.linkTo === 'none' && !isNewGallery
|
||||
? 'false'
|
||||
: 'url',
|
||||
images,
|
||||
className,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
// Transform from default Latest Posts block.
|
||||
{
|
||||
type: 'block',
|
||||
blocks: ['core/latest-posts'],
|
||||
transform(attributes) {
|
||||
const {
|
||||
className,
|
||||
postLayout,
|
||||
columns = 3,
|
||||
postsToShow = 6,
|
||||
displayPostContent,
|
||||
displayPostContentRadio,
|
||||
excerptLength,
|
||||
displayPostDate,
|
||||
orderBy = 'date',
|
||||
order = 'desc',
|
||||
categories,
|
||||
} = attributes;
|
||||
|
||||
return createBlock('visual-portfolio/block', {
|
||||
content_source: 'post-based',
|
||||
posts_source: 'post',
|
||||
posts_order_by: orderBy,
|
||||
posts_order_direction: order,
|
||||
posts_taxonomies: categories ? [categories] : false,
|
||||
items_count: postsToShow,
|
||||
layout: 'grid',
|
||||
grid_columns: postLayout === 'grid' ? columns : 1,
|
||||
items_style: 'default',
|
||||
items_style_default__show_categories: false,
|
||||
items_style_default__show_date: displayPostDate
|
||||
? 'true'
|
||||
: 'false',
|
||||
items_style_default__show_excerpt: displayPostContent,
|
||||
items_style_default__excerpt_words_count:
|
||||
displayPostContentRadio === 'full_post'
|
||||
? 100
|
||||
: excerptLength,
|
||||
items_style_default__align: 'left',
|
||||
items_style_default__show_read_more: displayPostContent
|
||||
? 'true'
|
||||
: 'false',
|
||||
className,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
@ -0,0 +1,22 @@
|
||||
import { RawHTML } from '@wordpress/element';
|
||||
|
||||
const { controls: registeredControls } = window.VPGutenbergVariables;
|
||||
|
||||
export default Object.keys(registeredControls.layout.options).map((name) => {
|
||||
const data = registeredControls.layout.options[name];
|
||||
|
||||
return {
|
||||
// If we don't set the isDefault, our main block will be visible in inserter.
|
||||
// Sometimes users requested this as they are confused it first start.
|
||||
// isDefault: registeredControls.layout.default === data.value,
|
||||
name: data.value,
|
||||
attributes: { layout: data.value },
|
||||
title: data.title,
|
||||
icon: data.icon
|
||||
? {
|
||||
foreground: '#2540CC',
|
||||
src: <RawHTML>{data.icon}</RawHTML>,
|
||||
}
|
||||
: null,
|
||||
};
|
||||
}) || [];
|
Reference in New Issue
Block a user