47 | {this.props.children}
48 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/assets/fa-icons/tiktok.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/blocks/block-heading/components/subheading-toolbar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | const { __ } = wp.i18n;
5 | const { ToolbarGroup, ToolbarButton } = wp.components;
6 |
7 | import Icon from '../../../../assets/icon-c9-subheading-enable-toolbar-icon';
8 |
9 | /**
10 | * Control Settings
11 | */
12 | const DEFAULT_ENABLE_CONTROLS = [
13 | {
14 | icon: Icon,
15 | title: __('Enable Subheading', 'c9-blocks'),
16 | enabled: true,
17 | },
18 | ];
19 |
20 | /**
21 | * Create an Subheading Toolbar wrapper Component
22 | */
23 | export function SubheadingToolbar({
24 | value,
25 | onChange,
26 | enableControls = DEFAULT_ENABLE_CONTROLS,
27 | }) {
28 | function applyOrUnset(enabled) {
29 | return () => onChange(value === enabled ? false : enabled);
30 | }
31 |
32 | return (
33 |
23 |
38 |
24 | .c9-grid .block-editor-block-list__block:not(.wp-block-separator):not(.rich-text) {margin-top: 0px; margin-bottom: 0px;}',
32 | },
33 | ]}
34 | blocks={item}
35 | />
36 |
37 |
41 |
79 | );
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/dist/blocks.frontend.build.js:
--------------------------------------------------------------------------------
1 | /*! For license information please see blocks.frontend.build.js.LICENSE.txt */
2 | !function(){var e={1198:function(){function e(e,t,o){var a=o("#".concat(e)),r=a.attr("style"),n=o(''));n.on("load",(function(){this.parentNode.parentNode.style.opacity=1})),a.replaceWith(n)}function t(e,r){if(YT&&YT.Player)new YT.Player(e,{playerVars:{autoplay:1,controls:0,disablekb:0,autohide:1,wmode:"opaque",hd:1,enablejsapi:1,loop:1,showinfo:0,iv_load_policy:3,rel:0,modestbranding:1,playlist:r},videoId:r,events:{onReady:o,onError:a}});else setTimeout((function(){t(e,r)}),100)}function o(e){e.target.mute(),e.target.playVideo(),e.target.getIframe().parentNode.parentNode.style.opacity=1}function a(e){console.log("The YouTube IFrame Player API fired an onError event with error code: "+e.data);var t=e.target.getIframe();t.parentNode.parentNode.style.opacity=0,t.parentNode.parentNode.style.transition="300ms",t.parentNode.parentNode.dataset.c9VideoContainerError=e.data}document.addEventListener("DOMContentLoaded",(function(){for(var o="true"===c9_blocks_params.disable_youtube_api,a=window.jQuery,r=document.getElementsByClassName("c9-video"),n=0;n-
48 | {tabsData.map((tabData) => {
49 | const { slug, title } = tabData;
50 | const selected = tabActive === slug;
51 | return (
52 |
-
53 |
66 |
67 | );
68 | })}
69 |
76 |
78 |
45 |
89 | );
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/assets/tab-icons.js:
--------------------------------------------------------------------------------
1 | const tabIcons = {
2 | horizontal: (
3 |
36 | ),
37 | vertical: (
38 |
78 | ),
79 | };
80 |
81 | export default tabIcons;
82 |
--------------------------------------------------------------------------------
/src/blocks/block-carousel/save.js:
--------------------------------------------------------------------------------
1 | import ResizableCarouselContainer from './components/resizable-carousel-container';
2 |
3 | /**
4 | * External Dependencies.
5 | */
6 | import classnames from 'classnames';
7 |
8 | /**
9 | * WordPress dependencies
10 | */
11 | const { Component, Fragment } = wp.element;
12 | const { InnerBlocks } = wp.blockEditor;
13 |
14 | export default class Save extends Component {
15 | constructor() {
16 | super(...arguments);
17 | }
18 |
19 | /**
20 | * Returns the indicators layout configuration for a given amount of tabs.
21 | *
22 | * @param {number} slides Amount of indicators to create.
23 | * @param {number} id Instance Id of this carousel block.
24 | *
25 | * @return {Object[]} Indicators layout configuration.
26 | */
27 | createIndicators(slides, id) {
28 | let indicators = [];
29 | for (let i = 0; i < slides; i++) {
30 | indicators.push(
31 |
37 | );
38 | }
39 |
40 | return indicators;
41 | }
42 |
43 | render() {
44 | const { showIndicators, slides, showControls, instanceId, verticalAlign } =
45 | this.props.attributes;
46 |
47 | return (
48 |
46 |
75 |
53 | {tabsData.map((tabData) => {
54 | const { slug, title } = tabData;
55 | const selected = tabActive === slug;
56 | return (
57 |
74 |
76 |
88 |
85 |
87 | -
51 | {this.createIndicators(slides, instanceId)}
52 |
60 |
62 | {showControls && (
63 | -
51 | {this.createIndicators(slides, instanceId)}
52 |
60 |
62 | {showControls && (
63 | -
51 | {this.createIndicators(slides, instanceId)}
52 |
60 |
62 | {showControls && (
63 | {
77 | if (0 == display) {
78 | return `${type}${tag}`;
79 | } else {
80 | return `${type}${display}`;
81 | }
82 | })(type, displayLevel, tagLevel)}
83 | >
84 |
85 | {subheading.startsWith(' ')
86 | ? subheading
87 | : ' ' + subheading}
88 |
89 |
90 | )}
91 | 
7 | ),
8 | title: 'Inform Map Embed Focus',
9 | description: 'Address • Map Embed Code • Button Link',
10 | markup: `
11 |
12 |
35 |
36 | `,
37 | };
38 |
--------------------------------------------------------------------------------
/src/blocks/block-column-container/attributes.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Block Attributes
3 | */
4 | const attributes = {
5 | align: {
6 | type: 'string',
7 | default: '',
8 | },
9 | columns: {
10 | type: 'number',
11 | },
12 | columnMaxWidth: {
13 | type: 'number',
14 | },
15 | centerColumns: {
16 | type: 'boolean',
17 | default: true,
18 | },
19 | columnsGap: {
20 | type: 'number',
21 | default: 2,
22 | },
23 | responsiveToggle: {
24 | type: 'boolean',
25 | default: true,
26 | },
27 | layout: {
28 | type: 'string',
29 | },
30 | containerWidth: {
31 | type: 'string',
32 | default: 'container',
33 | },
34 | verticalAlign: {
35 | type: 'string',
36 | },
37 | containerImgURL: {
38 | type: 'string',
39 | },
40 | bgImgSize: {
41 | type: 'string',
42 | default: 'cover',
43 | },
44 | bgCustomX: {
45 | type: 'object',
46 | default: {
47 | size: 'auto',
48 | unit: 'px',
49 | },
50 | },
51 | bgCustomY: {
52 | type: 'object',
53 | default: {
54 | size: 'auto',
55 | unit: 'px',
56 | },
57 | },
58 | bgImgRepeat: {
59 | type: 'string',
60 | default: 'no-repeat',
61 | },
62 | // true evaluates to backgroundAttachment scroll, false to fixed
63 | bgImgAttach: {
64 | type: 'boolean',
65 | default: false,
66 | },
67 | overlayHue: {
68 | type: 'string',
69 | default: undefined,
70 | },
71 | overlayOpacity: {
72 | type: 'number',
73 | default: 10,
74 | },
75 | blendMode: {
76 | type: 'string',
77 | default: 'normal',
78 | },
79 | linkedValToggle: {
80 | type: 'boolean',
81 | default: true,
82 | },
83 | minScreenHeight: {
84 | type: 'number',
85 | default: 10,
86 | },
87 | containerMargin: {
88 | type: 'object',
89 | default: {
90 | linked: true,
91 | icon: 'admin-links',
92 | top: '-1',
93 | bottom: '-1',
94 | },
95 | },
96 | containerPadding: {
97 | type: 'object',
98 | default: {
99 | linked: true,
100 | icon: 'admin-links',
101 | top: '-1',
102 | bottom: '-1',
103 | left: '-1',
104 | right: '-1',
105 | },
106 | },
107 | containerHue: {
108 | type: 'string',
109 | default: undefined,
110 | },
111 | containerOpacity: {
112 | type: 'number',
113 | default: 10,
114 | },
115 | focalPoint: {
116 | type: 'object',
117 | default: {
118 | x: 0.5,
119 | y: 0.5,
120 | },
121 | },
122 | bgImgSizeMobile: {
123 | type: 'string',
124 | default: 'cover',
125 | },
126 | focalPointMobile: {
127 | type: 'object',
128 | default: {
129 | x: 0.5,
130 | y: 0.5,
131 | },
132 | },
133 | overrideMobile: {
134 | type: 'boolean',
135 | default: false,
136 | },
137 | bgCustomXMobile: {
138 | type: 'object',
139 | default: {
140 | size: 'auto',
141 | unit: 'px',
142 | },
143 | },
144 | bgCustomYMobile: {
145 | type: 'object',
146 | default: {
147 | size: 'auto',
148 | unit: 'px',
149 | },
150 | },
151 | flipColumnsMobile: {
152 | type: 'boolean',
153 | default: false,
154 | },
155 | };
156 |
157 | export default attributes;
158 |
--------------------------------------------------------------------------------
/src/blocks/block-cta/attributes.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Block Attributes
3 | */
4 |
5 | const attributes = {
6 | type: {
7 | type: 'string',
8 | value: 'c9-p',
9 | },
10 | buttonText: {
11 | type: 'string',
12 | },
13 | buttonUrl: {
14 | type: 'string',
15 | source: 'attribute',
16 | selector: 'a',
17 | attribute: 'href',
18 | },
19 | buttonAlignment: {
20 | type: 'string',
21 | default: 'left',
22 | },
23 | buttonBackgroundColor: {
24 | type: 'string',
25 | },
26 | buttonTextColor: {
27 | type: 'string',
28 | default: '#ffffff',
29 | },
30 | buttonSize: {
31 | type: 'string',
32 | default: 'c9-button-size-medium',
33 | },
34 | buttonShape: {
35 | type: 'string',
36 | default: 'square',
37 | },
38 | buttonTarget: {
39 | type: 'boolean',
40 | default: false,
41 | },
42 | blendMode: {
43 | type: 'string',
44 | default: 'normal',
45 | },
46 | ctaTitle: {
47 | type: 'array',
48 | selector: '.c9-cta-title',
49 | source: 'children',
50 | },
51 | ctaLayout: {
52 | type: 'string',
53 | default: 'two-thirds',
54 | },
55 | ctaMargin: {
56 | type: 'object',
57 | default: {
58 | linked: true,
59 | icon: 'admin-links',
60 | unit: 'px',
61 | top: '-1',
62 | bottom: '-1',
63 | },
64 | },
65 | ctaPadding: {
66 | type: 'object',
67 | default: {
68 | linked: true,
69 | icon: 'admin-links',
70 | top: '5',
71 | bottom: '5',
72 | left: '5',
73 | right: '5',
74 | },
75 | },
76 | ctaTextFontSize: {
77 | type: 'number',
78 | },
79 | ctaText: {
80 | type: 'array',
81 | selector: '.c9-cta-text',
82 | source: 'children',
83 | },
84 | ctaWidth: {
85 | type: 'string',
86 | default: 'container',
87 | },
88 | ctaBackgroundColor: {
89 | type: 'string',
90 | },
91 | ctaBackgroundOpacity: {
92 | type: 'number',
93 | default: 10,
94 | },
95 | ctaTextColor: {
96 | type: 'string',
97 | },
98 | imgURL: {
99 | type: 'string',
100 | source: 'attribute',
101 | attribute: 'src',
102 | selector: 'img',
103 | },
104 | imgID: {
105 | type: 'number',
106 | },
107 | imgAlt: {
108 | type: 'string',
109 | source: 'attribute',
110 | attribute: 'alt',
111 | selector: 'img',
112 | },
113 | imgSize: {
114 | type: 'string',
115 | default: 'cover',
116 | },
117 | focalPoint: {
118 | type: 'object',
119 | default: {
120 | x: 0.5,
121 | y: 0.5,
122 | },
123 | },
124 | // true evaluates to backgroundAttachment fixed, false to scroll
125 | imgAttach: {
126 | type: 'boolean',
127 | default: false,
128 | },
129 | // Deprecated
130 | ctaTitleFontSize: {
131 | type: 'string',
132 | default: '32',
133 | },
134 | align: {
135 | type: 'string',
136 | default: '',
137 | },
138 | disableToolbar: {
139 | type: 'boolean',
140 | default: false,
141 | },
142 | fontSize: {
143 | type: 'string',
144 | },
145 | customFontSize: {
146 | type: 'string',
147 | },
148 | dropCap: {
149 | type: 'boolean',
150 | default: false,
151 | },
152 | };
153 |
154 | export default attributes;
155 |
--------------------------------------------------------------------------------
/src/blocks/block-post-grid/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Internal dependencies
3 | */
4 | import Edit from './edit';
5 |
6 | /**
7 | * Styles
8 | */
9 | import './styles/style.scss';
10 |
11 | import Icon from '../../../assets/icon-c9-post-grid.svg';
12 |
13 | /**
14 | * WordPress dependencies
15 | */
16 | const { registerBlockType } = wp.blocks;
17 | const { compose } = wp.compose;
18 | const { withSelect } = wp.data;
19 |
20 | /**
21 | * External Dependencies.
22 | */
23 | import classnames from 'classnames';
24 | import isUndefined from 'lodash/isUndefined';
25 | import pickBy from 'lodash/pickBy';
26 |
27 | registerBlockType('c9-blocks/post-grid', {
28 | icon: Icon,
29 | parent: ['c9-blocks/post-container'],
30 | /* Add alignment to block wrapper. */
31 | supports: {
32 | inserter: false,
33 | reusable: false,
34 | },
35 | getEditWrapperProps({ align }) {
36 | if (
37 | 'full' === align ||
38 | 'wide' === align ||
39 | 'narrow' === align ||
40 | '' === align
41 | ) {
42 | return { 'data-align': align };
43 | }
44 | },
45 |
46 | edit: compose([
47 | withSelect((select, props) => {
48 | const { order, categories, tags, filterByCategory, filterByTag } =
49 | props.attributes;
50 |
51 | const { getEntityRecords, getMedia } = select('core', 'c9-blocks');
52 |
53 | const setCategories = filterByCategory ? categories : undefined;
54 | const setTags = filterByTag ? tags : undefined;
55 |
56 | const latestPostsQuery = pickBy(
57 | {
58 | categories: setCategories,
59 | tags: setTags,
60 | order,
61 | orderby: props.attributes.orderBy,
62 | // eslint-disable-next-line camelcase
63 | per_page: props.attributes.postsToShow,
64 | offset: props.attributes.offset,
65 | },
66 | (value) => !isUndefined(value)
67 | );
68 |
69 | return {
70 | latestPosts: getEntityRecords(
71 | 'postType',
72 | props.attributes.postType,
73 | latestPostsQuery
74 | ),
75 | getMedia,
76 | };
77 | }),
78 | ])(Edit),
79 |
80 | // Render via PHP
81 | save() {
82 | return null;
83 | },
84 | });
85 |
86 | /* Add the vertical column alignment class to the column container block. */
87 | const withClientIdClassName = wp.compose.createHigherOrderComponent(
88 | (BlockListBlock) => {
89 | return (props) => {
90 | const blockName = props.block.name;
91 |
92 | if ('c9-blocks/post-grid' === blockName) {
93 | return (
94 |
13 |
16 |
17 |
18 |
19 |
34 |
14 |
15 |
20 |
33 |
21 |
Address
2999 N. Chicago Ave.
Ste. 207
Chicago, Illinois 60666
Phone
555-666-4000
7 | ),
8 | title: 'Introduce Page Title',
9 | description: '50 Words • Page Title • Logo',
10 | markup: `
11 |
12 |
31 |
32 | `,
33 | };
34 |
--------------------------------------------------------------------------------
/src/blocks/block-carousel/deprecated/1.0/save.deprecated.js:
--------------------------------------------------------------------------------
1 | /**
2 | * External Dependencies.
3 | */
4 | import classnames from 'classnames';
5 |
6 | /**
7 | * WordPress dependencies
8 | */
9 | const { Component, Fragment } = wp.element;
10 | const { InnerBlocks } = wp.blockEditor;
11 | const { applyFilters } = wp.hooks;
12 |
13 | export default class Save extends Component {
14 | constructor() {
15 | super(...arguments);
16 | }
17 |
18 | /**
19 | * Returns the indicators layout configuration for a given amount of tabs.
20 | *
21 | * @param {number} slides Amount of indicators to create.
22 | * @param {number} id Instance Id of this carousel block.
23 | *
24 | * @return {Object[]} Indicators layout configuration.
25 | */
26 | createIndicators(slides, id) {
27 | let indicators = [];
28 | for (let i = 0; i < slides; i++) {
29 | indicators.push(
30 |
36 | );
37 | }
38 |
39 | return indicators;
40 | }
41 |
42 | render() {
43 | const {
44 | showIndicators,
45 | autoSlide,
46 | slides,
47 | showControls,
48 | instanceId,
49 | wrapAround,
50 | slideTime,
51 | slideMaxHeight,
52 | slideEqualHeight,
53 | verticalAlign,
54 | } = this.props.attributes;
55 |
56 | const { className = '' } = this.props;
57 |
58 | return (
59 |
13 |
24 |
25 |
26 |
27 |
30 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Company Name
Mutually Making Weird Words Meaningless
Click the outer edges of the container to change the background color, image, or video! Once you highlight the C9 Grid block, click on it, and you can make changes under Background Settings in the sidebar from the WordPress edit screen.
23 |
28 | 
Logo
74 | {showIndicators && (
75 |
89 |
95 |
96 | Previous
97 |
98 |
104 |
105 | Next
106 |
107 |
108 | )}
109 |
110 | );
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/assets/c9-feather-logo-gradient.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/blocks/block-vertical-tabs/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Internal dependencies
3 | */
4 | import Edit from './edit';
5 | import Save from './save';
6 | import attributes from './attributes';
7 |
8 | /**
9 | * Styles
10 | */
11 | import './styles/style.scss';
12 |
13 | import Icon from '../../../assets/icon-c9-tabs-vertical-tabs.svg';
14 |
15 | /**
16 | * WordPress dependencies
17 | */
18 | const { __ } = wp.i18n;
19 | const { compose } = wp.compose;
20 | const { withSelect, withDispatch } = wp.data;
21 | const { registerBlockType } = wp.blocks;
22 |
23 | registerBlockType('c9-blocks/vertical-tabs', {
24 | title: __('C9 Vertical Tabs', 'c9-blocks'),
25 | icon: Icon,
26 | category: 'c9-blocks',
27 | supports: {
28 | // fill in features
29 | },
30 | keywords: [
31 | __('tabs', 'c9-blocks'),
32 | __('container', 'c9-blocks'),
33 | __('responsive', 'c9-blocks'),
34 | ],
35 | description: __(
36 | 'Display tabbed content with a vertical button interface for switching between multiple types of content.',
37 | 'c9-blocks'
38 | ),
39 | example: {
40 | viewportWidth: '300',
41 | attributes: {
42 | tabsData: [
43 | { slug: 'tab-1', title: 'Tab 1' },
44 | { slug: 'tab-2', title: 'Tab 2' },
45 | { slug: 'tab-3', title: 'Tab 3' },
46 | ],
47 | },
48 | innerBlocks: [
49 | {
50 | name: 'c9-blocks/vertical-tabs-tab',
51 | attributes: {
52 | slug: 'tab-1',
53 | tabActive: 'tab-1',
54 | },
55 | innerBlocks: [
56 | {
57 | name: 'c9-blocks/heading',
58 | attributes: {
59 | heading: 'Tab Headline',
60 | tagLevel: 3,
61 | },
62 | },
63 | {
64 | name: 'core/paragraph',
65 | attributes: {
66 | content:
67 | 'Vertical tabs can be aligned horizontally and vertically inside of the tab container. Almost any block can go inside of tabs including buttons, text, videos, and image galleries.',
68 | },
69 | },
70 | ],
71 | },
72 | {
73 | name: 'c9-blocks/vertical-tabs-tab',
74 | attributes: {
75 | slug: 'tab-2',
76 | tabActive: 'tab-1',
77 | },
78 | },
79 | {
80 | name: 'c9-blocks/vertical-tabs-tab',
81 | attributes: {
82 | slug: 'tab-3',
83 | tabActive: 'tab-1',
84 | },
85 | },
86 | ],
87 | },
88 | attributes,
89 | // Render the block components
90 | edit: compose([
91 | withSelect((select, ownProps) => {
92 | const { getBlock, isBlockSelected, hasSelectedInnerBlock } =
93 | select('core/block-editor');
94 |
95 | const { clientId } = ownProps;
96 |
97 | return {
98 | block: getBlock(clientId),
99 | isSelectedBlockInRoot:
100 | isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, true),
101 | };
102 | }),
103 | withDispatch((dispatch) => {
104 | const { updateBlockAttributes, removeBlock } =
105 | dispatch('core/block-editor');
106 |
107 | return {
108 | updateBlockAttributes,
109 | removeBlock,
110 | };
111 | }),
112 | ])(Edit),
113 |
114 | // Save the attributes and markup
115 | save: (props) => {
116 | return -
76 | {this.createIndicators(slides, instanceId)}
77 |
85 |
87 | {showControls && (
88 |
69 | 
74 |
75 | )}
76 |
77 |
74 |
82 | {ctaText && (
83 |
94 | {buttonText && (
95 |
120 | )}
121 | 
7 | ),
8 | title: 'Watch Embedded Video',
9 | description: '50 Words • Button Link • Video Embed',
10 | markup: `
11 |
12 |
43 |
44 | `,
45 | };
46 |
--------------------------------------------------------------------------------
/src/blocks/block-image-carousel/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Internal dependencies
3 | */
4 | import Edit from './edit';
5 | import Save from './save';
6 | import attributes from './attributes';
7 | import Deprecated from './deprecated';
8 |
9 | /**
10 | * Styles
11 | */
12 | import './styles/style.scss';
13 |
14 | import Icon from '../../../assets/icon-c9-image-carousel.svg';
15 |
16 | import cryptoRandomString from 'crypto-random-string';
17 |
18 | /**
19 | * WordPress dependencies
20 | */
21 | const { __ } = wp.i18n;
22 | const { compose } = wp.compose;
23 | const { withSelect, withDispatch } = wp.data;
24 | const { registerBlockType } = wp.blocks;
25 |
26 | registerBlockType('c9-blocks/image-carousel', {
27 | title: __('C9 Image Carousel', 'c9-blocks'),
28 | icon: Icon,
29 | category: 'c9-blocks',
30 | supports: {
31 | // fill in features
32 | },
33 | keywords: [__('carousel', 'c9-blocks'), __('responsive', 'c9-blocks')],
34 | description: __(
35 | 'Display an animated carousel of images with captions with custom settings for navigation.',
36 | 'c9-blocks'
37 | ),
38 | example: {
39 | viewportWidth: '280',
40 | attributes: {
41 | autoSlide: false,
42 | url: [
43 | 'https://work.covertnine.com/wp-content/uploads/2020/07/clark-young-fQxMGkYXqFU-unsplash-55.jpg',
44 | 'https://work.covertnine.com/wp-content/uploads/2020/07/jezael-melgoza-HYQvV8wWX18-unsplash-55.jpg',
45 | 'https://work.covertnine.com/wp-content/uploads/2020/07/set-of-tool-wrench-162553-55.jpg',
46 | ],
47 | id: [null, null, null],
48 | captionTitle: [
49 | 'Slide Caption Top',
50 | 'Slide Caption Top',
51 | 'Slide Caption Top',
52 | ],
53 | captionContent: [
54 | 'Slide Caption Bottom',
55 | 'Slide Caption Bottom',
56 | 'Slide Caption Bottom',
57 | ],
58 | isResponsive: true,
59 | slideMaxHeight: 640,
60 | slideEqualHeight: true,
61 | },
62 | },
63 | attributes,
64 |
65 | /* Add alignment to block wrapper. */
66 | getEditWrapperProps({ align }) {
67 | if (
68 | 'full' === align ||
69 | 'wide' === align ||
70 | 'narrow' === align ||
71 | '' === align
72 | ) {
73 | return { 'data-align': align };
74 | }
75 | },
76 |
77 | // Render the block components
78 | edit: compose([
79 | withSelect((select, ownProps) => {
80 | const { getBlock, isBlockSelected, hasSelectedInnerBlock } =
81 | select('core/block-editor');
82 |
83 | const { clientId } = ownProps;
84 |
85 | return {
86 | block: getBlock(clientId),
87 | isSelectedBlockInRoot:
88 | isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, true),
89 | instanceId: parseInt(
90 | cryptoRandomString({ length: 4, type: 'numeric' })
91 | ),
92 | };
93 | }),
94 | withDispatch((dispatch) => {
95 | const { updateBlockAttributes, removeBlock, toggleSelection } =
96 | dispatch('core/block-editor');
97 |
98 | return {
99 | updateBlockAttributes,
100 | removeBlock,
101 | onResizeStart: () => toggleSelection(false),
102 | onResizeStop: () => toggleSelection(true),
103 | };
104 | }),
105 | ])(Edit),
106 |
107 | // Save the attributes and markup
108 | save: (props) => {
109 | return
13 |
36 |
37 |
38 |
39 |
42 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 |
Watch the Video
Cause that's how we get paid
23 | 24 | 25 | 26 |
Upload your own MP4 files, or link to a YouTube video. YouTube video links in buttons will open up in a lightbox so users stay on your site.
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
40 |