Version Description
Download this release
Release Info
Developer | wpdevteam |
Plugin | EmbedPress – Embed Google Docs, YouTube, Maps, Vimeo, Wistia Videos & Upload PDF, PPT in Gutenberg & Elementor |
Version | 2.7.4 |
Comparing to | |
See all releases |
Code changes from version 2.7.3 to 2.7.4
- Gutenberg/src/blocks.js +44 -0
- Gutenberg/src/common.scss +13 -0
- Gutenberg/src/common/Iframe.js +31 -0
- Gutenberg/src/common/core-embeds.js +25 -0
- Gutenberg/src/common/embed-controls.js +33 -0
- Gutenberg/src/common/embed-loading.js +14 -0
- Gutenberg/src/common/embed-placeholder.js +49 -0
- Gutenberg/src/common/embed-wrap.js +28 -0
- Gutenberg/src/common/icons.js +211 -0
- Gutenberg/src/document/edit.js +235 -0
- Gutenberg/src/document/editor.scss +11 -0
- Gutenberg/src/document/index.js +109 -0
- Gutenberg/src/document/style.scss +29 -0
- Gutenberg/src/embedpress/edit.js +120 -0
- Gutenberg/src/embedpress/editor.scss +13 -0
- Gutenberg/src/embedpress/index.js +100 -0
- Gutenberg/src/embedpress/index.php +30 -0
- Gutenberg/src/embedpress/style.scss +19 -0
- Gutenberg/src/google-docs/edit.js +161 -0
- Gutenberg/src/google-docs/editor.scss +6 -0
- Gutenberg/src/google-docs/index.js +110 -0
- Gutenberg/src/google-docs/style.scss +5 -0
- Gutenberg/src/google-drawings/edit.js +116 -0
- Gutenberg/src/google-drawings/editor.scss +6 -0
- Gutenberg/src/google-drawings/index.js +78 -0
- Gutenberg/src/google-drawings/style.scss +5 -0
- Gutenberg/src/google-forms/edit.js +142 -0
- Gutenberg/src/google-forms/editor.scss +6 -0
- Gutenberg/src/google-forms/index.js +79 -0
- Gutenberg/src/google-forms/style.scss +5 -0
- Gutenberg/src/google-maps/edit.js +144 -0
- Gutenberg/src/google-maps/editor.scss +6 -0
- Gutenberg/src/google-maps/index.js +78 -0
- Gutenberg/src/google-maps/style.scss +5 -0
- Gutenberg/src/google-sheets/edit.js +165 -0
- Gutenberg/src/google-sheets/editor.scss +6 -0
- Gutenberg/src/google-sheets/index.js +102 -0
- Gutenberg/src/google-sheets/style.scss +5 -0
- Gutenberg/src/google-slides/edit.js +142 -0
- Gutenberg/src/google-slides/editor.scss +6 -0
- Gutenberg/src/google-slides/index.js +77 -0
- Gutenberg/src/google-slides/style.scss +6 -0
- Gutenberg/src/init.php +130 -0
- Gutenberg/src/twitch/edit.js +187 -0
- Gutenberg/src/twitch/editor.scss +6 -0
- Gutenberg/src/twitch/index.js +82 -0
- Gutenberg/src/twitch/style.scss +5 -0
- Gutenberg/src/wistia/edit.js +168 -0
- Gutenberg/src/wistia/editor.scss +7 -0
- Gutenberg/src/wistia/index.js +77 -0
- Gutenberg/src/wistia/index.php +54 -0
- Gutenberg/src/wistia/style.scss +6 -0
- Gutenberg/src/youtube/edit.js +155 -0
- Gutenberg/src/youtube/editor.scss +0 -0
- Gutenberg/src/youtube/index.js +60 -0
- Gutenberg/src/youtube/index.php +66 -0
- Gutenberg/src/youtube/style.scss +0 -0
- embedpress.php +1 -1
- readme.txt +8 -5
Gutenberg/src/blocks.js
ADDED
@@ -0,0 +1,44 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Gutenberg Blocks
|
3 |
+
*
|
4 |
+
* All blocks related JavaScript files should be imported here.
|
5 |
+
* You can create a new block folder in this dir and include code
|
6 |
+
* for that block here as well.
|
7 |
+
*
|
8 |
+
* All blocks should be included here since this is the file that
|
9 |
+
* Webpack is compiling as the input file.
|
10 |
+
*/
|
11 |
+
|
12 |
+
import './google-docs/index.js';
|
13 |
+
import './google-slides/index.js';
|
14 |
+
import './google-sheets/index.js';
|
15 |
+
import './google-forms/index.js';
|
16 |
+
import './google-drawings/index.js';
|
17 |
+
import './google-maps/index.js';
|
18 |
+
import './twitch/index.js';
|
19 |
+
import './wistia/index.js';
|
20 |
+
import './youtube/index.js';
|
21 |
+
import './document/index.js';
|
22 |
+
import './embedpress/index.js';
|
23 |
+
|
24 |
+
( function() {
|
25 |
+
let a = <svg width="33" height="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
26 |
+
viewBox="0 0 270 270">
|
27 |
+
<g>
|
28 |
+
<polygon className="st0" fill="#9595C1" points="0,0 0,52 15,52 15,15 52,15 52,0 "/>
|
29 |
+
<polygon className="st0" fill="#9595C1" points="255,218 255,255 218,255 218,270 270,270 270,218 "/>
|
30 |
+
<path fill="#5B4E96" d="M260.7,68.1c-10.4-18.6-29.3-31.2-50.6-33.6c-12.4-1.4-25,0.6-36.3,6c-1.3,0.6-2.6,1.3-3.9,2
|
31 |
+
C154.5,51,143,65.3,138.3,81.7l0,0.1l-36.4,103.8c-3.1,9.4-9.1,17-17.1,21.4c-0.7,0.4-1.4,0.7-2.1,1.1c-6.1,2.9-12.8,4-19.5,3.2
|
32 |
+
c-11.5-1.3-21.6-8.1-27.2-18.1c-4.6-8.3-5.7-18-3.1-27.2c2.6-9.2,8.7-16.9,17.1-21.5c0.7-0.4,1.4-0.8,2.1-1.1
|
33 |
+
c6.1-2.9,12.7-4,19.6-3.2c0.3,0,0.5,0.1,0.8,0.1L64.9,162c-0.5,1.5,0.3,3.1,1.8,3.6l19.4,6.3c1.5,0.5,3-0.3,3.5-1.7l16.7-47.4
|
34 |
+
c0.4-1.2,0.3-2.5-0.3-3.6c-0.6-1.1-1.6-2-2.8-2.4l-17.6-5.1c-0.4-0.1-0.8-0.2-1.2-0.3l-1.6-0.5l0,0.1c-2.5-0.6-5-1.1-7.5-1.3
|
35 |
+
c-12.5-1.4-25.1,0.6-36.4,6c-1.3,0.6-2.6,1.3-3.9,2c-15.6,8.7-27,22.9-31.9,40.1c-4.9,17.1-2.8,35.1,5.8,50.5
|
36 |
+
c10.4,18.6,29.3,31.2,50.6,33.6c12.4,1.4,25-0.6,36.3-6c1.3-0.6,2.6-1.3,3.9-2c15.3-8.5,26.8-22.8,31.6-39.2l0-0.1L167.8,91
|
37 |
+
l0.1-0.2l0-0.1c4.1-10.5,9.3-17,17-21.3c0.7-0.4,1.4-0.7,2.1-1.1c6.1-2.9,12.8-4,19.5-3.2c11.5,1.3,21.6,8.1,27.2,18.1
|
38 |
+
c9.6,17.2,3.3,39.1-14,48.7c-0.7,0.4-1.4,0.7-2.1,1.1c-6.1,2.9-12.8,4-19.7,3.2c-2-0.2-4.1-0.6-6.1-1.2l-0.2-0.1l-11.3-3.4
|
39 |
+
c-1.2-0.4-2.5,0.3-2.9,1.5l-8.8,24.8c-0.5,1.3,0.3,2.7,1.6,3.1l13.9,4c3.4,0.9,6.8,1.6,10.3,2c12.4,1.4,25-0.6,36.3-6l0.1,0
|
40 |
+
c1.3-0.6,2.6-1.3,3.9-2C266.8,140.8,278.5,100.1,260.7,68.1z"/>
|
41 |
+
</g>
|
42 |
+
</svg>
|
43 |
+
wp.blocks.updateCategory( 'embedpress', { icon: a } );
|
44 |
+
} )();
|
Gutenberg/src/common.scss
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Common SCSS
|
3 |
+
*
|
4 |
+
* Can include things like variables and mixins
|
5 |
+
* that are used across the project.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Colors.
|
9 |
+
$black: rgb(41, 41, 41);
|
10 |
+
$white: #f4f4f4;
|
11 |
+
$gray: #dedede;
|
12 |
+
$green: #bada55;
|
13 |
+
$red: orangered;
|
Gutenberg/src/common/Iframe.js
ADDED
@@ -0,0 +1,31 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
INIT: ensure Babel/Eslint/Flow is configured for ES Class Fields & Static Properties
|
3 |
+
JSX USAGE: <Iframe src='http://web.site' onLoad={myOnloadFunction}/>
|
4 |
+
*/
|
5 |
+
import ReactDOM from 'react-dom'
|
6 |
+
const { Component } = wp.element;
|
7 |
+
|
8 |
+
class Iframe extends Component {
|
9 |
+
constructor(props) {
|
10 |
+
super(props);
|
11 |
+
this.myRef = React.createRef();
|
12 |
+
}
|
13 |
+
componentDidMount () {
|
14 |
+
let iframe = ReactDOM.findDOMNode(this.myRef.current)
|
15 |
+
iframe.addEventListener('load', this.props.onLoad);
|
16 |
+
}
|
17 |
+
|
18 |
+
render () {
|
19 |
+
|
20 |
+
return (
|
21 |
+
<iframe
|
22 |
+
ref={this.myRef}
|
23 |
+
{...this.props}
|
24 |
+
|
25 |
+
/>
|
26 |
+
)
|
27 |
+
}
|
28 |
+
|
29 |
+
}
|
30 |
+
|
31 |
+
export default Iframe
|
Gutenberg/src/common/core-embeds.js
ADDED
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import { googleDocsIcon } from './icons';
|
5 |
+
/**
|
6 |
+
* WordPress dependencies
|
7 |
+
*/
|
8 |
+
const { __ } = wp.i18n;
|
9 |
+
|
10 |
+
export const common = [
|
11 |
+
{
|
12 |
+
name: 'embedpress-blocks/google',
|
13 |
+
settings: {
|
14 |
+
title: 'Google Docs',
|
15 |
+
icon: googleDocsIcon,
|
16 |
+
keywords: [ 'google' , 'docs' ],
|
17 |
+
description: __( 'Embed a google document.' ),
|
18 |
+
},
|
19 |
+
patterns: [ /^http[s]?:\/\/((?:www\.)?docs\.google\.com(?:.*)?(?:document|presentation|spreadsheets|forms|drawings)\/[a-z0-9\/\?=_\-\.\,&%\$#\@\!\+]*)\/. +/i ]
|
20 |
+
},
|
21 |
+
];
|
22 |
+
|
23 |
+
export const others = [
|
24 |
+
|
25 |
+
];
|
Gutenberg/src/common/embed-controls.js
ADDED
@@ -0,0 +1,33 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* WordPress dependencies
|
3 |
+
*/
|
4 |
+
const { __ } = wp.i18n;
|
5 |
+
const { Fragment } = wp.element;
|
6 |
+
const { IconButton, Toolbar } = wp.components;
|
7 |
+
const { BlockControls } = wp.editor;
|
8 |
+
|
9 |
+
const EmbedControls = ( props ) => {
|
10 |
+
const {
|
11 |
+
showEditButton,
|
12 |
+
switchBackToURLInput
|
13 |
+
} = props;
|
14 |
+
return (
|
15 |
+
<Fragment>
|
16 |
+
<BlockControls>
|
17 |
+
<Toolbar>
|
18 |
+
{ showEditButton && (
|
19 |
+
<IconButton
|
20 |
+
className="components-toolbar__control"
|
21 |
+
label={ __( 'Edit URL' ) }
|
22 |
+
icon="edit"
|
23 |
+
onClick={ switchBackToURLInput }
|
24 |
+
/>
|
25 |
+
) }
|
26 |
+
</Toolbar>
|
27 |
+
</BlockControls>
|
28 |
+
|
29 |
+
</Fragment>
|
30 |
+
);
|
31 |
+
};
|
32 |
+
|
33 |
+
export default EmbedControls;
|
Gutenberg/src/common/embed-loading.js
ADDED
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* WordPress dependencies
|
3 |
+
*/
|
4 |
+
const { __ } = wp.i18n;
|
5 |
+
const { Spinner } = wp.components;
|
6 |
+
|
7 |
+
const EmbedLoading = () => (
|
8 |
+
<div className="wp-block-embed is-loading">
|
9 |
+
<Spinner />
|
10 |
+
<p>{ __( 'Embedding…' ) }</p>
|
11 |
+
</div>
|
12 |
+
);
|
13 |
+
|
14 |
+
export default EmbedLoading;
|
Gutenberg/src/common/embed-placeholder.js
ADDED
@@ -0,0 +1,49 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* WordPress dependencies
|
3 |
+
*/
|
4 |
+
const {__, _x} = wp.i18n;
|
5 |
+
import classnames from 'classnames';
|
6 |
+
const {Button, Placeholder, ExternalLink} = wp.components;
|
7 |
+
const {BlockIcon} = wp.blockEditor;
|
8 |
+
|
9 |
+
const EmbedPlaceholder = (props) => {
|
10 |
+
const {icon, label, value, onSubmit, onChange, cannotEmbed, docLink, DocTitle} = props;
|
11 |
+
const classes = classnames( 'wp-block-embed', {} );
|
12 |
+
return (
|
13 |
+
<div>
|
14 |
+
<Placeholder icon={<BlockIcon icon={icon} showColors/>} label={label} className={classes}>
|
15 |
+
|
16 |
+
<form onSubmit={onSubmit}>
|
17 |
+
<input
|
18 |
+
type="url"
|
19 |
+
value={value || ''}
|
20 |
+
className="components-placeholder__input"
|
21 |
+
aria-label={label}
|
22 |
+
placeholder={__('Enter URL to embed here…')}
|
23 |
+
onChange={onChange}/>
|
24 |
+
<Button
|
25 |
+
isSmall
|
26 |
+
type="submit">
|
27 |
+
{_x('Embed', 'button label')}
|
28 |
+
</Button>
|
29 |
+
|
30 |
+
{cannotEmbed &&
|
31 |
+
<p className="components-placeholder__error">
|
32 |
+
{__('Sorry, we could not embed that content.')}<br/>
|
33 |
+
</p>
|
34 |
+
}
|
35 |
+
|
36 |
+
</form>
|
37 |
+
{docLink &&
|
38 |
+
<div className="components-placeholder__learn-more">
|
39 |
+
<ExternalLink href={docLink}>{DocTitle}</ExternalLink>
|
40 |
+
</div>
|
41 |
+
}
|
42 |
+
|
43 |
+
</Placeholder>
|
44 |
+
</div>
|
45 |
+
|
46 |
+
);
|
47 |
+
};
|
48 |
+
|
49 |
+
export default EmbedPlaceholder;
|
Gutenberg/src/common/embed-wrap.js
ADDED
@@ -0,0 +1,28 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
INIT: ensure Babel/Eslint/Flow is configured for ES Class Fields & Static Properties
|
3 |
+
JSX USAGE: <Epwrap src='http://web.site' onLoad={myOnloadFunction}/>
|
4 |
+
*/
|
5 |
+
import ReactDOM from 'react-dom'
|
6 |
+
const { Component } = wp.element;
|
7 |
+
|
8 |
+
export default class EmbedWrap extends Component {
|
9 |
+
constructor(props) {
|
10 |
+
super(props);
|
11 |
+
this.myRef = React.createRef();
|
12 |
+
}
|
13 |
+
componentDidMount () {
|
14 |
+
let wrap = ReactDOM.findDOMNode(this.myRef.current)
|
15 |
+
wrap.addEventListener('load', this.props.onLoad);
|
16 |
+
}
|
17 |
+
|
18 |
+
render () {
|
19 |
+
|
20 |
+
return (
|
21 |
+
<div
|
22 |
+
ref={this.myRef}
|
23 |
+
{...this.props}
|
24 |
+
></div>
|
25 |
+
)
|
26 |
+
}
|
27 |
+
|
28 |
+
}
|
Gutenberg/src/common/icons.js
ADDED
@@ -0,0 +1,211 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* WordPress dependencies
|
3 |
+
*/
|
4 |
+
const {
|
5 |
+
G,
|
6 |
+
Path,
|
7 |
+
Polygon,
|
8 |
+
SVG,
|
9 |
+
} = wp.components;
|
10 |
+
export const googleDocsIcon =
|
11 |
+
<SVG xmlns="http://www.w3.org/1999/xlink"
|
12 |
+
viewBox="0 0 48 48"
|
13 |
+
>
|
14 |
+
<G>
|
15 |
+
<Path style= {{ fill: '#2196F3' }} d="M 37 45 L 11 45 C 9.34375 45 8 43.65625 8 42 L 8 6 C 8 4.34375 9.34375 3 11 3 L 30 3 L 40 13 L 40 42 C 40 43.65625 38.65625 45 37 45 Z "/>
|
16 |
+
<Path style= {{ fill: '#BBDEFB' }} d="M 40 13 L 30 13 L 30 3 Z "/>
|
17 |
+
<Path style= {{ fill: '#1565C0' }} d="M 30 13 L 40 23 L 40 13 Z "/>
|
18 |
+
<Path style= {{ fill: '#E3F2FD' }} d="M 15 23 L 33 23 L 33 25 L 15 25 Z "/>
|
19 |
+
<Path style= {{ fill: '#E3F2FD' }} d="M 15 27 L 33 27 L 33 29 L 15 29 Z "/>
|
20 |
+
<Path style= {{ fill: '#E3F2FD' }} d="M 15 31 L 33 31 L 33 33 L 15 33 Z "/>
|
21 |
+
<Path style= {{ fill: '#E3F2FD' }} d="M 15 35 L 25 35 L 25 37 L 15 37 Z "/>
|
22 |
+
</G>
|
23 |
+
</SVG>
|
24 |
+
export const googleSlidesIcon =
|
25 |
+
<SVG
|
26 |
+
xmlns="http://www.w3.org/1999/xlink"
|
27 |
+
enableBackground="new 0 0 24 24" id="Layer_2"
|
28 |
+
version="1.1"
|
29 |
+
viewBox="0 0 24 24">
|
30 |
+
<G>
|
31 |
+
<Path d="M21,6l-6-6H5C3.8954306,0,3,0.8954305,3,2v20c0,1.1045704,0.8954306,2,2,2h14c1.1045704,0,2-0.8954296,2-2 V6z"
|
32 |
+
style={{ fill: "#FFC720" }}/>
|
33 |
+
|
34 |
+
<Path d="M17,6c-0.5444336,0-1.0367432-0.2190552-1.3973999-0.5719604L21,10.8254395V6H17z"
|
35 |
+
style={{ fill: "url(#SVGID_1_)" }} />
|
36 |
+
<Path d="M19,23.75H5c-1.1045532,0-2-0.8954468-2-2V22c0,1.1045532,0.8954468,2,2,2h14c1.1045532,0,2-0.8954468,2-2 v-0.25C21,22.8545532,20.1045532,23.75,19,23.75z"
|
37 |
+
style={{ opacity: "0.1" }} />
|
38 |
+
<Path d="M15,0v4c0,1.1045694,0.8954306,2,2,2h4L15,0z" style= {{ fill: "#FFE083" }} />
|
39 |
+
<Path d="M17,5.75c-1.1045532,0-2-0.8954468-2-2V4c0,1.1045532,0.8954468,2,2,2h4l-0.25-0.25H17z" style={{ opacity:"0.1" }} />
|
40 |
+
<Path d="M15,0H5C3.8954468,0,3,0.8953857,3,2v0.25c0-1.1046143,0.8954468-2,2-2h10" style={{ fill: "#FFFFFF", opacity: "0.2" }} />
|
41 |
+
<Path d="M15.5,9h-7C7.6728516,9,7,9.6728516,7,10.5v6C7,17.3271484,7.6728516,18,8.5,18h7 c0.8271484,0,1.5-0.6728516,1.5-1.5v-6C17,9.6728516,16.3271484,9,15.5,9z M8,15.5V11h8v4.5H8z"
|
42 |
+
style={{ fill: "#FFFFFF" }} />
|
43 |
+
|
44 |
+
<Path d="M21,6l-6-6H5C3.8954306,0,3,0.8954305,3,2v20c0,1.1045704,0.8954306,2,2,2h14 c1.1045704,0,2-0.8954296,2-2V6z" style={{ fill: "url(#SVGID_2_)" }} />
|
45 |
+
</G>
|
46 |
+
</SVG>
|
47 |
+
|
48 |
+
export const googleSheetsIcon =
|
49 |
+
<SVG
|
50 |
+
xmlns="http://www.w3.org/1999/xlink"
|
51 |
+
viewBox="0 0 48 48"
|
52 |
+
version="1.1">
|
53 |
+
<G>
|
54 |
+
<Path style={{ fill: '#43A047' }} d="M 37 45 L 11 45 C 9.34375 45 8 43.65625 8 42 L 8 6 C 8 4.34375 9.34375 3 11 3 L 30 3 L 40 13 L 40 42 C 40 43.65625 38.65625 45 37 45 Z "/>
|
55 |
+
<Path style={{ fill: '#C8E6C9' }} d="M 40 13 L 30 13 L 30 3 Z "/>
|
56 |
+
<Path style={{ fill: '#2E7D32' }} d="M 30 13 L 40 23 L 40 13 Z "/>
|
57 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 31 23 L 15 23 L 15 37 L 33 37 L 33 23 Z M 17 25 L 21 25 L 21 27 L 17 27 Z M 17 29 L 21 29 L 21 31 L 17 31 Z M 17 33 L 21 33 L 21 35 L 17 35 Z M 31 35 L 23 35 L 23 33 L 31 33 Z M 31 31 L 23 31 L 23 29 L 31 29 Z M 31 27 L 23 27 L 23 25 L 31 25 Z "/>
|
58 |
+
</G>
|
59 |
+
</SVG>
|
60 |
+
|
61 |
+
export const googleFormsIcon =
|
62 |
+
<SVG
|
63 |
+
xmlns="http://www.w3.org/1999/xlink"
|
64 |
+
viewBox="0 0 48 48"
|
65 |
+
version="1.1"
|
66 |
+
>
|
67 |
+
<G>
|
68 |
+
<Path style={{ fill: '#7850C1' }} d="M 37 45 L 11 45 C 9.34375 45 8 43.65625 8 42 L 8 6 C 8 4.34375 9.34375 3 11 3 L 30 3 L 40 13 L 40 42 C 40 43.65625 38.65625 45 37 45 Z "/>
|
69 |
+
<Path style={{ fill: '#C2ABE1' }} d="M 40 13 L 30 13 L 30 3 Z "/>
|
70 |
+
<Path style={{ fill: '#2E7D32' }} d="M 30 13 L 40 23 L 40 13 Z "/>
|
71 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 19 23 L 33 23 L 33 25 L 19 25 Z "/>
|
72 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 19 28 L 33 28 L 33 30 L 19 30 Z "/>
|
73 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 19 33 L 33 33 L 33 35 L 19 35 Z "/>
|
74 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 15 23 L 17 23 L 17 25 L 15 25 Z "/>
|
75 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 15 28 L 17 28 L 17 30 L 15 30 Z "/>
|
76 |
+
<Path style={{ fill: '#E8F5E9' }} d="M 15 33 L 17 33 L 17 35 L 15 35 Z "/>
|
77 |
+
</G>
|
78 |
+
</SVG>
|
79 |
+
|
80 |
+
export const googleDrawingsIcon=
|
81 |
+
<SVG
|
82 |
+
xmlns="http://www.w3.org/1999/xlink"
|
83 |
+
viewBox="0 0 48 48"
|
84 |
+
version="1.1"
|
85 |
+
>
|
86 |
+
<G>
|
87 |
+
<Path style={{ fill: '#DE5245' }} d="M37,45H11c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h19l10,10v29C40,43.7,38.7,45,37,45z"/>
|
88 |
+
<Path style={{ fill: '#EEA6A0' }} d="M40,13H30V3L40,13z"/>
|
89 |
+
<Path style={{ fill: '#B3433A' }} d="M30,13l10,10V13H30z"/>
|
90 |
+
<Path style={{ fill: '#FFFFFF' }} d="M20.5,32c-3,0-5.5-2.5-5.5-5.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5C26,29.5,23.5,32,20.5,32z M20.5,23c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5S22.4,23,20.5,23z"/>
|
91 |
+
<Path style={{ fill: '#FFFFFF' }} d="M27.6,29c-0.6,1.8-1.9,3.3-3.6,4.1V38h9v-9H27.6z"/>
|
92 |
+
</G>
|
93 |
+
</SVG>
|
94 |
+
|
95 |
+
export const googleMapsIcon=
|
96 |
+
<SVG
|
97 |
+
xmlns="http://www.w3.org/1999/xlink"
|
98 |
+
viewBox="0 0 48 48"
|
99 |
+
version="1.1"
|
100 |
+
>
|
101 |
+
<G>
|
102 |
+
<Path style={{ fill: '#1C9957' }} d="M 42 39 L 42 9 C 42 7.34375 40.65625 6 39 6 L 9 6 C 7.34375 6 6 7.34375 6 9 L 6 39 C 6 40.65625 7.34375 42 9 42 L 39 42 C 40.65625 42 42 40.65625 42 39 Z "/>
|
103 |
+
<Path style={{ fill: '#3E7BF1' }} d="M 9 42 L 39 42 C 40.65625 42 24 26 24 26 C 24 26 7.34375 42 9 42 Z "/>
|
104 |
+
<Path style={{ fill: '#CBCCC9' }} d="M 42 39 L 42 9 C 42 7.34375 26 24 26 24 C 26 24 42 40.65625 42 39 Z "/>
|
105 |
+
<Path style={{ fill: '#EFEFEF' }} d="M 39 42 C 40.65625 42 42 40.65625 42 39 L 42 38.753906 L 26.246094 23 L 23 26.246094 L 38.753906 42 Z "/>
|
106 |
+
<Path style={{ fill: '#FFD73D' }} d="M 42 9 C 42 7.34375 40.65625 6 39 6 L 38.753906 6 L 6 38.753906 L 6 39 C 6 40.65625 7.34375 42 9 42 L 9.246094 42 L 42 9.246094 Z "/>
|
107 |
+
<Path style={{ fill: '#D73F35' }} d="M 36 2 C 30.476563 2 26 6.476563 26 12 C 26 18.8125 33.664063 21.296875 35.332031 31.851563 C 35.441406 32.53125 35.449219 33 36 33 C 36.550781 33 36.558594 32.53125 36.667969 31.851563 C 38.335938 21.296875 46 18.8125 46 12 C 46 6.476563 41.523438 2 36 2 Z "/>
|
108 |
+
<Path style={{ fill: '#752622' }} d="M 39.5 12 C 39.5 13.933594 37.933594 15.5 36 15.5 C 34.066406 15.5 32.5 13.933594 32.5 12 C 32.5 10.066406 34.066406 8.5 36 8.5 C 37.933594 8.5 39.5 10.066406 39.5 12 Z "/>
|
109 |
+
<Path style={{ fill: '#FFFFFF' }} d="M 14.492188 12.53125 L 14.492188 14.632813 L 17.488281 14.632813 C 17.09375 15.90625 16.03125 16.816406 14.492188 16.816406 C 12.660156 16.816406 11.175781 15.332031 11.175781 13.5 C 11.175781 11.664063 12.660156 10.179688 14.492188 10.179688 C 15.316406 10.179688 16.070313 10.484375 16.648438 10.980469 L 18.195313 9.433594 C 17.21875 8.542969 15.921875 8 14.492188 8 C 11.453125 8 8.992188 10.464844 8.992188 13.5 C 8.992188 16.535156 11.453125 19 14.492188 19 C 19.304688 19 20.128906 14.683594 19.675781 12.539063 Z "/>
|
110 |
+
</G>
|
111 |
+
</SVG>
|
112 |
+
|
113 |
+
export const twitchIcon =
|
114 |
+
<SVG
|
115 |
+
xmlns="http://www.w3.org/1999/xlink"
|
116 |
+
viewBox="0 0 48 48"
|
117 |
+
version="1.1"
|
118 |
+
>
|
119 |
+
<G>
|
120 |
+
<Path style={{ fill: '#FFFFFF' }} d="M 12 32 L 12 8 L 39 8 L 39 26 L 33 32 L 24 32 L 18 38 L 18 32 Z "/>
|
121 |
+
<Path style={{ fill: '#8E24AA' }} d="M 9 5 L 6 12.121094 L 6 38 L 15 38 L 15 43 L 20 43 L 25 38 L 32 38 L 42 28 L 42 5 Z M 38 26 L 33 31 L 24 31 L 19 36 L 19 31 L 13 31 L 13 9 L 38 9 Z "/>
|
122 |
+
<Path style={{ fill: '#8E24AA' }} d="M 32 25 L 27 25 L 27 15 L 32 15 Z "/>
|
123 |
+
<Path style={{ fill: '#8E24AA' }} d="M 24 25 L 19 25 L 19 15 L 24 15 Z "/>
|
124 |
+
</G>
|
125 |
+
</SVG>
|
126 |
+
|
127 |
+
export const wistiaIcon =
|
128 |
+
<SVG
|
129 |
+
xmlns="http://www.w3.org/1999/xlink"
|
130 |
+
viewBox="0 0 769 598"
|
131 |
+
version="1.1"
|
132 |
+
>
|
133 |
+
<G>
|
134 |
+
<Path style={{ fill: '#148ee0' }} d="M766.89,229.17c0,0 -17.78,35.38 -106.5,91.3c-37.82,23.79 -116.36,49.1 -217.33,58.86c-54.52,5.29 -154.9,0.99 -197.96,0.99c-43.29,0 -63.13,9.12 -101.95,52.84c-143.15,161.36 -143.15,161.36 -143.15,161.36c0,0 49.57,0.24 87.01,0.24c37.43,0 271.55,13.59 375.43,-14.98c337.36,-92.72 304.46,-350.62 304.46,-350.62z" />
|
135 |
+
<Path style={{ fill: '#54bbff' }} d="M757.84,126.66c16.23,-98.97 -39.68,-126.16 -39.68,-126.16c0,0 2.36,80.57 -145.7,97.65c-131.42,15.16 -572.46,3.74 -572.46,3.74c0,0 0,0 141.74,162.54c38.39,44.06 58.76,49.17 101.92,52.22c43.16,2.89 138.42,1.86 202.99,-3.05c70.58,-5.41 171.17,-28.43 239.19,-81.11c34.88,-26.98 65.21,-64.48 72,-105.83z" />
|
136 |
+
</G>
|
137 |
+
</SVG>
|
138 |
+
|
139 |
+
export const youtubeIcon =
|
140 |
+
<SVG
|
141 |
+
xmlns="http://www.w3.org/2000/svg"
|
142 |
+
width="24"
|
143 |
+
height="24"
|
144 |
+
viewBox="0 0 24 24"
|
145 |
+
role="img"
|
146 |
+
aria-hidden="true"
|
147 |
+
focusable="false"
|
148 |
+
>
|
149 |
+
<Path d="M21.8 8s-.195-1.377-.795-1.984c-.76-.797-1.613-.8-2.004-.847-2.798-.203-6.996-.203-6.996-.203h-.01s-4.197 0-6.996.202c-.39.046-1.242.05-2.003.846C2.395 6.623 2.2 8 2.2 8S2 9.62 2 11.24v1.517c0 1.618.2 3.237.2 3.237s.195 1.378.795 1.985c.76.797 1.76.77 2.205.855 1.6.153 6.8.2 6.8.2s4.203-.005 7-.208c.392-.047 1.244-.05 2.005-.847.6-.607.795-1.985.795-1.985s.2-1.618.2-3.237v-1.517C22 9.62 21.8 8 21.8 8zM9.935 14.595v-5.62l5.403 2.82-5.403 2.8z" />
|
150 |
+
</SVG>
|
151 |
+
|
152 |
+
export const youtubeNewIcon =
|
153 |
+
<svg version="1.1"
|
154 |
+
xmlns="http://www.w3.org/2000/svg"
|
155 |
+
viewBox="0 0 56 23"
|
156 |
+
>
|
157 |
+
<g>
|
158 |
+
<g>
|
159 |
+
<path style={{ fill: '#DA2B28' }} className="st0" d="M55.4,3.7c-0.2-0.9-0.6-1.6-1.3-2.2c-0.7-0.6-1.4-0.9-2.3-1c-2.7-0.3-6.8-0.4-12.3-0.4
|
160 |
+
c-5.5,0-9.6,0.1-12.3,0.4c-0.9,0.1-1.6,0.5-2.3,1c-0.7,0.6-1.1,1.3-1.3,2.2c-0.4,1.7-0.6,4.3-0.6,7.8c0,3.5,0.2,6.1,0.6,7.8
|
161 |
+
c0.2,0.9,0.6,1.6,1.3,2.2c0.7,0.6,1.4,0.9,2.3,1c2.7,0.3,6.8,0.5,12.3,0.5c5.5,0,9.6-0.2,12.3-0.5c0.9-0.1,1.6-0.4,2.3-1
|
162 |
+
c0.7-0.6,1.1-1.3,1.3-2.2c0.4-1.7,0.6-4.3,0.6-7.8C56,8,55.8,5.4,55.4,3.7L55.4,3.7z M32.5,6h-2.4v12.6h-2.2V6h-2.3V3.9h6.9V6z
|
163 |
+
M38.5,18.6h-2v-1.2c-0.8,0.9-1.6,1.4-2.3,1.4c-0.7,0-1.1-0.3-1.3-0.8c-0.1-0.4-0.2-0.9-0.2-1.6V7.6h2v8.1c0,0.5,0,0.7,0,0.8
|
164 |
+
c0,0.3,0.2,0.5,0.5,0.5c0.4,0,0.8-0.3,1.3-0.9V7.6h2V18.6z M46.1,15.3c0,1.1-0.1,1.8-0.2,2.2c-0.3,0.8-0.8,1.2-1.6,1.2
|
165 |
+
c-0.7,0-1.4-0.4-2.1-1.2v1.1h-2V3.9h2v4.8c0.6-0.8,1.3-1.2,2.1-1.2c0.8,0,1.3,0.4,1.6,1.2c0.1,0.4,0.2,1.1,0.2,2.2V15.3z
|
166 |
+
M53.5,13.5h-4v1.9c0,1,0.3,1.5,1,1.5c0.5,0,0.8-0.3,0.9-0.8c0-0.1,0-0.6,0-1.4h2v0.3c0,0.7,0,1.2,0,1.3c0,0.4-0.2,0.8-0.5,1.2
|
167 |
+
c-0.5,0.8-1.3,1.2-2.4,1.2c-1,0-1.8-0.4-2.4-1.1c-0.4-0.5-0.6-1.4-0.6-2.6v-3.8c0-1.2,0.2-2,0.6-2.6c0.6-0.8,1.4-1.1,2.4-1.1
|
168 |
+
c1,0,1.8,0.4,2.3,1.1c0.4,0.5,0.6,1.4,0.6,2.6V13.5z M53.5,13.5"/>
|
169 |
+
<path className="st0" d="M43.2,9.3c-0.3,0-0.7,0.2-1,0.5v6.7c0.3,0.3,0.7,0.5,1,0.5c0.6,0,0.9-0.5,0.9-1.5v-4.7
|
170 |
+
C44.1,9.8,43.8,9.3,43.2,9.3L43.2,9.3z M43.2,9.3"/>
|
171 |
+
<path className="st0" d="M50.6,9.3c-0.7,0-1,0.5-1,1.5v1h2v-1C51.6,9.8,51.2,9.3,50.6,9.3L50.6,9.3z M50.6,9.3"/>
|
172 |
+
</g>
|
173 |
+
<g>
|
174 |
+
<path
|
175 |
+
d="M2.8,12.8v6h2.2v-6L7.7,4H5.5L4,9.8L2.4,4H0.1c0.4,1.2,0.9,2.6,1.4,4.1C2.2,10.2,2.6,11.7,2.8,12.8L2.8,12.8z M2.8,12.8"
|
176 |
+
/>
|
177 |
+
<path d="M10.7,19c1,0,1.8-0.4,2.3-1.1c0.4-0.5,0.6-1.4,0.6-2.6v-3.9c0-1.2-0.2-2-0.6-2.6c-0.5-0.8-1.3-1.1-2.3-1.1
|
178 |
+
c-1,0-1.8,0.4-2.3,1.1C8,9.3,7.8,10.2,7.8,11.4v3.9c0,1.2,0.2,2.1,0.6,2.6C8.9,18.6,9.7,19,10.7,19L10.7,19z M9.8,11
|
179 |
+
c0-1,0.3-1.5,1-1.5c0.6,0,1,0.5,1,1.5v4.7c0,1-0.3,1.6-1,1.6c-0.6,0-1-0.5-1-1.6V11z M9.8,11"/>
|
180 |
+
<path d="M16.8,19c0.7,0,1.5-0.5,2.3-1.4v1.2h2V7.8h-2v8.4c-0.4,0.6-0.9,1-1.3,1c-0.3,0-0.4-0.2-0.5-0.5c0,0,0-0.3,0-0.8V7.8h-2
|
181 |
+
v8.7c0,0.8,0.1,1.3,0.2,1.7C15.7,18.7,16.1,19,16.8,19L16.8,19z M16.8,19"/>
|
182 |
+
</g>
|
183 |
+
</g>
|
184 |
+
</svg>;
|
185 |
+
|
186 |
+
export const DocumentIcon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276 340" ><path d="M196.7.6H24.3C11.1.6.4 11.3.4 24.6v292.9c0 12.3 10 22.2 22.2 22.2H252c13.3 0 23.9-10.7 23.9-23.9V80.9L196.7.6z" fill="#e94848"/><path d="M196.7 57c0 13.3 10.7 23.9 23.9 23.9H276L196.7.6V57z" fill="#f19191"/><linearGradient id="A" gradientUnits="userSpaceOnUse" x1="44.744" y1="77.111" x2="116.568" y2="77.111"><stop offset="0" stopColor="#fff"/><stop offset="1" stopColor="#fff0f0"/></linearGradient><path d="M113 84.5H48.3c-1.9 0-3.5-1.6-3.5-3.5v-7.7c0-1.9 1.6-3.5 3.5-3.5H113c1.9 0 3.5 1.6 3.5 3.5V81c.1 1.9-1.5 3.5-3.5 3.5z" fill="url(#A)"/><linearGradient id="B" gradientUnits="userSpaceOnUse" x1="44.744" y1="136.016" x2="233.927" y2="136.016"><stop offset="0" stopColor="#fff"/><stop offset="1" stopColor="#fff0f0"/></linearGradient><use href="#H" opacity=".8" fill="url(#B)"/><linearGradient id="C" gradientUnits="userSpaceOnUse" x1="44.744" y1="135.993" x2="233.927" y2="135.993"><stop offset="0" stopColor="#fff"/><stop offset="1" stopColor="#fff0f0"/></linearGradient><use href="#H" y="33.6" opacity=".7" fill="url(#C)"/><linearGradient id="D" gradientUnits="userSpaceOnUse" x1="44.744" y1="135.969" x2="233.927" y2="135.969"><stop offset="0" stopColor="#fff"/><stop offset="1" stopColor="#fff0f0"/></linearGradient><use href="#H" y="67.2" opacity=".6" fill="url(#D)"/><linearGradient id="E" gradientUnits="userSpaceOnUse" x1="44.744" y1="136.045" x2="233.927" y2="136.045"><stop offset="0" stopColor="#fff"/><stop offset="1" stopColor="#fff0f0"/></linearGradient><use href="#H" y="100.7" opacity=".4" fill="url(#E)"/><linearGradient id="F" gradientUnits="userSpaceOnUse" x1="44.744" y1="270.322" x2="174.778" y2="270.322"><stop offset="0" stopColor="#fff"/><stop offset="1" stopColor="#fff0f0"/></linearGradient><path d="M171.9 277.7H47.6c-1.6 0-2.9-1.3-2.9-2.9v-9c0-1.6 1.3-2.9 2.9-2.9h124.3c1.6 0 2.9 1.3 2.9 2.9v9c0 1.6-1.3 2.9-2.9 2.9z" opacity=".3" fill="url(#F)"/><defs ><path id="H" d="M231 143.4H47.6c-1.6 0-2.9-1.3-2.9-2.9v-9c0-1.6 1.3-2.9 2.9-2.9H231c1.6 0 2.9 1.3 2.9 2.9v9c0 1.6-1.3 2.9-2.9 2.9z"/></defs></svg>;
|
187 |
+
export const embedPressIcon =<svg
|
188 |
+
width="33"
|
189 |
+
height="20"
|
190 |
+
version="1.1"
|
191 |
+
id="Layer_1"
|
192 |
+
xmlns="http://www.w3.org/2000/svg"
|
193 |
+
x="0px"
|
194 |
+
y="0px"
|
195 |
+
viewBox="0 0 270 270"
|
196 |
+
role="img"
|
197 |
+
focusable="false">
|
198 |
+
<g>
|
199 |
+
<polygon
|
200 |
+
className="st0"
|
201 |
+
fill="#9595C1"
|
202 |
+
points="0,0 0,52 15,52 15,15 52,15 52,0 "></polygon>
|
203 |
+
<polygon
|
204 |
+
className="st0"
|
205 |
+
fill="#9595C1"
|
206 |
+
points="255,218 255,255 218,255 218,270 270,270 270,218 "></polygon>
|
207 |
+
<path
|
208 |
+
fill="#5B4E96"
|
209 |
+
d="M260.7,68.1c-10.4-18.6-29.3-31.2-50.6-33.6c-12.4-1.4-25,0.6-36.3,6c-1.3,0.6-2.6,1.3-3.9,2 C154.5,51,143,65.3,138.3,81.7l0,0.1l-36.4,103.8c-3.1,9.4-9.1,17-17.1,21.4c-0.7,0.4-1.4,0.7-2.1,1.1c-6.1,2.9-12.8,4-19.5,3.2 c-11.5-1.3-21.6-8.1-27.2-18.1c-4.6-8.3-5.7-18-3.1-27.2c2.6-9.2,8.7-16.9,17.1-21.5c0.7-0.4,1.4-0.8,2.1-1.1 c6.1-2.9,12.7-4,19.6-3.2c0.3,0,0.5,0.1,0.8,0.1L64.9,162c-0.5,1.5,0.3,3.1,1.8,3.6l19.4,6.3c1.5,0.5,3-0.3,3.5-1.7l16.7-47.4 c0.4-1.2,0.3-2.5-0.3-3.6c-0.6-1.1-1.6-2-2.8-2.4l-17.6-5.1c-0.4-0.1-0.8-0.2-1.2-0.3l-1.6-0.5l0,0.1c-2.5-0.6-5-1.1-7.5-1.3 c-12.5-1.4-25.1,0.6-36.4,6c-1.3,0.6-2.6,1.3-3.9,2c-15.6,8.7-27,22.9-31.9,40.1c-4.9,17.1-2.8,35.1,5.8,50.5 c10.4,18.6,29.3,31.2,50.6,33.6c12.4,1.4,25-0.6,36.3-6c1.3-0.6,2.6-1.3,3.9-2c15.3-8.5,26.8-22.8,31.6-39.2l0-0.1L167.8,91 l0.1-0.2l0-0.1c4.1-10.5,9.3-17,17-21.3c0.7-0.4,1.4-0.7,2.1-1.1c6.1-2.9,12.8-4,19.5-3.2c11.5,1.3,21.6,8.1,27.2,18.1 c9.6,17.2,3.3,39.1-14,48.7c-0.7,0.4-1.4,0.7-2.1,1.1c-6.1,2.9-12.8,4-19.7,3.2c-2-0.2-4.1-0.6-6.1-1.2l-0.2-0.1l-11.3-3.4 c-1.2-0.4-2.5,0.3-2.9,1.5l-8.8,24.8c-0.5,1.3,0.3,2.7,1.6,3.1l13.9,4c3.4,0.9,6.8,1.6,10.3,2c12.4,1.4,25-0.6,36.3-6l0.1,0 c1.3-0.6,2.6-1.3,3.9-2C266.8,140.8,278.5,100.1,260.7,68.1z"></path>
|
210 |
+
</g>
|
211 |
+
</svg>
|
Gutenberg/src/document/edit.js
ADDED
@@ -0,0 +1,235 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
|
5 |
+
import Iframe from '../common/Iframe';
|
6 |
+
import EmbedLoading from '../common/embed-loading';
|
7 |
+
/**
|
8 |
+
* WordPress dependencies
|
9 |
+
*/
|
10 |
+
|
11 |
+
const {__} = wp.i18n;
|
12 |
+
const {getBlobByURL, isBlobURL, revokeBlobURL} = wp.blob;
|
13 |
+
const {BlockIcon, MediaPlaceholder ,InspectorControls} = wp.editor;
|
14 |
+
const {Component, Fragment} = wp.element;
|
15 |
+
const { RangeControl,PanelBody, ExternalLink,ToggleControl } = wp.components;
|
16 |
+
import {DocumentIcon} from '../common/icons'
|
17 |
+
|
18 |
+
const ALLOWED_MEDIA_TYPES = [
|
19 |
+
'application/pdf',
|
20 |
+
'application/msword',
|
21 |
+
'application/vnd.ms-powerpoint',
|
22 |
+
'application/vnd.ms-excel',
|
23 |
+
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
24 |
+
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
25 |
+
'application/vnd.openxmlformats-officedocument.presentationml.presentation'
|
26 |
+
];
|
27 |
+
|
28 |
+
class DocumentEdit extends Component {
|
29 |
+
constructor() {
|
30 |
+
super(...arguments);
|
31 |
+
this.onSelectFile = this.onSelectFile.bind(this);
|
32 |
+
|
33 |
+
this.onUploadError = this.onUploadError.bind(this);
|
34 |
+
this.onLoad = this.onLoad.bind(this);
|
35 |
+
this.hideOverlay = this.hideOverlay.bind(this);
|
36 |
+
this.state = {
|
37 |
+
hasError: false,
|
38 |
+
fetching:false,
|
39 |
+
interactive: false,
|
40 |
+
loadPdf: true,
|
41 |
+
};
|
42 |
+
}
|
43 |
+
|
44 |
+
|
45 |
+
componentDidMount() {
|
46 |
+
const {
|
47 |
+
attributes,
|
48 |
+
mediaUpload,
|
49 |
+
noticeOperations
|
50 |
+
} = this.props;
|
51 |
+
const {href} = attributes;
|
52 |
+
|
53 |
+
// Upload a file drag-and-dropped into the editor
|
54 |
+
if (isBlobURL(href)) {
|
55 |
+
const file = getBlobByURL(href);
|
56 |
+
|
57 |
+
mediaUpload({
|
58 |
+
filesList: [file],
|
59 |
+
onFileChange: ([media]) => this.onSelectFile(media),
|
60 |
+
onError: (message) => {
|
61 |
+
this.setState({hasError: true});
|
62 |
+
noticeOperations.createErrorNotice(message);
|
63 |
+
},
|
64 |
+
});
|
65 |
+
|
66 |
+
revokeBlobURL(href);
|
67 |
+
}
|
68 |
+
|
69 |
+
if(this.props.attributes.href && this.props.attributes.mime === 'application/pdf' && this.state.loadPdf){
|
70 |
+
this.setState({loadPdf: false});
|
71 |
+
PDFObject.embed(this.props.attributes.href, "."+this.props.attributes.id);
|
72 |
+
}
|
73 |
+
|
74 |
+
}
|
75 |
+
|
76 |
+
componentDidUpdate(prevProps) {
|
77 |
+
|
78 |
+
// Reset copy confirmation state when block is deselected
|
79 |
+
if (prevProps.isSelected && !this.props.isSelected) {
|
80 |
+
this.setState({showCopyConfirmation: false});
|
81 |
+
}
|
82 |
+
|
83 |
+
}
|
84 |
+
|
85 |
+
static getDerivedStateFromProps(nextProps, state) {
|
86 |
+
if (!nextProps.isSelected && state.interactive) {
|
87 |
+
return {interactive: false};
|
88 |
+
}
|
89 |
+
|
90 |
+
return null;
|
91 |
+
}
|
92 |
+
|
93 |
+
hideOverlay() {
|
94 |
+
this.setState({interactive: true});
|
95 |
+
}
|
96 |
+
|
97 |
+
onLoad() {
|
98 |
+
this.setState({
|
99 |
+
fetching:false
|
100 |
+
})
|
101 |
+
}
|
102 |
+
|
103 |
+
onSelectFile(media) {
|
104 |
+
if (media && media.url) {
|
105 |
+
this.setState({hasError: false});
|
106 |
+
this.props.setAttributes({
|
107 |
+
href: media.url,
|
108 |
+
fileName: media.title,
|
109 |
+
id: 'embedpress-pdf-'+Date.now(),
|
110 |
+
mime: media.mime,
|
111 |
+
});
|
112 |
+
|
113 |
+
if(embedpressObj.embedpress_pro){
|
114 |
+
this.props.setAttributes({
|
115 |
+
powered_by: false
|
116 |
+
});
|
117 |
+
}
|
118 |
+
if(media.mime === 'application/pdf'){
|
119 |
+
this.setState({loadPdf: false});
|
120 |
+
PDFObject.embed(media.url, "."+this.props.attributes.id);
|
121 |
+
}
|
122 |
+
}
|
123 |
+
|
124 |
+
}
|
125 |
+
|
126 |
+
onUploadError(message) {
|
127 |
+
const {noticeOperations} = this.props;
|
128 |
+
noticeOperations.removeAllNotices();
|
129 |
+
noticeOperations.createErrorNotice(message);
|
130 |
+
}
|
131 |
+
|
132 |
+
|
133 |
+
|
134 |
+
|
135 |
+
render() {
|
136 |
+
const {attributes, noticeUI,setAttributes} = this.props;
|
137 |
+
const {href,mime,id,width,height,powered_by} = attributes;
|
138 |
+
const {hasError,interactive,fetching,loadPdf} = this.state;
|
139 |
+
const min = 1;
|
140 |
+
const max = 1000;
|
141 |
+
const docLink = 'https://embedpress.com/docs/embed-docuemnt/'
|
142 |
+
if (!href || hasError) {
|
143 |
+
|
144 |
+
return (
|
145 |
+
<div className={"embedpress-document-editmode"}>
|
146 |
+
<MediaPlaceholder
|
147 |
+
icon={<BlockIcon icon={DocumentIcon}/>}
|
148 |
+
labels={{
|
149 |
+
title: __('Document'),
|
150 |
+
instructions: __(
|
151 |
+
'Upload a file or pick one from your media library for embed.'
|
152 |
+
),
|
153 |
+
}}
|
154 |
+
onSelect={this.onSelectFile}
|
155 |
+
notices={noticeUI}
|
156 |
+
allowedTypes={ALLOWED_MEDIA_TYPES}
|
157 |
+
onError={this.onUploadError}
|
158 |
+
|
159 |
+
>
|
160 |
+
|
161 |
+
<div style={{width:'100%'}} className="components-placeholder__learn-more embedpress-doc-link">
|
162 |
+
<ExternalLink href={docLink}>Learn more about Embedded document </ExternalLink>
|
163 |
+
</div>
|
164 |
+
</MediaPlaceholder>
|
165 |
+
|
166 |
+
</div>
|
167 |
+
|
168 |
+
);
|
169 |
+
} else {
|
170 |
+
const url = '//view.officeapps.live.com/op/embed.aspx?src='+href;
|
171 |
+
return (
|
172 |
+
<Fragment>
|
173 |
+
{(fetching && mime !== 'application/pdf') ? <EmbedLoading/> : null}
|
174 |
+
{ mime === 'application/pdf' && (
|
175 |
+
<div style={{height:height,width:width}} className={'embedpress-embed-document-pdf'+' '+id} data-emid={id} data-emsrc={href}></div>
|
176 |
+
|
177 |
+
) }
|
178 |
+
{ mime !== 'application/pdf' && (
|
179 |
+
<Iframe onMouseUponMouseUp={ this.hideOverlay } style={{height:height,width:width,display: fetching || !loadPdf ? 'none' : ''}} onLoad={this.onLoad} src={url}/>
|
180 |
+
) }
|
181 |
+
{ ! interactive && (
|
182 |
+
<div
|
183 |
+
className="block-library-embed__interactive-overlay"
|
184 |
+
onMouseUp={ this.hideOverlay }
|
185 |
+
/>
|
186 |
+
) }
|
187 |
+
{ powered_by && (
|
188 |
+
<p className="embedpress-el-powered">Powered By EmbedPress</p>
|
189 |
+
)}
|
190 |
+
|
191 |
+
<InspectorControls key="inspector">
|
192 |
+
<PanelBody
|
193 |
+
title={ __( 'Embed Size', 'embedpress' ) }
|
194 |
+
>
|
195 |
+
<RangeControl
|
196 |
+
label={ __(
|
197 |
+
'Width',
|
198 |
+
'embedpress'
|
199 |
+
) }
|
200 |
+
value={ width }
|
201 |
+
onChange={ ( width ) =>
|
202 |
+
setAttributes( { width } )
|
203 |
+
}
|
204 |
+
max={ max }
|
205 |
+
min={ min }
|
206 |
+
/>
|
207 |
+
<RangeControl
|
208 |
+
label={ __(
|
209 |
+
'Height',
|
210 |
+
'embedpress'
|
211 |
+
) }
|
212 |
+
value={height }
|
213 |
+
onChange={ ( height ) =>
|
214 |
+
setAttributes( { height } )
|
215 |
+
}
|
216 |
+
max={ max }
|
217 |
+
min={ min }
|
218 |
+
/>
|
219 |
+
<ToggleControl
|
220 |
+
label={ __( 'Powered By' ) }
|
221 |
+
onChange={ ( powered_by ) =>
|
222 |
+
setAttributes( { powered_by } )
|
223 |
+
}
|
224 |
+
checked={ powered_by }
|
225 |
+
/>
|
226 |
+
</PanelBody>
|
227 |
+
</InspectorControls>
|
228 |
+
</Fragment>
|
229 |
+
);
|
230 |
+
}
|
231 |
+
|
232 |
+
}
|
233 |
+
|
234 |
+
};
|
235 |
+
export default DocumentEdit;
|
Gutenberg/src/document/editor.scss
ADDED
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
7 |
+
|
8 |
+
.embedpress-document-editmode .components-placeholder__instructions:after {
|
9 |
+
content:"\ASupported File Type: PDF, DOC, PPT, XLS etc ";
|
10 |
+
white-space: pre;
|
11 |
+
}
|
Gutenberg/src/document/index.js
ADDED
@@ -0,0 +1,109 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {DocumentIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
|
18 |
+
/**
|
19 |
+
* Register: aa Gutenberg Block.
|
20 |
+
*
|
21 |
+
* Registers a new block provided a unique name and an object defining its
|
22 |
+
* behavior. Once registered, the block is made editor as an option to any
|
23 |
+
* editor interface where blocks are implemented.
|
24 |
+
*
|
25 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
26 |
+
* @param {string} name Block name.
|
27 |
+
* @param {Object} settings Block settings.
|
28 |
+
* @return {?WPBlock} The block, if it has been successfully
|
29 |
+
* registered; otherwise `undefined`.
|
30 |
+
*/
|
31 |
+
registerBlockType('embedpress/document', {
|
32 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
33 |
+
title: __('Document'), // Block title.
|
34 |
+
icon: DocumentIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
35 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
36 |
+
keywords: [
|
37 |
+
__('embedpress'),
|
38 |
+
__('pdf'),
|
39 |
+
__('doc'),
|
40 |
+
__('ppt'),
|
41 |
+
],
|
42 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
43 |
+
attributes: {
|
44 |
+
id: {
|
45 |
+
type: "string"
|
46 |
+
},
|
47 |
+
href: {
|
48 |
+
type: "string"
|
49 |
+
},
|
50 |
+
powered_by: {
|
51 |
+
type: "boolean",
|
52 |
+
default: true,
|
53 |
+
},
|
54 |
+
width: {
|
55 |
+
type: 'number',
|
56 |
+
default: 600,
|
57 |
+
},
|
58 |
+
height: {
|
59 |
+
type: 'number',
|
60 |
+
default: 600,
|
61 |
+
},
|
62 |
+
fileName: {
|
63 |
+
type: "string",
|
64 |
+
},
|
65 |
+
mime: {
|
66 |
+
type: "string",
|
67 |
+
}
|
68 |
+
},
|
69 |
+
/**
|
70 |
+
* The edit function describes the structure of your block in the context of the editor.
|
71 |
+
* This represents what the editor will render when the block is used.
|
72 |
+
*
|
73 |
+
* The "edit" property must be a valid function.
|
74 |
+
*
|
75 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
76 |
+
*/
|
77 |
+
edit,
|
78 |
+
|
79 |
+
/**
|
80 |
+
* The save function defines the way in which the different attributes should be combined
|
81 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
82 |
+
*
|
83 |
+
* The "save" property must be specified and must be a valid function.
|
84 |
+
*
|
85 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
86 |
+
*/
|
87 |
+
//save
|
88 |
+
save: function (props) {
|
89 |
+
const {href, mime, id, width, height, powered_by} = props.attributes
|
90 |
+
const iframeSrc = '//view.officeapps.live.com/op/embed.aspx?src='+href;
|
91 |
+
const defaultClass = "embedpress-embed-document"
|
92 |
+
return (
|
93 |
+
<figure className={defaultClass}>
|
94 |
+
{mime === 'application/pdf' && (
|
95 |
+
<div style={{height: height, width: width}} className={'embedpress-embed-document-pdf' + ' ' + id}
|
96 |
+
data-emid={id} data-emsrc={href}></div>
|
97 |
+
)}
|
98 |
+
{mime !== 'application/pdf' && (
|
99 |
+
<iframe style={{height: height, width: width}} src={iframeSrc} mozallowfullscreen="true"
|
100 |
+
webkitallowfullscreen="true"/>
|
101 |
+
)}
|
102 |
+
{powered_by && (
|
103 |
+
<p className="embedpress-el-powered">Powered By EmbedPress</p>
|
104 |
+
)}
|
105 |
+
</figure>
|
106 |
+
);
|
107 |
+
},
|
108 |
+
|
109 |
+
});
|
Gutenberg/src/document/style.scss
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
6 |
+
|
7 |
+
|
8 |
+
.pdfobject-container {
|
9 |
+
height: 600px;
|
10 |
+
width:600px;
|
11 |
+
margin: 0 auto;
|
12 |
+
}
|
13 |
+
|
14 |
+
.embedpress-el-powered {
|
15 |
+
text-align: center;
|
16 |
+
margin-top: 0 !important;
|
17 |
+
font-size: 16px !important;
|
18 |
+
font-weight: 700;
|
19 |
+
}
|
20 |
+
.embedpress-embed-document iframe ,
|
21 |
+
[data-type="embedpress/document"] iframe{
|
22 |
+
margin: 0 auto;
|
23 |
+
display: block;
|
24 |
+
}
|
25 |
+
.embedpress-document-editmode .components-form-file-upload {
|
26 |
+
display: none !important;
|
27 |
+
}
|
28 |
+
|
29 |
+
|
Gutenberg/src/embedpress/edit.js
ADDED
@@ -0,0 +1,120 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import EmbedWrap from '../common/embed-wrap';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const {__} = wp.i18n;
|
13 |
+
import {embedPressIcon} from '../common/icons';
|
14 |
+
const {TextControl, PanelBody} = wp.components;
|
15 |
+
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
|
16 |
+
const { Fragment } = wp.element;
|
17 |
+
|
18 |
+
export default function EmbedPress({attributes, className, setAttributes}){
|
19 |
+
const {url, editingURL, fetching, cannotEmbed, interactive, embedHTML, height, width} = attributes;
|
20 |
+
///const blockProps = useBlockProps();
|
21 |
+
function switchBackToURLInput() {
|
22 |
+
setAttributes( {editingURL: true});
|
23 |
+
}
|
24 |
+
function onLoad() {
|
25 |
+
setAttributes( {fetching: false});
|
26 |
+
}
|
27 |
+
|
28 |
+
function embed(event) {
|
29 |
+
if (event) event.preventDefault();
|
30 |
+
|
31 |
+
if (url) {
|
32 |
+
setAttributes({
|
33 |
+
fetching: true
|
34 |
+
});
|
35 |
+
console.log("test");
|
36 |
+
// send api request to get iframe url
|
37 |
+
let fetchData = async (url) => {
|
38 |
+
return await fetch(`${embedpressObj.site_url}/wp-json/embedpress/v1/oembed/embedpress?url=${url}&width=${width}&height=${height}`).then(response => response.json());
|
39 |
+
}
|
40 |
+
fetchData(url).then(data => {
|
41 |
+
setAttributes({
|
42 |
+
fetching: false
|
43 |
+
});
|
44 |
+
if ((data.data && data.data.status === 404) || !data.embed){
|
45 |
+
setAttributes({
|
46 |
+
cannotEmbed: true,
|
47 |
+
editingURL: true,
|
48 |
+
})
|
49 |
+
}else{
|
50 |
+
setAttributes({
|
51 |
+
embedHTML: data.embed,
|
52 |
+
cannotEmbed: false,
|
53 |
+
editingURL: false,
|
54 |
+
});
|
55 |
+
}
|
56 |
+
});
|
57 |
+
|
58 |
+
|
59 |
+
} else {
|
60 |
+
setAttributes({
|
61 |
+
cannotEmbed: true,
|
62 |
+
fetching: false,
|
63 |
+
editingURL: true
|
64 |
+
})
|
65 |
+
}
|
66 |
+
}
|
67 |
+
return (
|
68 |
+
<Fragment>
|
69 |
+
<InspectorControls>
|
70 |
+
<PanelBody title={__("Customize Embedded Link")}>
|
71 |
+
<p>{__("You can adjust the width and height of embedded content.")}</p>
|
72 |
+
<TextControl
|
73 |
+
label={__("Width")}
|
74 |
+
value={ width }
|
75 |
+
onChange={ ( width ) => setAttributes( { width } ) }
|
76 |
+
/>
|
77 |
+
<TextControl
|
78 |
+
label={__("Height")}
|
79 |
+
value={ height }
|
80 |
+
onChange={ ( height ) => setAttributes( { height } ) }
|
81 |
+
/>
|
82 |
+
{(embedHTML && !editingURL) && <button onClick={embed}>{__('Apply')}</button>}
|
83 |
+
</PanelBody>
|
84 |
+
</InspectorControls>
|
85 |
+
{ ((!embedHTML || editingURL) && !fetching) && <EmbedPlaceholder
|
86 |
+
label={__('EmbedPress - Embed anything from 100+ sites')}
|
87 |
+
onSubmit={embed}
|
88 |
+
value={url}
|
89 |
+
cannotEmbed={cannotEmbed}
|
90 |
+
onChange={(event) => setAttributes({url: event.target.value})}
|
91 |
+
icon={embedPressIcon}
|
92 |
+
DocTitle={__('Learn more about EmbedPress')}
|
93 |
+
docLink={'https://embedpress.com/docs/'}
|
94 |
+
/> }
|
95 |
+
|
96 |
+
{ fetching ? <div className={className}><EmbedLoading/> </div> : null}
|
97 |
+
|
98 |
+
{(embedHTML && !editingURL && !fetching) && <figure {...useBlockProps()}>
|
99 |
+
<EmbedWrap style={{display: fetching ? 'none' : ''}} dangerouslySetInnerHTML={{
|
100 |
+
__html: embedHTML
|
101 |
+
}}></EmbedWrap>
|
102 |
+
|
103 |
+
<div
|
104 |
+
className="block-library-embed__interactive-overlay"
|
105 |
+
onMouseUp={ setAttributes({interactive: true}) }
|
106 |
+
/>
|
107 |
+
|
108 |
+
<EmbedControls
|
109 |
+
showEditButton={embedHTML && !cannotEmbed}
|
110 |
+
switchBackToURLInput={switchBackToURLInput}
|
111 |
+
/>
|
112 |
+
</figure>}
|
113 |
+
|
114 |
+
</Fragment>
|
115 |
+
|
116 |
+
);
|
117 |
+
|
118 |
+
}
|
119 |
+
|
120 |
+
|
Gutenberg/src/embedpress/editor.scss
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
7 |
+
.wp-block-embedpress-embedpress iframe{
|
8 |
+
max-width: 100%;
|
9 |
+
}
|
10 |
+
.ose-the-new-york-times iframe{
|
11 |
+
min-height: 500px;
|
12 |
+
max-height: 100%;
|
13 |
+
}
|
Gutenberg/src/embedpress/index.js
ADDED
@@ -0,0 +1,100 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {embedPressIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Register: aa Gutenberg Block.
|
19 |
+
*
|
20 |
+
* Registers a new block provided a unique name and an object defining its
|
21 |
+
* behavior. Once registered, the block is made editor as an option to any
|
22 |
+
* editor interface where blocks are implemented.
|
23 |
+
*
|
24 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
25 |
+
* @param {string} name Block name.
|
26 |
+
* @param {Object} settings Block settings.
|
27 |
+
* @return {?WPBlock} The block, if it has been successfully
|
28 |
+
* registered; otherwise `undefined`.
|
29 |
+
*/
|
30 |
+
registerBlockType('embedpress/embedpress', {
|
31 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
32 |
+
title: __('EmbedPress'), // Block title.
|
33 |
+
icon: embedPressIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
34 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
|
35 |
+
keywords: [
|
36 |
+
'embedpress',
|
37 |
+
'embed',
|
38 |
+
'google',
|
39 |
+
'youtube',
|
40 |
+
'docs',
|
41 |
+
],
|
42 |
+
supports: {align: ["right","left","center"], default: 'center',lightBlockWrapper: true},
|
43 |
+
attributes: {
|
44 |
+
url: {
|
45 |
+
type: 'string',
|
46 |
+
default: ''
|
47 |
+
},
|
48 |
+
embedHTML: {
|
49 |
+
type: 'string',
|
50 |
+
default: ''
|
51 |
+
},
|
52 |
+
height: {
|
53 |
+
type: 'string',
|
54 |
+
default: '450'
|
55 |
+
},
|
56 |
+
width: {
|
57 |
+
type: 'string',
|
58 |
+
default: '600'
|
59 |
+
},
|
60 |
+
editingURL: {
|
61 |
+
type: 'boolean',
|
62 |
+
default: false
|
63 |
+
},
|
64 |
+
fetching: {
|
65 |
+
type: 'boolean',
|
66 |
+
default: false
|
67 |
+
},
|
68 |
+
cannotEmbed: {
|
69 |
+
type: 'boolean',
|
70 |
+
default: false
|
71 |
+
},
|
72 |
+
interactive: {
|
73 |
+
type: 'boolean',
|
74 |
+
default: false
|
75 |
+
},
|
76 |
+
align: {
|
77 |
+
type: 'string',
|
78 |
+
default: 'center'
|
79 |
+
},
|
80 |
+
},
|
81 |
+
/**
|
82 |
+
* The edit function describes the structure of your block in the context of the editor.
|
83 |
+
* This represents what the editor will render when the block is used.
|
84 |
+
*
|
85 |
+
* The "edit" property must be a valid function.
|
86 |
+
*
|
87 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
88 |
+
*/
|
89 |
+
edit,
|
90 |
+
|
91 |
+
/**
|
92 |
+
* The save function defines the way in which the different attributes should be combined
|
93 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
94 |
+
*
|
95 |
+
* The "save" property must be specified and must be a valid function.
|
96 |
+
*
|
97 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
98 |
+
*/
|
99 |
+
save: () => null,
|
100 |
+
});
|
Gutenberg/src/embedpress/index.php
ADDED
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
// Exit if accessed directly.
|
3 |
+
if ( ! defined( 'ABSPATH' ) ) {
|
4 |
+
exit;
|
5 |
+
}
|
6 |
+
/**
|
7 |
+
* It renders gutenberg block of embedpress on the frontend
|
8 |
+
* @param array $attributes
|
9 |
+
*/
|
10 |
+
function embedpress_render_block($attributes){
|
11 |
+
if ( !empty( $attributes['embedHTML']) ) {
|
12 |
+
$embed = apply_filters( 'embedpress_gutenberg_embed', $attributes['embedHTML'], $attributes );
|
13 |
+
$aligns = [
|
14 |
+
'left' => 'alignleft',
|
15 |
+
'right' => 'alignright',
|
16 |
+
'wide' => 'alignwide',
|
17 |
+
'full' => 'alignfull'
|
18 |
+
];
|
19 |
+
$alignment = isset($attributes['align']) && isset($aligns[$attributes['align']])?$aligns[$attributes['align']]:'';
|
20 |
+
ob_start();
|
21 |
+
?>
|
22 |
+
<div class="embedpress-gutenberg-wrapper <?php echo esc_attr($alignment) ?>">
|
23 |
+
<div class="wp-block-embed__wrapper">
|
24 |
+
<?php echo $embed; ?>
|
25 |
+
</div>
|
26 |
+
</div>
|
27 |
+
<?php
|
28 |
+
return ob_get_clean();
|
29 |
+
}
|
30 |
+
}
|
Gutenberg/src/embedpress/style.scss
ADDED
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
6 |
+
//.embedpress-gutenberg-wrapper iframe{
|
7 |
+
// width: 100%;
|
8 |
+
// height: 100%;
|
9 |
+
//}
|
10 |
+
.embedpress-gutenberg-wrapper {
|
11 |
+
margin: 30px auto;
|
12 |
+
iframe {
|
13 |
+
max-width: 100%;
|
14 |
+
}
|
15 |
+
}
|
16 |
+
.ose-the-new-york-times iframe{
|
17 |
+
min-height: 500px;
|
18 |
+
max-height: 100%;
|
19 |
+
}
|
Gutenberg/src/google-docs/edit.js
ADDED
@@ -0,0 +1,161 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const {__} = wp.i18n;
|
13 |
+
const {Component} = wp.element;
|
14 |
+
import {googleDocsIcon} from '../common/icons';
|
15 |
+
|
16 |
+
class GoogleDocsEdit extends Component {
|
17 |
+
constructor() {
|
18 |
+
super(...arguments);
|
19 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
20 |
+
this.setUrl = this.setUrl.bind(this);
|
21 |
+
this.updateAlignment = this.updateAlignment.bind(this);
|
22 |
+
this.onLoad = this.onLoad.bind(this);
|
23 |
+
this.hideOverlay = this.hideOverlay.bind(this);
|
24 |
+
this.state = {
|
25 |
+
editingURL: false,
|
26 |
+
url: this.props.attributes.url,
|
27 |
+
fetching: true,
|
28 |
+
cannotEmbed: false,
|
29 |
+
interactive: false
|
30 |
+
};
|
31 |
+
}
|
32 |
+
|
33 |
+
static getDerivedStateFromProps(nextProps, state) {
|
34 |
+
if (!nextProps.isSelected && state.interactive) {
|
35 |
+
return {interactive: false};
|
36 |
+
}
|
37 |
+
|
38 |
+
return null;
|
39 |
+
}
|
40 |
+
|
41 |
+
hideOverlay() {
|
42 |
+
this.setState({interactive: true});
|
43 |
+
}
|
44 |
+
|
45 |
+
onLoad() {
|
46 |
+
this.setState({
|
47 |
+
fetching: false
|
48 |
+
})
|
49 |
+
}
|
50 |
+
|
51 |
+
decodeHTMLEntities(str) {
|
52 |
+
if (str && typeof str === 'string') {
|
53 |
+
// strip script/html tags
|
54 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
55 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
56 |
+
|
57 |
+
}
|
58 |
+
return str;
|
59 |
+
}
|
60 |
+
|
61 |
+
updateAlignment(nextAlign) {
|
62 |
+
const {setAttributes} = this.props;
|
63 |
+
const extraUpdatedAttributes =
|
64 |
+
['wide', 'full'].indexOf(nextAlign) !== -1
|
65 |
+
? {width: undefined, height: undefined}
|
66 |
+
: {};
|
67 |
+
setAttributes({
|
68 |
+
...extraUpdatedAttributes,
|
69 |
+
align: nextAlign,
|
70 |
+
});
|
71 |
+
}
|
72 |
+
|
73 |
+
|
74 |
+
setUrl(event) {
|
75 |
+
if (event) {
|
76 |
+
event.preventDefault();
|
77 |
+
}
|
78 |
+
const {url} = this.state;
|
79 |
+
const {setAttributes} = this.props;
|
80 |
+
setAttributes({url});
|
81 |
+
if (url && url.match(/^http[s]?:\/\/((?:www\.)?docs\.google\.com(?:.*)?(?:document|presentation|spreadsheets|forms|drawings)\/[a-z0-9\/\?=_\-\.\,&%\$#\@\!\+]*)/i)) {
|
82 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
83 |
+
var regEx = /google\.com(?:.+)?(document|presentation|spreadsheets|forms|drawings)/i;
|
84 |
+
var match = regEx.exec(iframeSrc);
|
85 |
+
var type = match[1];
|
86 |
+
if (type && type === 'document') {
|
87 |
+
if (!iframeSrc.match(/([?&])embedded=true/i)) {
|
88 |
+
if (iframeSrc.indexOf('?') > -1) {
|
89 |
+
iframeSrc += '&embedded=true';
|
90 |
+
} else {
|
91 |
+
iframeSrc += '?embedded=true'
|
92 |
+
}
|
93 |
+
}
|
94 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
95 |
+
setAttributes({iframeSrc: iframeSrc})
|
96 |
+
} else {
|
97 |
+
this.setState({
|
98 |
+
cannotEmbed: true,
|
99 |
+
editingURL: true
|
100 |
+
})
|
101 |
+
}
|
102 |
+
} else {
|
103 |
+
this.setState({
|
104 |
+
cannotEmbed: true,
|
105 |
+
editingURL: true
|
106 |
+
})
|
107 |
+
}
|
108 |
+
}
|
109 |
+
|
110 |
+
switchBackToURLInput() {
|
111 |
+
this.setState({editingURL: true});
|
112 |
+
}
|
113 |
+
|
114 |
+
render() {
|
115 |
+
const {url, editingURL, fetching, cannotEmbed, interactive} = this.state;
|
116 |
+
const {iframeSrc} = this.props.attributes;
|
117 |
+
const label = __('Google Docs URL');
|
118 |
+
|
119 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
120 |
+
if (!iframeSrc || editingURL) {
|
121 |
+
return (
|
122 |
+
<div>
|
123 |
+
<EmbedPlaceholder
|
124 |
+
label={label}
|
125 |
+
onSubmit={this.setUrl}
|
126 |
+
value={url}
|
127 |
+
cannotEmbed={cannotEmbed}
|
128 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
129 |
+
icon={googleDocsIcon}
|
130 |
+
DocTitle={__('Learn more about Google doc embed')}
|
131 |
+
docLink={'https://embedpress.com/docs/embed-google-docs-wordpress/'}
|
132 |
+
/>
|
133 |
+
</div>
|
134 |
+
|
135 |
+
);
|
136 |
+
} else {
|
137 |
+
return (
|
138 |
+
<div>
|
139 |
+
{fetching ? <EmbedLoading/> : null}
|
140 |
+
|
141 |
+
<Iframe src={iframeSrc} onMouseUp={ this.hideOverlay } onLoad={this.onLoad} style={{display: fetching ? 'none' : ''}}
|
142 |
+
frameBorder="0" width="600" height="450"/>
|
143 |
+
|
144 |
+
{ ! interactive && (
|
145 |
+
<div
|
146 |
+
className="block-library-embed__interactive-overlay"
|
147 |
+
onMouseUp={ this.hideOverlay }
|
148 |
+
/>
|
149 |
+
) }
|
150 |
+
|
151 |
+
<EmbedControls
|
152 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
153 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
154 |
+
/>
|
155 |
+
</div>
|
156 |
+
)
|
157 |
+
}
|
158 |
+
|
159 |
+
}
|
160 |
+
};
|
161 |
+
export default GoogleDocsEdit;
|
Gutenberg/src/google-docs/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/google-docs/index.js
ADDED
@@ -0,0 +1,110 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {googleDocsIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Register: aa Gutenberg Block.
|
19 |
+
*
|
20 |
+
* Registers a new block provided a unique name and an object defining its
|
21 |
+
* behavior. Once registered, the block is made editor as an option to any
|
22 |
+
* editor interface where blocks are implemented.
|
23 |
+
*
|
24 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
25 |
+
* @param {string} name Block name.
|
26 |
+
* @param {Object} settings Block settings.
|
27 |
+
* @return {?WPBlock} The block, if it has been successfully
|
28 |
+
* registered; otherwise `undefined`.
|
29 |
+
*/
|
30 |
+
registerBlockType('embedpress/google-docs-block', {
|
31 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
32 |
+
title: __('Google Docs'), // Block title.
|
33 |
+
icon: googleDocsIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
34 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
|
35 |
+
keywords: [
|
36 |
+
__('embedpress'),
|
37 |
+
__('google'),
|
38 |
+
__('docs'),
|
39 |
+
],
|
40 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
41 |
+
attributes: {
|
42 |
+
url: {
|
43 |
+
type: 'string',
|
44 |
+
default: ''
|
45 |
+
},
|
46 |
+
iframeSrc: {
|
47 |
+
type: 'string',
|
48 |
+
default: ''
|
49 |
+
}
|
50 |
+
},
|
51 |
+
/**
|
52 |
+
* The edit function describes the structure of your block in the context of the editor.
|
53 |
+
* This represents what the editor will render when the block is used.
|
54 |
+
*
|
55 |
+
* The "edit" property must be a valid function.
|
56 |
+
*
|
57 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
58 |
+
*/
|
59 |
+
edit,
|
60 |
+
|
61 |
+
/**
|
62 |
+
* The save function defines the way in which the different attributes should be combined
|
63 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
64 |
+
*
|
65 |
+
* The "save" property must be specified and must be a valid function.
|
66 |
+
*
|
67 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
68 |
+
*/
|
69 |
+
save: function (props) {
|
70 |
+
const {iframeSrc} = props.attributes
|
71 |
+
const defaultClass = 'ose-google-docs-document'
|
72 |
+
if (iframeSrc) {
|
73 |
+
return (
|
74 |
+
<figure className={defaultClass}>
|
75 |
+
|
76 |
+
<iframe src={iframeSrc} frameBorder="0" width="600" height="450" allowFullScreen="true"
|
77 |
+
mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
|
78 |
+
|
79 |
+
</figure>
|
80 |
+
|
81 |
+
);
|
82 |
+
}
|
83 |
+
},
|
84 |
+
deprecated: [
|
85 |
+
{
|
86 |
+
attributes: {
|
87 |
+
align: {
|
88 |
+
type: "string",
|
89 |
+
enum: ["left", "center", "right", "wide", "full"]
|
90 |
+
},
|
91 |
+
},
|
92 |
+
|
93 |
+
save: function (props) {
|
94 |
+
const {iframeSrc} = props.attributes
|
95 |
+
if (iframeSrc) {
|
96 |
+
return (
|
97 |
+
<div className="ose-google-docs-document">
|
98 |
+
|
99 |
+
<iframe src={iframeSrc} frameBorder="0" width="600" height="450" allowFullScreen="true"
|
100 |
+
mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
|
101 |
+
|
102 |
+
</div>
|
103 |
+
|
104 |
+
);
|
105 |
+
}
|
106 |
+
},
|
107 |
+
}
|
108 |
+
]
|
109 |
+
|
110 |
+
});
|
Gutenberg/src/google-docs/style.scss
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
Gutenberg/src/google-drawings/edit.js
ADDED
@@ -0,0 +1,116 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
|
8 |
+
/**
|
9 |
+
* WordPress dependencies
|
10 |
+
*/
|
11 |
+
const {__} = wp.i18n;
|
12 |
+
const {Component, Fragment} = wp.element;
|
13 |
+
import {googleDrawingsIcon} from '../common/icons';
|
14 |
+
|
15 |
+
class GoogleDrawingEdit extends Component {
|
16 |
+
constructor() {
|
17 |
+
super(...arguments);
|
18 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
19 |
+
this.setUrl = this.setUrl.bind(this);
|
20 |
+
this.onLoad = this.onLoad.bind(this);
|
21 |
+
this.state = {
|
22 |
+
editingURL: false,
|
23 |
+
url: this.props.attributes.url,
|
24 |
+
fetching: true,
|
25 |
+
cannotEmbed: false
|
26 |
+
};
|
27 |
+
}
|
28 |
+
|
29 |
+
onLoad() {
|
30 |
+
this.setState({
|
31 |
+
fetching: false
|
32 |
+
})
|
33 |
+
}
|
34 |
+
|
35 |
+
decodeHTMLEntities(str) {
|
36 |
+
if (str && typeof str === 'string') {
|
37 |
+
// strip script/html tags
|
38 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
39 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
40 |
+
|
41 |
+
}
|
42 |
+
return str;
|
43 |
+
}
|
44 |
+
|
45 |
+
|
46 |
+
setUrl(event) {
|
47 |
+
if (event) {
|
48 |
+
event.preventDefault();
|
49 |
+
}
|
50 |
+
const {url} = this.state;
|
51 |
+
const {setAttributes} = this.props;
|
52 |
+
setAttributes({url});
|
53 |
+
if (url && url.match(/^http[s]?:\/\/((?:www\.)?docs\.google\.com(?:.*)?(?:document|presentation|spreadsheets|forms|drawings)\/[a-z0-9\/\?=_\-\.\,&%\$#\@\!\+]*)/i)) {
|
54 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
55 |
+
var regEx = /google\.com(?:.+)?(document|presentation|spreadsheets|forms|drawings)/i;
|
56 |
+
var match = regEx.exec(iframeSrc);
|
57 |
+
var type = match[1];
|
58 |
+
if (type && type == 'drawings') {
|
59 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
60 |
+
setAttributes({iframeSrc: iframeSrc})
|
61 |
+
} else {
|
62 |
+
this.setState({
|
63 |
+
cannotEmbed: true,
|
64 |
+
editingURL: true
|
65 |
+
})
|
66 |
+
}
|
67 |
+
} else {
|
68 |
+
this.setState({
|
69 |
+
cannotEmbed: true,
|
70 |
+
editingURL: true
|
71 |
+
})
|
72 |
+
}
|
73 |
+
}
|
74 |
+
|
75 |
+
switchBackToURLInput() {
|
76 |
+
this.setState({editingURL: true});
|
77 |
+
}
|
78 |
+
|
79 |
+
render() {
|
80 |
+
const {url, editingURL, fetching, cannotEmbed} = this.state;
|
81 |
+
const {iframeSrc} = this.props.attributes;
|
82 |
+
|
83 |
+
const label = __('Google Drawings URL (Get your link from File -> Publish to the web -> Link)');
|
84 |
+
|
85 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
86 |
+
if (!iframeSrc || editingURL) {
|
87 |
+
return (
|
88 |
+
<EmbedPlaceholder
|
89 |
+
label={label}
|
90 |
+
onSubmit={this.setUrl}
|
91 |
+
value={url}
|
92 |
+
cannotEmbed={cannotEmbed}
|
93 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
94 |
+
icon={googleDrawingsIcon}
|
95 |
+
DocTitle={__('Learn more about Google drawing embed')}
|
96 |
+
docLink={'https://embedpress.com/docs/embed-google-drawings-wordpress/'}
|
97 |
+
/>
|
98 |
+
);
|
99 |
+
} else {
|
100 |
+
|
101 |
+
return (
|
102 |
+
<Fragment>
|
103 |
+
{fetching ? <EmbedLoading/> : null}
|
104 |
+
<img src={iframeSrc} onLoad={this.onLoad} style={{display: fetching ? 'none' : ''}} width="960"
|
105 |
+
height="720"/>
|
106 |
+
<EmbedControls
|
107 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
108 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
109 |
+
/>
|
110 |
+
</Fragment>
|
111 |
+
|
112 |
+
)
|
113 |
+
}
|
114 |
+
}
|
115 |
+
};
|
116 |
+
export default GoogleDrawingEdit;
|
Gutenberg/src/google-drawings/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/google-drawings/index.js
ADDED
@@ -0,0 +1,78 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {googleDrawingsIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Register: aa Gutenberg Block.
|
19 |
+
*
|
20 |
+
* Registers a new block provided a unique name and an object defining its
|
21 |
+
* behavior. Once registered, the block is made editor as an option to any
|
22 |
+
* editor interface where blocks are implemented.
|
23 |
+
*
|
24 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
25 |
+
* @param {string} name Block name.
|
26 |
+
* @param {Object} settings Block settings.
|
27 |
+
* @return {?WPBlock} The block, if it has been successfully
|
28 |
+
* registered; otherwise `undefined`.
|
29 |
+
*/
|
30 |
+
registerBlockType('embedpress/google-drawings-block', {
|
31 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
32 |
+
title: __('Google Drawings'), // Block title.
|
33 |
+
icon: googleDrawingsIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
34 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
35 |
+
keywords: [
|
36 |
+
__('embedpress'),
|
37 |
+
__('google'),
|
38 |
+
__('drawings'),
|
39 |
+
],
|
40 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
41 |
+
attributes: {
|
42 |
+
url: {
|
43 |
+
type: 'string',
|
44 |
+
default: ''
|
45 |
+
},
|
46 |
+
iframeSrc: {
|
47 |
+
type: 'string',
|
48 |
+
default: ''
|
49 |
+
}
|
50 |
+
},
|
51 |
+
/**
|
52 |
+
* The edit function describes the structure of your block in the context of the editor.
|
53 |
+
* This represents what the editor will render when the block is used.
|
54 |
+
*
|
55 |
+
* The "edit" property must be a valid function.
|
56 |
+
*
|
57 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
58 |
+
*/
|
59 |
+
edit,
|
60 |
+
|
61 |
+
/**
|
62 |
+
* The save function defines the way in which the different attributes should be combined
|
63 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
64 |
+
*
|
65 |
+
* The "save" property must be specified and must be a valid function.
|
66 |
+
*
|
67 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
68 |
+
*/
|
69 |
+
save: function (props) {
|
70 |
+
const {iframeSrc} = props.attributes
|
71 |
+
const defaultClass = 'ose-google-docs-drawings'
|
72 |
+
return (
|
73 |
+
<figure className={defaultClass}>
|
74 |
+
<img src={iframeSrc} width="960" height="720"/>
|
75 |
+
</figure>
|
76 |
+
);
|
77 |
+
},
|
78 |
+
});
|
Gutenberg/src/google-drawings/style.scss
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
Gutenberg/src/google-forms/edit.js
ADDED
@@ -0,0 +1,142 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
import {googleDrawingsIcon} from "../common/icons";
|
9 |
+
|
10 |
+
/**
|
11 |
+
* WordPress dependencies
|
12 |
+
*/
|
13 |
+
const {__} = wp.i18n;
|
14 |
+
const {Component, Fragment} = wp.element;
|
15 |
+
import {googleFormsIcon} from '../common/icons';
|
16 |
+
|
17 |
+
const {Disabled} = wp.components;
|
18 |
+
|
19 |
+
class GoogleFormsEdit extends Component {
|
20 |
+
constructor() {
|
21 |
+
super(...arguments);
|
22 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
23 |
+
this.setUrl = this.setUrl.bind(this);
|
24 |
+
this.onLoad = this.onLoad.bind(this);
|
25 |
+
this.state = {
|
26 |
+
editingURL: false,
|
27 |
+
url: this.props.attributes.url,
|
28 |
+
fetching: true,
|
29 |
+
cannotEmbed: false,
|
30 |
+
interactive: false
|
31 |
+
};
|
32 |
+
}
|
33 |
+
|
34 |
+
static getDerivedStateFromProps(nextProps, state) {
|
35 |
+
if (!nextProps.isSelected && state.interactive) {
|
36 |
+
return {interactive: false};
|
37 |
+
}
|
38 |
+
|
39 |
+
return null;
|
40 |
+
}
|
41 |
+
|
42 |
+
hideOverlay() {
|
43 |
+
this.setState({interactive: true});
|
44 |
+
}
|
45 |
+
|
46 |
+
onLoad() {
|
47 |
+
this.setState({
|
48 |
+
fetching: false
|
49 |
+
})
|
50 |
+
}
|
51 |
+
|
52 |
+
decodeHTMLEntities(str) {
|
53 |
+
if (str && typeof str === 'string') {
|
54 |
+
// strip script/html tags
|
55 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
56 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
57 |
+
|
58 |
+
}
|
59 |
+
return str;
|
60 |
+
}
|
61 |
+
|
62 |
+
|
63 |
+
setUrl(event) {
|
64 |
+
if (event) {
|
65 |
+
event.preventDefault();
|
66 |
+
}
|
67 |
+
const {url} = this.state;
|
68 |
+
const {setAttributes} = this.props;
|
69 |
+
setAttributes({url});
|
70 |
+
if (url && url.match(/^http[s]?:\/\/((?:www\.)?docs\.google\.com(?:.*)?(?:document|presentation|spreadsheets|forms|drawings)\/[a-z0-9\/\?=_\-\.\,&%\$#\@\!\+]*)/i)) {
|
71 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
72 |
+
var regEx = /google\.com(?:.+)?(document|presentation|spreadsheets|forms|drawings)/i;
|
73 |
+
var match = regEx.exec(iframeSrc);
|
74 |
+
var type = match[1];
|
75 |
+
if (type && type == 'forms') {
|
76 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
77 |
+
setAttributes({iframeSrc: iframeSrc})
|
78 |
+
} else {
|
79 |
+
this.setState({
|
80 |
+
cannotEmbed: true,
|
81 |
+
editingURL: true
|
82 |
+
})
|
83 |
+
}
|
84 |
+
} else {
|
85 |
+
this.setState({
|
86 |
+
cannotEmbed: true,
|
87 |
+
editingURL: true
|
88 |
+
})
|
89 |
+
}
|
90 |
+
}
|
91 |
+
|
92 |
+
switchBackToURLInput() {
|
93 |
+
this.setState({editingURL: true});
|
94 |
+
}
|
95 |
+
|
96 |
+
render() {
|
97 |
+
const {url, editingURL, fetching, cannotEmbed, interactive} = this.state;
|
98 |
+
const {iframeSrc} = this.props.attributes;
|
99 |
+
|
100 |
+
const label = __('Google Forms URL');
|
101 |
+
|
102 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
103 |
+
if (!iframeSrc || editingURL) {
|
104 |
+
return (
|
105 |
+
<EmbedPlaceholder
|
106 |
+
label={label}
|
107 |
+
onSubmit={this.setUrl}
|
108 |
+
value={url}
|
109 |
+
cannotEmbed={cannotEmbed}
|
110 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
111 |
+
icon={googleFormsIcon}
|
112 |
+
DocTitle={__('Learn more about Google forms embed')}
|
113 |
+
docLink={'https://embedpress.com/docs/embed-google-forms-wordpress/'}
|
114 |
+
/>
|
115 |
+
);
|
116 |
+
} else {
|
117 |
+
|
118 |
+
return (
|
119 |
+
<Fragment>
|
120 |
+
{fetching ? <EmbedLoading/> : null}
|
121 |
+
|
122 |
+
<Iframe src={iframeSrc} onFocus={ this.hideOverlay } onLoad={this.onLoad} style={{display: fetching ? 'none' : ''}}
|
123 |
+
frameborder="0" width="600" height="450"/>
|
124 |
+
|
125 |
+
{ ! interactive && (
|
126 |
+
<div
|
127 |
+
className="block-library-embed__interactive-overlay"
|
128 |
+
onMouseUp={ this.hideOverlay }
|
129 |
+
/>
|
130 |
+
) }
|
131 |
+
|
132 |
+
<EmbedControls
|
133 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
134 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
135 |
+
/>
|
136 |
+
</Fragment>
|
137 |
+
|
138 |
+
)
|
139 |
+
}
|
140 |
+
}
|
141 |
+
};
|
142 |
+
export default GoogleFormsEdit;
|
Gutenberg/src/google-forms/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/google-forms/index.js
ADDED
@@ -0,0 +1,79 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {googleFormsIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Register: aa Gutenberg Block.
|
19 |
+
*
|
20 |
+
* Registers a new block provided a unique name and an object defining its
|
21 |
+
* behavior. Once registered, the block is made editor as an option to any
|
22 |
+
* editor interface where blocks are implemented.
|
23 |
+
*
|
24 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
25 |
+
* @param {string} name Block name.
|
26 |
+
* @param {Object} settings Block settings.
|
27 |
+
* @return {?WPBlock} The block, if it has been successfully
|
28 |
+
* registered; otherwise `undefined`.
|
29 |
+
*/
|
30 |
+
registerBlockType('embedpress/google-forms-block', {
|
31 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
32 |
+
title: __('Google Forms'), // Block title.
|
33 |
+
icon: googleFormsIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
34 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
35 |
+
keywords: [
|
36 |
+
__('embedpress'),
|
37 |
+
__('google'),
|
38 |
+
__('forms'),
|
39 |
+
],
|
40 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
41 |
+
attributes: {
|
42 |
+
url: {
|
43 |
+
type: 'string',
|
44 |
+
default: ''
|
45 |
+
},
|
46 |
+
iframeSrc: {
|
47 |
+
type: 'string',
|
48 |
+
default: ''
|
49 |
+
}
|
50 |
+
},
|
51 |
+
/**
|
52 |
+
* The edit function describes the structure of your block in the context of the editor.
|
53 |
+
* This represents what the editor will render when the block is used.
|
54 |
+
*
|
55 |
+
* The "edit" property must be a valid function.
|
56 |
+
*
|
57 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
58 |
+
*/
|
59 |
+
edit,
|
60 |
+
|
61 |
+
/**
|
62 |
+
* The save function defines the way in which the different attributes should be combined
|
63 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
64 |
+
*
|
65 |
+
* The "save" property must be specified and must be a valid function.
|
66 |
+
*
|
67 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
68 |
+
*/
|
69 |
+
save: function (props) {
|
70 |
+
const {iframeSrc} = props.attributes
|
71 |
+
const defaultClass = 'ose-google-docs-forms'
|
72 |
+
return (
|
73 |
+
<figure className={defaultClass}>
|
74 |
+
<iframe src={iframeSrc} frameborder="0" width="600" height="450" allowfullscreen="true"
|
75 |
+
mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
|
76 |
+
</figure>
|
77 |
+
);
|
78 |
+
},
|
79 |
+
});
|
Gutenberg/src/google-forms/style.scss
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
Gutenberg/src/google-maps/edit.js
ADDED
@@ -0,0 +1,144 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const {__} = wp.i18n;
|
13 |
+
const {Component, Fragment} = wp.element;
|
14 |
+
import {googleMapsIcon} from '../common/icons'
|
15 |
+
|
16 |
+
class GoogleMapsEdit extends Component {
|
17 |
+
constructor() {
|
18 |
+
super(...arguments);
|
19 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
20 |
+
this.setUrl = this.setUrl.bind(this);
|
21 |
+
this.onLoad = this.onLoad.bind(this);
|
22 |
+
this.state = {
|
23 |
+
editingURL: false,
|
24 |
+
url: this.props.attributes.url,
|
25 |
+
fetching: true,
|
26 |
+
cannotEmbed: false,
|
27 |
+
interactive: false
|
28 |
+
};
|
29 |
+
}
|
30 |
+
|
31 |
+
static getDerivedStateFromProps(nextProps, state) {
|
32 |
+
if (!nextProps.isSelected && state.interactive) {
|
33 |
+
return {interactive: false};
|
34 |
+
}
|
35 |
+
|
36 |
+
return null;
|
37 |
+
}
|
38 |
+
|
39 |
+
hideOverlay() {
|
40 |
+
this.setState({interactive: true});
|
41 |
+
}
|
42 |
+
|
43 |
+
onLoad() {
|
44 |
+
this.setState({
|
45 |
+
fetching: false
|
46 |
+
})
|
47 |
+
}
|
48 |
+
|
49 |
+
decodeHTMLEntities(str) {
|
50 |
+
if (str && typeof str === 'string') {
|
51 |
+
// strip script/html tags
|
52 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
53 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
54 |
+
|
55 |
+
}
|
56 |
+
return str;
|
57 |
+
}
|
58 |
+
|
59 |
+
|
60 |
+
setUrl(event) {
|
61 |
+
if (event) {
|
62 |
+
event.preventDefault();
|
63 |
+
}
|
64 |
+
const {url} = this.state;
|
65 |
+
const {setAttributes} = this.props;
|
66 |
+
setAttributes({url});
|
67 |
+
if (url && url.match(/^http[s]?:\/\/(?:(?:(?:www\.|maps\.)?(?:google\.com?))|(?:goo\.gl))(?:\.[a-z]{2})?\/(?:maps\/)?(?:place\/)?(?:[a-z0-9\/%+\-_]*)?([a-z0-9\/%,+\-_=!:@\.&*\$#?\']*)/i)) {
|
68 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
69 |
+
/google\.com(?:.+)?(document|presentation|spreadsheets|forms|drawings)/i;
|
70 |
+
if (url.match('~(maps/embed|output=embed)~i')) {
|
71 |
+
//do something
|
72 |
+
} else {
|
73 |
+
var regEx = /@(-?[0-9\.]+,-?[0-9\.]+).+,([0-9\.]+[a-z])/i;
|
74 |
+
var match = regEx.exec(iframeSrc);
|
75 |
+
if (match && match.length > 1 && match[1] && match[2]) {
|
76 |
+
iframeSrc = 'https://maps.google.com/maps?hl=en&ie=UTF8&ll=' + match[1] + '&spn=' + match[1] + '&t=m&z=' + Math.round(parseInt(match[2])) + '&output=embed';
|
77 |
+
} else {
|
78 |
+
this.setState({
|
79 |
+
cannotEmbed: true,
|
80 |
+
editingURL: true
|
81 |
+
})
|
82 |
+
}
|
83 |
+
|
84 |
+
}
|
85 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
86 |
+
setAttributes({iframeSrc: iframeSrc})
|
87 |
+
} else {
|
88 |
+
this.setState({
|
89 |
+
cannotEmbed: true,
|
90 |
+
editingURL: true
|
91 |
+
})
|
92 |
+
}
|
93 |
+
}
|
94 |
+
|
95 |
+
switchBackToURLInput() {
|
96 |
+
this.setState({editingURL: true});
|
97 |
+
}
|
98 |
+
|
99 |
+
render() {
|
100 |
+
const {url, editingURL, fetching, cannotEmbed, interactive} = this.state;
|
101 |
+
const {iframeSrc} = this.props.attributes;
|
102 |
+
|
103 |
+
const label = __('Google Maps URL');
|
104 |
+
|
105 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
106 |
+
if (!iframeSrc || editingURL) {
|
107 |
+
return (
|
108 |
+
<EmbedPlaceholder
|
109 |
+
label={label}
|
110 |
+
onSubmit={this.setUrl}
|
111 |
+
value={url}
|
112 |
+
cannotEmbed={cannotEmbed}
|
113 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
114 |
+
icon={googleMapsIcon}
|
115 |
+
DocTitle={__('Learn more about Google map embed')}
|
116 |
+
docLink={'https://embedpress.com/docs/embed-google-maps-wordpress/'}
|
117 |
+
/>
|
118 |
+
);
|
119 |
+
} else {
|
120 |
+
|
121 |
+
return (
|
122 |
+
<Fragment>
|
123 |
+
{fetching ? <EmbedLoading/> : null}
|
124 |
+
<Iframe src={iframeSrc} onFocus={ this.hideOverlay } onLoad={this.onLoad} style={{display: fetching ? 'none' : ''}}
|
125 |
+
frameborder="0" width="600" height="450"/>
|
126 |
+
|
127 |
+
{ ! interactive && (
|
128 |
+
<div
|
129 |
+
className="block-library-embed__interactive-overlay"
|
130 |
+
onMouseUp={ this.hideOverlay }
|
131 |
+
/>
|
132 |
+
) }
|
133 |
+
|
134 |
+
<EmbedControls
|
135 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
136 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
137 |
+
/>
|
138 |
+
</Fragment>
|
139 |
+
|
140 |
+
)
|
141 |
+
}
|
142 |
+
}
|
143 |
+
};
|
144 |
+
export default GoogleMapsEdit;
|
Gutenberg/src/google-maps/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/google-maps/index.js
ADDED
@@ -0,0 +1,78 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {googleMapsIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Register: aa Gutenberg Block.
|
19 |
+
*
|
20 |
+
* Registers a new block provided a unique name and an object defining its
|
21 |
+
* behavior. Once registered, the block is made editor as an option to any
|
22 |
+
* editor interface where blocks are implemented.
|
23 |
+
*
|
24 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
25 |
+
* @param {string} name Block name.
|
26 |
+
* @param {Object} settings Block settings.
|
27 |
+
* @return {?WPBlock} The block, if it has been successfully
|
28 |
+
* registered; otherwise `undefined`.
|
29 |
+
*/
|
30 |
+
registerBlockType('embedpress/google-maps-block', {
|
31 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
32 |
+
title: __('Google Maps'), // Block title.
|
33 |
+
icon: googleMapsIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
34 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
35 |
+
keywords: [
|
36 |
+
__('embedpress'),
|
37 |
+
__('google'),
|
38 |
+
__('maps'),
|
39 |
+
],
|
40 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
41 |
+
attributes: {
|
42 |
+
url: {
|
43 |
+
type: 'string',
|
44 |
+
default: ''
|
45 |
+
},
|
46 |
+
iframeSrc: {
|
47 |
+
type: 'string',
|
48 |
+
default: ''
|
49 |
+
}
|
50 |
+
},
|
51 |
+
/**
|
52 |
+
* The edit function describes the structure of your block in the context of the editor.
|
53 |
+
* This represents what the editor will render when the block is used.
|
54 |
+
*
|
55 |
+
* The "edit" property must be a valid function.
|
56 |
+
*
|
57 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
58 |
+
*/
|
59 |
+
edit,
|
60 |
+
|
61 |
+
/**
|
62 |
+
* The save function defines the way in which the different attributes should be combined
|
63 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
64 |
+
*
|
65 |
+
* The "save" property must be specified and must be a valid function.
|
66 |
+
*
|
67 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
68 |
+
*/
|
69 |
+
save: function (props) {
|
70 |
+
const {iframeSrc} = props.attributes
|
71 |
+
const defaultClass = 'ose-google-maps'
|
72 |
+
return (
|
73 |
+
<figure className={defaultClass}>
|
74 |
+
<iframe src={iframeSrc} frameborder="0" width="600" height="450" frameborder="0"></iframe>
|
75 |
+
</figure>
|
76 |
+
);
|
77 |
+
},
|
78 |
+
});
|
Gutenberg/src/google-maps/style.scss
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
Gutenberg/src/google-sheets/edit.js
ADDED
@@ -0,0 +1,165 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const {__} = wp.i18n;
|
13 |
+
const {Component, Fragment} = wp.element;
|
14 |
+
import {googleSheetsIcon} from '../common/icons'
|
15 |
+
|
16 |
+
class GoogleSheetsEdit extends Component {
|
17 |
+
constructor() {
|
18 |
+
super(...arguments);
|
19 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
20 |
+
this.setUrl = this.setUrl.bind(this);
|
21 |
+
this.onLoad = this.onLoad.bind(this);
|
22 |
+
this.hideOverlay = this.hideOverlay.bind(this)
|
23 |
+
this.state = {
|
24 |
+
editingURL: false,
|
25 |
+
url: this.props.attributes.url,
|
26 |
+
fetching: true,
|
27 |
+
cannotEmbed: false,
|
28 |
+
interactive:false
|
29 |
+
};
|
30 |
+
}
|
31 |
+
|
32 |
+
static getDerivedStateFromProps(nextProps, state) {
|
33 |
+
if (!nextProps.isSelected && state.interactive) {
|
34 |
+
return {interactive: false};
|
35 |
+
}
|
36 |
+
|
37 |
+
return null;
|
38 |
+
}
|
39 |
+
|
40 |
+
hideOverlay() {
|
41 |
+
this.setState({interactive: true});
|
42 |
+
}
|
43 |
+
|
44 |
+
onLoad() {
|
45 |
+
this.setState({
|
46 |
+
fetching: false
|
47 |
+
})
|
48 |
+
}
|
49 |
+
|
50 |
+
decodeHTMLEntities(str) {
|
51 |
+
if (str && typeof str === 'string') {
|
52 |
+
// strip script/html tags
|
53 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
54 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
55 |
+
|
56 |
+
}
|
57 |
+
return str;
|
58 |
+
}
|
59 |
+
|
60 |
+
|
61 |
+
setUrl(event) {
|
62 |
+
if (event) {
|
63 |
+
event.preventDefault();
|
64 |
+
}
|
65 |
+
const {url} = this.state;
|
66 |
+
const {setAttributes} = this.props;
|
67 |
+
setAttributes({url});
|
68 |
+
if (url && url.match(/^http[s]?:\/\/((?:www\.)?docs\.google\.com(?:.*)?(?:document|presentation|spreadsheets|forms|drawings)\/[a-z0-9\/\?=_\-\.\,&%\$#\@\!\+]*)/i)) {
|
69 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
70 |
+
var regEx = /google\.com(?:.+)?(document|presentation|spreadsheets|forms|drawings)/i;
|
71 |
+
var match = regEx.exec(iframeSrc);
|
72 |
+
var type = match[1];
|
73 |
+
if (type && type == 'spreadsheets') {
|
74 |
+
if (iframeSrc.indexOf('?') > -1) {
|
75 |
+
var query = iframeSrc.split('?');
|
76 |
+
query = query[1];
|
77 |
+
query = query.split('&');
|
78 |
+
console.log(query)
|
79 |
+
if (query.length > 0) {
|
80 |
+
var hasHeadersParam = false;
|
81 |
+
var hasWidgetParam = false;
|
82 |
+
query.map(param => {
|
83 |
+
if (param.indexOf('widget=')) {
|
84 |
+
hasWidgetParam = true;
|
85 |
+
} else if (param.indexOf('headers=')) {
|
86 |
+
hasHeadersParam = true;
|
87 |
+
}
|
88 |
+
})
|
89 |
+
if (!hasWidgetParam) {
|
90 |
+
iframeSrc += '&widget=true';
|
91 |
+
}
|
92 |
+
|
93 |
+
if (!hasHeadersParam) {
|
94 |
+
iframeSrc += '&headers=false';
|
95 |
+
}
|
96 |
+
}
|
97 |
+
} else {
|
98 |
+
iframeSrc += '?widget=true&headers=false';
|
99 |
+
}
|
100 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
101 |
+
setAttributes({iframeSrc: iframeSrc})
|
102 |
+
} else {
|
103 |
+
this.setState({
|
104 |
+
cannotEmbed: true,
|
105 |
+
editingURL: true
|
106 |
+
})
|
107 |
+
}
|
108 |
+
} else {
|
109 |
+
this.setState({
|
110 |
+
cannotEmbed: true,
|
111 |
+
editingURL: true
|
112 |
+
})
|
113 |
+
}
|
114 |
+
}
|
115 |
+
|
116 |
+
switchBackToURLInput() {
|
117 |
+
this.setState({editingURL: true});
|
118 |
+
}
|
119 |
+
|
120 |
+
render() {
|
121 |
+
const {url, editingURL, fetching, cannotEmbed, interactive} = this.state;
|
122 |
+
const {iframeSrc} = this.props.attributes;
|
123 |
+
|
124 |
+
const label = __('Google Sheets URL');
|
125 |
+
|
126 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
127 |
+
if (!iframeSrc || editingURL) {
|
128 |
+
return (
|
129 |
+
<EmbedPlaceholder
|
130 |
+
label={label}
|
131 |
+
onSubmit={this.setUrl}
|
132 |
+
value={url}
|
133 |
+
cannotEmbed={cannotEmbed}
|
134 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
135 |
+
icon={googleSheetsIcon}
|
136 |
+
DocTitle={__('Learn more about Google sheet embed')}
|
137 |
+
docLink={'https://embedpress.com/docs/embed-google-sheets-wordpress/'}
|
138 |
+
/>
|
139 |
+
);
|
140 |
+
} else {
|
141 |
+
|
142 |
+
return (
|
143 |
+
<Fragment>
|
144 |
+
{fetching ? <EmbedLoading/> : null}
|
145 |
+
|
146 |
+
<Iframe src={iframeSrc} onFocus={ this.hideOverlay } onLoad={this.onLoad} style={{display: fetching ? 'none' : ''}}
|
147 |
+
frameborder="0" width="600" height="450"/>
|
148 |
+
{ ! interactive && (
|
149 |
+
<div
|
150 |
+
className="block-library-embed__interactive-overlay"
|
151 |
+
onMouseUp={ this.hideOverlay }
|
152 |
+
/>
|
153 |
+
) }
|
154 |
+
|
155 |
+
<EmbedControls
|
156 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
157 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
158 |
+
/>
|
159 |
+
</Fragment>
|
160 |
+
|
161 |
+
)
|
162 |
+
}
|
163 |
+
}
|
164 |
+
};
|
165 |
+
export default GoogleSheetsEdit;
|
Gutenberg/src/google-sheets/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/google-sheets/index.js
ADDED
@@ -0,0 +1,102 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import { googleSheetsIcon } from '../common/icons';
|
13 |
+
const { __ } = wp.i18n; // Import __() from wp.i18n
|
14 |
+
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
|
15 |
+
|
16 |
+
/**
|
17 |
+
* Register: aa Gutenberg Block.
|
18 |
+
*
|
19 |
+
* Registers a new block provided a unique name and an object defining its
|
20 |
+
* behavior. Once registered, the block is made editor as an option to any
|
21 |
+
* editor interface where blocks are implemented.
|
22 |
+
*
|
23 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
24 |
+
* @param {string} name Block name.
|
25 |
+
* @param {Object} settings Block settings.
|
26 |
+
* @return {?WPBlock} The block, if it has been successfully
|
27 |
+
* registered; otherwise `undefined`.
|
28 |
+
*/
|
29 |
+
registerBlockType( 'embedpress/google-sheets-block', {
|
30 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
31 |
+
title: __( 'Google Sheets' ), // Block title.
|
32 |
+
icon: googleSheetsIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
33 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
34 |
+
keywords: [
|
35 |
+
__( 'embedpress' ),
|
36 |
+
__( 'google' ),
|
37 |
+
__( 'sheets' ),
|
38 |
+
],
|
39 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
40 |
+
attributes: {
|
41 |
+
url: {
|
42 |
+
type: 'string',
|
43 |
+
default: ''
|
44 |
+
},
|
45 |
+
iframeSrc: {
|
46 |
+
type: 'string',
|
47 |
+
default: ''
|
48 |
+
}
|
49 |
+
},
|
50 |
+
/**
|
51 |
+
* The edit function describes the structure of your block in the context of the editor.
|
52 |
+
* This represents what the editor will render when the block is used.
|
53 |
+
*
|
54 |
+
* The "edit" property must be a valid function.
|
55 |
+
*
|
56 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
57 |
+
*/
|
58 |
+
edit,
|
59 |
+
|
60 |
+
/**
|
61 |
+
* The save function defines the way in which the different attributes should be combined
|
62 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
63 |
+
*
|
64 |
+
* The "save" property must be specified and must be a valid function.
|
65 |
+
*
|
66 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
67 |
+
*/
|
68 |
+
save: function( props ) {
|
69 |
+
const { iframeSrc } = props.attributes
|
70 |
+
const defaultClass = 'ose-google-docs-spreadsheets'
|
71 |
+
return (
|
72 |
+
<figure className={defaultClass}>
|
73 |
+
<iframe src={iframeSrc} frameborder="0" width="600" height="450" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
|
74 |
+
</figure>
|
75 |
+
);
|
76 |
+
},
|
77 |
+
deprecated: [
|
78 |
+
{
|
79 |
+
attributes: {
|
80 |
+
align: {
|
81 |
+
type: "string",
|
82 |
+
enum: ["left", "center", "right", "wide", "full"]
|
83 |
+
},
|
84 |
+
},
|
85 |
+
|
86 |
+
save: function (props) {
|
87 |
+
const {iframeSrc} = props.attributes
|
88 |
+
if (iframeSrc) {
|
89 |
+
return (
|
90 |
+
<div className="ose-google-docs-spreadsheets">
|
91 |
+
|
92 |
+
<iframe src={iframeSrc} frameBorder="0" width="600" height="450" allowFullScreen="true"
|
93 |
+
mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
|
94 |
+
|
95 |
+
</div>
|
96 |
+
|
97 |
+
);
|
98 |
+
}
|
99 |
+
},
|
100 |
+
}
|
101 |
+
]
|
102 |
+
} );
|
Gutenberg/src/google-sheets/style.scss
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
Gutenberg/src/google-slides/edit.js
ADDED
@@ -0,0 +1,142 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const { __ } = wp.i18n;
|
13 |
+
const { Component, Fragment } = wp.element;
|
14 |
+
import { googleSlidesIcon} from '../common/icons'
|
15 |
+
class GoogleSlidesEdit extends Component {
|
16 |
+
constructor() {
|
17 |
+
super( ...arguments );
|
18 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
|
19 |
+
this.setUrl = this.setUrl.bind( this );
|
20 |
+
this.onLoad = this.onLoad.bind( this );
|
21 |
+
this.hideOverlay = this.hideOverlay.bind(this);
|
22 |
+
this.state = {
|
23 |
+
editingURL: false,
|
24 |
+
url: this.props.attributes.url,
|
25 |
+
fetching: true,
|
26 |
+
cannotEmbed: false,
|
27 |
+
interactive: false
|
28 |
+
};
|
29 |
+
}
|
30 |
+
|
31 |
+
static getDerivedStateFromProps(nextProps, state) {
|
32 |
+
if (!nextProps.isSelected && state.interactive) {
|
33 |
+
return {interactive: false};
|
34 |
+
}
|
35 |
+
|
36 |
+
return null;
|
37 |
+
}
|
38 |
+
|
39 |
+
hideOverlay() {
|
40 |
+
this.setState({interactive: true});
|
41 |
+
}
|
42 |
+
|
43 |
+
onLoad() {
|
44 |
+
this.setState({
|
45 |
+
fetching: false
|
46 |
+
})
|
47 |
+
}
|
48 |
+
decodeHTMLEntities (str) {
|
49 |
+
if(str && typeof str === 'string') {
|
50 |
+
// strip script/html tags
|
51 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
52 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
53 |
+
|
54 |
+
}
|
55 |
+
return str;
|
56 |
+
}
|
57 |
+
|
58 |
+
|
59 |
+
setUrl( event ) {
|
60 |
+
if ( event ) {
|
61 |
+
event.preventDefault();
|
62 |
+
}
|
63 |
+
const { url } = this.state;
|
64 |
+
const { setAttributes } = this.props;
|
65 |
+
setAttributes( { url } );
|
66 |
+
if(url && url.match( /^http[s]?:\/\/((?:www\.)?docs\.google\.com(?:.*)?(?:document|presentation|spreadsheets|forms|drawings)\/[a-z0-9\/\?=_\-\.\,&%\$#\@\!\+]*)/i)){
|
67 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
68 |
+
var regEx = /google\.com(?:.+)?(document|presentation|spreadsheets|forms|drawings)/i;
|
69 |
+
var match = regEx.exec(iframeSrc);
|
70 |
+
var type = match[1];
|
71 |
+
if(type && type == 'presentation') {
|
72 |
+
if(iframeSrc.match( /pub\?/i )) {
|
73 |
+
iframeSrc = iframeSrc.replace('/pub?', '/embed?');
|
74 |
+
}
|
75 |
+
this.setState( { editingURL: false, cannotEmbed: false } );
|
76 |
+
setAttributes( {iframeSrc: iframeSrc })
|
77 |
+
}
|
78 |
+
else {
|
79 |
+
this.setState({
|
80 |
+
cannotEmbed: true,
|
81 |
+
editingURL: true
|
82 |
+
})
|
83 |
+
}
|
84 |
+
}
|
85 |
+
else {
|
86 |
+
this.setState({
|
87 |
+
cannotEmbed: true,
|
88 |
+
editingURL: true
|
89 |
+
})
|
90 |
+
}
|
91 |
+
}
|
92 |
+
|
93 |
+
switchBackToURLInput() {
|
94 |
+
this.setState( { editingURL: true } );
|
95 |
+
}
|
96 |
+
|
97 |
+
render() {
|
98 |
+
const { url, editingURL, fetching, cannotEmbed, interactive} = this.state;
|
99 |
+
const { iframeSrc } = this.props.attributes;
|
100 |
+
|
101 |
+
const label = __( 'Google Slides URL');
|
102 |
+
|
103 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
104 |
+
if ( !iframeSrc || editingURL ) {
|
105 |
+
return (
|
106 |
+
<EmbedPlaceholder
|
107 |
+
label={ label }
|
108 |
+
onSubmit={ this.setUrl }
|
109 |
+
value={ url }
|
110 |
+
cannotEmbed={ cannotEmbed }
|
111 |
+
onChange={ ( event ) => this.setState( { url: event.target.value } ) }
|
112 |
+
icon={googleSlidesIcon}
|
113 |
+
DocTitle={__('Learn more about Google slides embed')}
|
114 |
+
docLink={'https://embedpress.com/docs/embed-google-slides-wordpress/'}
|
115 |
+
/>
|
116 |
+
);
|
117 |
+
}
|
118 |
+
else {
|
119 |
+
|
120 |
+
return (
|
121 |
+
<Fragment>
|
122 |
+
{fetching ? <EmbedLoading /> : null}
|
123 |
+
|
124 |
+
<Iframe src={iframeSrc} onFocus={ this.hideOverlay } onLoad={this.onLoad} style={{ display: fetching ? 'none' : '' }} frameborder="0" width="600" height="450" />
|
125 |
+
{ ! interactive && (
|
126 |
+
<div
|
127 |
+
className="block-library-embed__interactive-overlay"
|
128 |
+
onMouseUp={ this.hideOverlay }
|
129 |
+
/>
|
130 |
+
) }
|
131 |
+
|
132 |
+
<EmbedControls
|
133 |
+
showEditButton={ iframeSrc && ! cannotEmbed }
|
134 |
+
switchBackToURLInput={ this.switchBackToURLInput }
|
135 |
+
/>
|
136 |
+
</Fragment>
|
137 |
+
|
138 |
+
)
|
139 |
+
}
|
140 |
+
}
|
141 |
+
};
|
142 |
+
export default GoogleSlidesEdit;
|
Gutenberg/src/google-slides/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/google-slides/index.js
ADDED
@@ -0,0 +1,77 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import { googleSlidesIcon } from '../common/icons';
|
13 |
+
const { __ } = wp.i18n; // Import __() from wp.i18n
|
14 |
+
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
|
15 |
+
|
16 |
+
/**
|
17 |
+
* Register: aa Gutenberg Block.
|
18 |
+
*
|
19 |
+
* Registers a new block provided a unique name and an object defining its
|
20 |
+
* behavior. Once registered, the block is made editor as an option to any
|
21 |
+
* editor interface where blocks are implemented.
|
22 |
+
*
|
23 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
24 |
+
* @param {string} name Block name.
|
25 |
+
* @param {Object} settings Block settings.
|
26 |
+
* @return {?WPBlock} The block, if it has been successfully
|
27 |
+
* registered; otherwise `undefined`.
|
28 |
+
*/
|
29 |
+
registerBlockType( 'embedpress/google-slides-block', {
|
30 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
31 |
+
title: __( 'Google Slides' ), // Block title.
|
32 |
+
icon: googleSlidesIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
33 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
34 |
+
keywords: [
|
35 |
+
__( 'embedpress' ),
|
36 |
+
__( 'google' ),
|
37 |
+
__( 'slides' ),
|
38 |
+
],
|
39 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
40 |
+
attributes: {
|
41 |
+
url: {
|
42 |
+
type: 'string',
|
43 |
+
default: ''
|
44 |
+
},
|
45 |
+
iframeSrc: {
|
46 |
+
type: 'string',
|
47 |
+
default: ''
|
48 |
+
}
|
49 |
+
},
|
50 |
+
/**
|
51 |
+
* The edit function describes the structure of your block in the context of the editor.
|
52 |
+
* This represents what the editor will render when the block is used.
|
53 |
+
*
|
54 |
+
* The "edit" property must be a valid function.
|
55 |
+
*
|
56 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
57 |
+
*/
|
58 |
+
edit,
|
59 |
+
|
60 |
+
/**
|
61 |
+
* The save function defines the way in which the different attributes should be combined
|
62 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
63 |
+
*
|
64 |
+
* The "save" property must be specified and must be a valid function.
|
65 |
+
*
|
66 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
67 |
+
*/
|
68 |
+
save: function( props ) {
|
69 |
+
const { iframeSrc } = props.attributes
|
70 |
+
const defaultClass = "ose-google-docs-presentation"
|
71 |
+
return (
|
72 |
+
<figure className={defaultClass}>
|
73 |
+
<iframe src={iframeSrc} frameborder="0" width="600" height="450" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
|
74 |
+
</figure>
|
75 |
+
);
|
76 |
+
},
|
77 |
+
} );
|
Gutenberg/src/google-slides/style.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
6 |
+
|
Gutenberg/src/init.php
ADDED
@@ -0,0 +1,130 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Blocks Initializer
|
4 |
+
*
|
5 |
+
* Enqueue CSS/JS of all the blocks.
|
6 |
+
*
|
7 |
+
* @since 1.0.0
|
8 |
+
* @package CGB
|
9 |
+
*/
|
10 |
+
|
11 |
+
// Exit if accessed directly.
|
12 |
+
if ( !defined( 'ABSPATH' ) ) {
|
13 |
+
exit;
|
14 |
+
}
|
15 |
+
|
16 |
+
/**
|
17 |
+
* Enqueue Gutenberg block assets for both frontend + backend.
|
18 |
+
*
|
19 |
+
* @uses {wp-editor} for WP editor styles.
|
20 |
+
* @since 1.0.0
|
21 |
+
*/
|
22 |
+
function embedpress_blocks_cgb_block_assets() { // phpcs:ignore
|
23 |
+
// Styles.
|
24 |
+
wp_enqueue_style(
|
25 |
+
'embedpress_blocks-cgb-style-css', // Handle.
|
26 |
+
plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
|
27 |
+
is_admin() ? array( 'wp-editor' ) : null, // Dependency to include the CSS after it.
|
28 |
+
filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
|
29 |
+
);
|
30 |
+
}
|
31 |
+
|
32 |
+
// Hook: Frontend assets.
|
33 |
+
add_action( 'enqueue_block_assets', 'embedpress_blocks_cgb_block_assets' );
|
34 |
+
|
35 |
+
/**
|
36 |
+
* Enqueue Gutenberg block assets for backend editor.
|
37 |
+
*
|
38 |
+
* @uses {wp-blocks} for block type registration & related functions.
|
39 |
+
* @uses {wp-element} for WP Element abstraction — structure of blocks.
|
40 |
+
* @uses {wp-i18n} to internationalize the block's text.
|
41 |
+
* @uses {wp-editor} for WP editor styles.
|
42 |
+
* @since 1.0.0
|
43 |
+
*/
|
44 |
+
function embedpress_blocks_cgb_editor_assets() { // phpcs:ignore
|
45 |
+
// Scripts.
|
46 |
+
wp_enqueue_script(
|
47 |
+
'embedpress_blocks-cgb-block-js', // Handle.
|
48 |
+
plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
|
49 |
+
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor','wp-components', 'embedpress-pdfobject' ), // Dependencies, defined above.
|
50 |
+
filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: File modification time.
|
51 |
+
true // Enqueue the script in the footer.
|
52 |
+
);
|
53 |
+
$wistia_labels = array(
|
54 |
+
'watch_from_beginning' => __( 'Watch from the beginning', 'embedpress-wistia' ),
|
55 |
+
'skip_to_where_you_left_off' => __( 'Skip to where you left off', 'embedpress-wistia' ),
|
56 |
+
'you_have_watched_it_before' => __( 'It looks like you\'ve watched<br />part of this video before!', 'embedpress-wistia' ),
|
57 |
+
);
|
58 |
+
$wistia_labels = json_encode( $wistia_labels );
|
59 |
+
$wistia_options = null;
|
60 |
+
if ( function_exists( 'embedpress_wisita_pro_get_options' ) ):
|
61 |
+
$wistia_options = embedpress_wisita_pro_get_options();
|
62 |
+
endif;
|
63 |
+
$pars_url = wp_parse_url(get_site_url());
|
64 |
+
wp_localize_script( 'embedpress_blocks-cgb-block-js', 'embedpressObj', array(
|
65 |
+
'wistia_labels' => $wistia_labels,
|
66 |
+
'wisita_options' => $wistia_options,
|
67 |
+
'embedpress_powered_by' => apply_filters('embedpress_document_block_powered_by',true),
|
68 |
+
'embedpress_pro' => defined('EMBEDPRESS_PRO_PLUGIN_FILE'),
|
69 |
+
'twitch_host' => !empty($pars_url['host'])?$pars_url['host']:'',
|
70 |
+
'site_url' => site_url(),
|
71 |
+
) );
|
72 |
+
|
73 |
+
// Styles.
|
74 |
+
wp_enqueue_style(
|
75 |
+
'embedpress_blocks-cgb-block-editor-css', // Handle.
|
76 |
+
plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
|
77 |
+
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
|
78 |
+
filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
|
79 |
+
);
|
80 |
+
}
|
81 |
+
|
82 |
+
// Hook: Editor assets.
|
83 |
+
add_action( 'enqueue_block_editor_assets', 'embedpress_blocks_cgb_editor_assets' );
|
84 |
+
|
85 |
+
|
86 |
+
function embedpress_block_category( $categories, $post ) {
|
87 |
+
return array_merge(
|
88 |
+
$categories,
|
89 |
+
array(
|
90 |
+
array(
|
91 |
+
'slug' => 'embedpress',
|
92 |
+
'title' => 'EmbedPress',
|
93 |
+
'icon' => '',
|
94 |
+
),
|
95 |
+
)
|
96 |
+
);
|
97 |
+
|
98 |
+
}
|
99 |
+
|
100 |
+
add_filter( 'block_categories', 'embedpress_block_category', 10, 2 );
|
101 |
+
|
102 |
+
/**
|
103 |
+
* Registers the embedpress gutneberg block on server.
|
104 |
+
*/
|
105 |
+
|
106 |
+
function embedpress_gutenberg_register_all_block() {
|
107 |
+
if ( function_exists( 'register_block_type' ) ) :
|
108 |
+
require_once plugin_dir_path( __FILE__ ) . 'embedpress/index.php';
|
109 |
+
register_block_type( 'embedpress/twitch-block' );
|
110 |
+
register_block_type( 'embedpress/google-slides-block' );
|
111 |
+
register_block_type( 'embedpress/google-sheets-block' );
|
112 |
+
register_block_type( 'embedpress/google-maps-block' );
|
113 |
+
register_block_type( 'embedpress/google-forms-block' );
|
114 |
+
register_block_type( 'embedpress/google-drawings-block' );
|
115 |
+
register_block_type( 'embedpress/google-docs-block' );
|
116 |
+
register_block_type( 'embedpress/embedpress', [
|
117 |
+
'render_callback' => 'embedpress_render_block',
|
118 |
+
]);
|
119 |
+
|
120 |
+
endif;
|
121 |
+
}
|
122 |
+
|
123 |
+
add_action( 'init', 'embedpress_gutenberg_register_all_block' );
|
124 |
+
|
125 |
+
|
126 |
+
foreach ( glob( plugin_dir_path( __FILE__ ) . '*/index.php' ) as $block_logic ) {
|
127 |
+
require $block_logic;
|
128 |
+
}
|
129 |
+
|
130 |
+
|
Gutenberg/src/twitch/edit.js
ADDED
@@ -0,0 +1,187 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const {__} = wp.i18n;
|
13 |
+
const {Component, Fragment} = wp.element;
|
14 |
+
import {twitchIcon} from '../common/icons'
|
15 |
+
|
16 |
+
class TwitchEdit extends Component {
|
17 |
+
constructor() {
|
18 |
+
super(...arguments);
|
19 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
20 |
+
this.setUrl = this.setUrl.bind(this);
|
21 |
+
this.onLoad = this.onLoad.bind(this);
|
22 |
+
this.hideOverlay = this.hideOverlay.bind(this);
|
23 |
+
this.state = {
|
24 |
+
editingURL: false,
|
25 |
+
url: this.props.attributes.url,
|
26 |
+
fetching: true,
|
27 |
+
cannotEmbed: false,
|
28 |
+
interactive: false
|
29 |
+
};
|
30 |
+
}
|
31 |
+
|
32 |
+
static getDerivedStateFromProps(nextProps, state) {
|
33 |
+
if (!nextProps.isSelected && state.interactive) {
|
34 |
+
return {interactive: false};
|
35 |
+
}
|
36 |
+
|
37 |
+
return null;
|
38 |
+
}
|
39 |
+
|
40 |
+
hideOverlay() {
|
41 |
+
this.setState({interactive: true});
|
42 |
+
}
|
43 |
+
|
44 |
+
onLoad() {
|
45 |
+
this.setState({
|
46 |
+
fetching: false
|
47 |
+
})
|
48 |
+
}
|
49 |
+
|
50 |
+
decodeHTMLEntities(str) {
|
51 |
+
if (str && typeof str === 'string') {
|
52 |
+
// strip script/html tags
|
53 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
54 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
55 |
+
|
56 |
+
}
|
57 |
+
return str;
|
58 |
+
}
|
59 |
+
|
60 |
+
|
61 |
+
setUrl(event) {
|
62 |
+
if (event) {
|
63 |
+
event.preventDefault();
|
64 |
+
}
|
65 |
+
const {url} = this.state;
|
66 |
+
const {setAttributes} = this.props;
|
67 |
+
setAttributes({url});
|
68 |
+
var regEx = /http[s]?:\/\/(?:www\.|clips\.)twitch\.tv\/([0-9a-zA-Z\-\_]+)\/?(chat\/?$|[0-9a-z\-\_]*)?/
|
69 |
+
if (url && url.match(regEx)) {
|
70 |
+
var iframeSrc = this.decodeHTMLEntities(url);
|
71 |
+
var match = regEx.exec(iframeSrc);
|
72 |
+
var channelName = match[1];
|
73 |
+
console.log(channelName);
|
74 |
+
var type = "channel";
|
75 |
+
var attrs;
|
76 |
+
if (url.indexOf('clips.twitch.tv') > -1) {
|
77 |
+
type = 'clip';
|
78 |
+
} else if (url.indexOf('/videos/') > -1) {
|
79 |
+
type = 'video';
|
80 |
+
} else if (url.indexOf('#/chat$#') > -1) {
|
81 |
+
type = 'chat';
|
82 |
+
}
|
83 |
+
console.log(type)
|
84 |
+
switch (type) {
|
85 |
+
case 'channel':
|
86 |
+
iframeSrc = 'https://player.twitch.tv/?channel=' + channelName;
|
87 |
+
attrs = {
|
88 |
+
scrolling: "no",
|
89 |
+
frameborder: "0",
|
90 |
+
allowfullscreen: "true"
|
91 |
+
};
|
92 |
+
break;
|
93 |
+
|
94 |
+
case 'clip':
|
95 |
+
iframeSrc = 'https://clips.twitch.tv/embed?clip=' + channelName + '&autoplay=false';
|
96 |
+
attrs = {
|
97 |
+
scrolling: "no",
|
98 |
+
frameborder: "0",
|
99 |
+
allowfullscreen: "true"
|
100 |
+
};
|
101 |
+
break;
|
102 |
+
|
103 |
+
case 'video':
|
104 |
+
channelName = match[2];
|
105 |
+
iframeSrc = 'https://player.twitch.tv/?video=' + channelName;
|
106 |
+
attrs = {
|
107 |
+
scrolling: "no",
|
108 |
+
frameborder: "0",
|
109 |
+
allowfullscreen: "true"
|
110 |
+
};
|
111 |
+
break;
|
112 |
+
|
113 |
+
case 'chat':
|
114 |
+
iframeSrc = 'http://www.twitch.tv/embed/' + channelName + '/chat';
|
115 |
+
attrs = {
|
116 |
+
scrolling: "yes",
|
117 |
+
frameborder: "0",
|
118 |
+
allowfullscreen: "true",
|
119 |
+
id: "'" + channelName + "'"
|
120 |
+
|
121 |
+
}
|
122 |
+
break;
|
123 |
+
}
|
124 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
125 |
+
setAttributes({iframeSrc, attrs})
|
126 |
+
} else {
|
127 |
+
this.setState({
|
128 |
+
cannotEmbed: true,
|
129 |
+
editingURL: true
|
130 |
+
})
|
131 |
+
}
|
132 |
+
}
|
133 |
+
|
134 |
+
switchBackToURLInput() {
|
135 |
+
this.setState({editingURL: true});
|
136 |
+
}
|
137 |
+
|
138 |
+
render() {
|
139 |
+
const {url, editingURL, fetching, cannotEmbed,interactive} = this.state;
|
140 |
+
const {iframeSrc, attrs} = this.props.attributes;
|
141 |
+
|
142 |
+
const label = __('Twitch URL');
|
143 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
144 |
+
if (!iframeSrc || editingURL) {
|
145 |
+
return (
|
146 |
+
<EmbedPlaceholder
|
147 |
+
label={label}
|
148 |
+
onSubmit={this.setUrl}
|
149 |
+
value={url}
|
150 |
+
cannotEmbed={cannotEmbed}
|
151 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
152 |
+
icon={twitchIcon}
|
153 |
+
DocTitle={__('Learn more about twitch embed')}
|
154 |
+
docLink={'https://embedpress.com/docs/embed-twitch-streams-chat/'}
|
155 |
+
/>
|
156 |
+
);
|
157 |
+
} else {
|
158 |
+
const IframeUrl = iframeSrc+'&parent='+embedpressObj.twitch_host;
|
159 |
+
return (
|
160 |
+
<Fragment>
|
161 |
+
{fetching ? <EmbedLoading/> : null}
|
162 |
+
|
163 |
+
<Iframe src={IframeUrl} {...attrs}
|
164 |
+
onLoad={this.onLoad}
|
165 |
+
style={{display: fetching ? 'none' : ''}}
|
166 |
+
onFocus={this.hideOverlay}
|
167 |
+
width="600"
|
168 |
+
height="450"/>
|
169 |
+
|
170 |
+
{ ! interactive && (
|
171 |
+
<div
|
172 |
+
className="block-library-embed__interactive-overlay"
|
173 |
+
onMouseUp={ this.hideOverlay }
|
174 |
+
/>
|
175 |
+
) }
|
176 |
+
|
177 |
+
<EmbedControls
|
178 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
179 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
180 |
+
/>
|
181 |
+
</Fragment>
|
182 |
+
|
183 |
+
)
|
184 |
+
}
|
185 |
+
}
|
186 |
+
};
|
187 |
+
export default TwitchEdit;
|
Gutenberg/src/twitch/editor.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
Gutenberg/src/twitch/index.js
ADDED
@@ -0,0 +1,82 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import {twitchIcon} from '../common/icons';
|
13 |
+
|
14 |
+
const {__} = wp.i18n; // Import __() from wp.i18n
|
15 |
+
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
|
16 |
+
|
17 |
+
/**
|
18 |
+
* Register: aa Gutenberg Block.
|
19 |
+
*
|
20 |
+
* Registers a new block provided a unique name and an object defining its
|
21 |
+
* behavior. Once registered, the block is made editor as an option to any
|
22 |
+
* editor interface where blocks are implemented.
|
23 |
+
*
|
24 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
25 |
+
* @param {string} name Block name.
|
26 |
+
* @param {Object} settings Block settings.
|
27 |
+
* @return {?WPBlock} The block, if it has been successfully
|
28 |
+
* registered; otherwise `undefined`.
|
29 |
+
*/
|
30 |
+
registerBlockType('embedpress/twitch-block', {
|
31 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
32 |
+
title: __('Twitch'), // Block title.
|
33 |
+
icon: twitchIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
34 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
35 |
+
keywords: [
|
36 |
+
__('embedpress'),
|
37 |
+
__('twitch'),
|
38 |
+
],
|
39 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
40 |
+
attributes: {
|
41 |
+
url: {
|
42 |
+
type: 'string',
|
43 |
+
default: ''
|
44 |
+
},
|
45 |
+
iframeSrc: {
|
46 |
+
type: 'string',
|
47 |
+
default: ''
|
48 |
+
},
|
49 |
+
attrs: {
|
50 |
+
type: 'string',
|
51 |
+
default: ''
|
52 |
+
}
|
53 |
+
},
|
54 |
+
/**
|
55 |
+
* The edit function describes the structure of your block in the context of the editor.
|
56 |
+
* This represents what the editor will render when the block is used.
|
57 |
+
*
|
58 |
+
* The "edit" property must be a valid function.
|
59 |
+
*
|
60 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
61 |
+
*/
|
62 |
+
edit,
|
63 |
+
|
64 |
+
/**
|
65 |
+
* The save function defines the way in which the different attributes should be combined
|
66 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
67 |
+
*
|
68 |
+
* The "save" property must be specified and must be a valid function.
|
69 |
+
*
|
70 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
71 |
+
*/
|
72 |
+
save: function (props) {
|
73 |
+
const {iframeSrc, attrs} = props.attributes
|
74 |
+
const defaultClass = "ose-twitch-presentation"
|
75 |
+
const IframeUrl = iframeSrc+'&parent='+embedpressObj.twitch_host;
|
76 |
+
return (
|
77 |
+
<figure className={ defaultClass }>
|
78 |
+
<iframe src={IframeUrl} {...attrs} frameborder="0" width="600" height="450"></iframe>
|
79 |
+
</figure>
|
80 |
+
);
|
81 |
+
},
|
82 |
+
});
|
Gutenberg/src/twitch/style.scss
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
Gutenberg/src/wistia/edit.js
ADDED
@@ -0,0 +1,168 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from '../common/embed-controls';
|
5 |
+
import EmbedLoading from '../common/embed-loading';
|
6 |
+
import EmbedPlaceholder from '../common/embed-placeholder';
|
7 |
+
import Iframe from '../common/Iframe';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WordPress dependencies
|
11 |
+
*/
|
12 |
+
const {__} = wp.i18n;
|
13 |
+
const {Component, Fragment} = wp.element;
|
14 |
+
import {wistiaIcon} from '../common/icons'
|
15 |
+
class WistiaEdit extends Component {
|
16 |
+
constructor() {
|
17 |
+
super(...arguments);
|
18 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
19 |
+
this.setUrl = this.setUrl.bind(this);
|
20 |
+
this.onLoad = this.onLoad.bind(this);
|
21 |
+
this.hideOverlay = this.hideOverlay.bind(this);
|
22 |
+
this.state = {
|
23 |
+
editingURL: false,
|
24 |
+
url: this.props.attributes.url,
|
25 |
+
fetching: true,
|
26 |
+
cannotEmbed: false,
|
27 |
+
interactive: false,
|
28 |
+
mediaId: null
|
29 |
+
};
|
30 |
+
this.setUrl();
|
31 |
+
}
|
32 |
+
|
33 |
+
static getDerivedStateFromProps(nextProps, state) {
|
34 |
+
if (!nextProps.isSelected && state.interactive) {
|
35 |
+
return {interactive: false};
|
36 |
+
}
|
37 |
+
|
38 |
+
return null;
|
39 |
+
}
|
40 |
+
|
41 |
+
hideOverlay() {
|
42 |
+
this.setState({interactive: true});
|
43 |
+
}
|
44 |
+
|
45 |
+
|
46 |
+
componentDidMount() {
|
47 |
+
if (this.props.attributes.url) {
|
48 |
+
let mediaIdMatches = this.props.attributes.url.match(/medias\/(.*)/);
|
49 |
+
let mediaId = mediaIdMatches[1];
|
50 |
+
this.setState({
|
51 |
+
...this.state,
|
52 |
+
mediaId
|
53 |
+
});
|
54 |
+
}
|
55 |
+
}
|
56 |
+
|
57 |
+
onLoad() {
|
58 |
+
this.setState({
|
59 |
+
fetching: false
|
60 |
+
});
|
61 |
+
if (embedpressObj['wisita_options']) {
|
62 |
+
let $state = {...this.state}
|
63 |
+
setTimeout(function () {
|
64 |
+
let script = document.createElement("script");
|
65 |
+
script.src = "https://fast.wistia.com/assets/external/E-v1.js";
|
66 |
+
script.charset = "ISO-8859-1"
|
67 |
+
document.body.appendChild(script);
|
68 |
+
}, 100);
|
69 |
+
|
70 |
+
setTimeout(function () {
|
71 |
+
let script = document.createElement("script");
|
72 |
+
script.type = 'text/javascript';
|
73 |
+
script.innerHTML = 'window.pp_embed_wistia_labels = ' + embedpressObj['wistia_labels'];
|
74 |
+
document.body.appendChild(script);
|
75 |
+
|
76 |
+
script = document.createElement("script");
|
77 |
+
script.type = 'text/javascript';
|
78 |
+
script.innerHTML = 'wistiaEmbed = Wistia.embed( \"' + $state.mediaId + '\", ' + embedpressObj.wisita_options + ' );';
|
79 |
+
document.body.appendChild(script);
|
80 |
+
}, 400);
|
81 |
+
}
|
82 |
+
|
83 |
+
}
|
84 |
+
|
85 |
+
decodeHTMLEntities(str) {
|
86 |
+
if (str && typeof str === 'string') {
|
87 |
+
// strip script/html tags
|
88 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
89 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
90 |
+
|
91 |
+
}
|
92 |
+
return str;
|
93 |
+
}
|
94 |
+
|
95 |
+
|
96 |
+
setUrl(event) {
|
97 |
+
if (event) {
|
98 |
+
event.preventDefault();
|
99 |
+
}
|
100 |
+
const {url} = this.state;
|
101 |
+
const {setAttributes} = this.props;
|
102 |
+
setAttributes({url});
|
103 |
+
if (url && (url.match(/^http[s]?:\/\/(?:www\.)?wistia\.com\/medias/i) || url.match(/^http[s]?:\/\/(?:www\.)?fast\/.wistia\.com\/embed\/medias/i.jsonp))) {
|
104 |
+
let mediaIdMatches = url.match(/medias\/(.*)/);
|
105 |
+
let mediaId = mediaIdMatches[1];
|
106 |
+
let iframeSrc = '//fast.wistia.net/embed/iframe/' + mediaId;
|
107 |
+
|
108 |
+
this.setState({editingURL: false, cannotEmbed: false, mediaId});
|
109 |
+
setAttributes({iframeSrc});
|
110 |
+
} else {
|
111 |
+
this.setState({
|
112 |
+
cannotEmbed: true,
|
113 |
+
editingURL: true
|
114 |
+
})
|
115 |
+
}
|
116 |
+
}
|
117 |
+
|
118 |
+
switchBackToURLInput() {
|
119 |
+
this.setState({editingURL: true});
|
120 |
+
}
|
121 |
+
|
122 |
+
render() {
|
123 |
+
const {url, editingURL, fetching, cannotEmbed,interactive} = this.state;
|
124 |
+
const {iframeSrc} = this.props.attributes;
|
125 |
+
|
126 |
+
const label = __('Wistia URL');
|
127 |
+
|
128 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
129 |
+
if (!iframeSrc || editingURL) {
|
130 |
+
return (
|
131 |
+
<EmbedPlaceholder
|
132 |
+
label={label}
|
133 |
+
onSubmit={this.setUrl}
|
134 |
+
value={url}
|
135 |
+
cannotEmbed={cannotEmbed}
|
136 |
+
onChange={(event) => this.setState({url: event.target.value})}
|
137 |
+
icon={wistiaIcon}
|
138 |
+
DocTitle={__('Learn more about Wistia embed')}
|
139 |
+
docLink={'https://embedpress.com/docs/embed-wistia-videos-wordpress/'}
|
140 |
+
/>
|
141 |
+
);
|
142 |
+
} else {
|
143 |
+
return (
|
144 |
+
<Fragment>
|
145 |
+
{fetching ? <EmbedLoading/> : null}
|
146 |
+
|
147 |
+
<div className="ose-wistia" id={"wistia_" + this.state.mediaId}>
|
148 |
+
<Iframe src={iframeSrc} onFocus={ this.hideOverlay } onLoad={this.onLoad} style={{display: fetching ? 'none' : ''}}
|
149 |
+
frameborder="0" width="600" height="330"/>
|
150 |
+
</div>
|
151 |
+
|
152 |
+
{ ! interactive && (
|
153 |
+
<div
|
154 |
+
className="block-library-embed__interactive-overlay"
|
155 |
+
onMouseUp={ this.hideOverlay }
|
156 |
+
/>
|
157 |
+
) }
|
158 |
+
|
159 |
+
<EmbedControls
|
160 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
161 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
162 |
+
/>
|
163 |
+
</Fragment>
|
164 |
+
);
|
165 |
+
}
|
166 |
+
}
|
167 |
+
};
|
168 |
+
export default WistiaEdit;
|
Gutenberg/src/wistia/editor.scss
ADDED
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Editor Styles
|
3 |
+
*
|
4 |
+
* CSS for just Backend enqueued after style.scss
|
5 |
+
* which makes it higher in priority.
|
6 |
+
*/
|
7 |
+
|
Gutenberg/src/wistia/index.js
ADDED
@@ -0,0 +1,77 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import { wistiaIcon } from '../common/icons';
|
13 |
+
const { __ } = wp.i18n; // Import __() from wp.i18n
|
14 |
+
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
|
15 |
+
|
16 |
+
/**
|
17 |
+
* Register: aa Gutenberg Block.
|
18 |
+
*
|
19 |
+
* Registers a new block provided a unique name and an object defining its
|
20 |
+
* behavior. Once registered, the block is made editor as an option to any
|
21 |
+
* editor interface where blocks are implemented.
|
22 |
+
*
|
23 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
24 |
+
* @param {string} name Block name.
|
25 |
+
* @param {Object} settings Block settings.
|
26 |
+
* @return {?WPBlock} The block, if it has been successfully
|
27 |
+
* registered; otherwise `undefined`.
|
28 |
+
*/
|
29 |
+
registerBlockType('embedpress/wistia-block', {
|
30 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
31 |
+
title: __('Wistia'), // Block title.
|
32 |
+
icon: wistiaIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
33 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
34 |
+
keywords: [
|
35 |
+
__('embedpress'),
|
36 |
+
__('wistia'),
|
37 |
+
],
|
38 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
39 |
+
edit,
|
40 |
+
save: function(props) {
|
41 |
+
return null;
|
42 |
+
},
|
43 |
+
deprecated: [{
|
44 |
+
attributes: {
|
45 |
+
url: {
|
46 |
+
type: 'string',
|
47 |
+
default: ''
|
48 |
+
},
|
49 |
+
iframeSrc: {
|
50 |
+
type: 'string',
|
51 |
+
default: ''
|
52 |
+
}
|
53 |
+
},
|
54 |
+
edit,
|
55 |
+
/**
|
56 |
+
* The save function defines the way in which the different attributes should be combined
|
57 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
58 |
+
*
|
59 |
+
* The "save" property must be specified and must be a valid function.
|
60 |
+
*
|
61 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
62 |
+
*/
|
63 |
+
save: function (props) {
|
64 |
+
const { iframeSrc } = props.attributes
|
65 |
+
return (
|
66 |
+
<div class="ose-wistia">
|
67 |
+
<iframe src={iframeSrc}
|
68 |
+
allowtransparency="true"
|
69 |
+
frameborder="0"
|
70 |
+
class="wistia_embed"
|
71 |
+
name="wistia_embed"
|
72 |
+
width="600" height="330"></iframe>
|
73 |
+
</div>
|
74 |
+
);
|
75 |
+
},
|
76 |
+
}]
|
77 |
+
});
|
Gutenberg/src/wistia/index.php
ADDED
@@ -0,0 +1,54 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Renders the `unity-gutenberg/post-slider` block on server.
|
5 |
+
*
|
6 |
+
* @param array $attributes The block attributes.
|
7 |
+
*
|
8 |
+
* @return string Returns the post slider.
|
9 |
+
*/
|
10 |
+
function embedpress_gutenberg_render_block_wistia( $attributes )
|
11 |
+
{
|
12 |
+
ob_start();
|
13 |
+
if ( !empty( $attributes ) && !empty( $attributes[ 'url' ] ) ) :
|
14 |
+
preg_match( '~medias/(.*)~i', $attributes[ 'url' ], $matches );
|
15 |
+
$id = false;
|
16 |
+
if ( isset( $matches[ 1 ] ) ) {
|
17 |
+
$id = $matches[ 1 ];
|
18 |
+
}
|
19 |
+
$align = 'align' . ( isset( $attributes[ 'align' ] ) ? $attributes[ 'align' ] : 'center' );
|
20 |
+
if ( !empty( $id ) ) :
|
21 |
+
?>
|
22 |
+
<div class="ose-wistia wp-block-embed-youtube <?php echo $align; ?>" id="wistia_<?php echo $id; ?>">
|
23 |
+
<iframe src="<?php echo $attributes[ 'iframeSrc' ]; ?>" allowtransparency="true" frameborder="0"
|
24 |
+
class="wistia_embed" name="wistia_embed" width="600" height="330"></iframe>
|
25 |
+
<?php
|
26 |
+
do_action( 'embedpress_gutenberg_wistia_block_after_embed', $attributes ); ?>
|
27 |
+
</div>
|
28 |
+
<?php
|
29 |
+
endif;
|
30 |
+
endif;
|
31 |
+
return ob_get_clean();
|
32 |
+
}
|
33 |
+
|
34 |
+
/**
|
35 |
+
* Registers the `embedpress/wistia-block` block on server.
|
36 |
+
*/
|
37 |
+
function embedpress_gutenberg_register_block_wistia()
|
38 |
+
{
|
39 |
+
if ( function_exists( 'register_block_type' ) ) :
|
40 |
+
register_block_type( 'embedpress/wistia-block', [
|
41 |
+
'attributes' => [
|
42 |
+
'url' => [
|
43 |
+
'type' => 'string',
|
44 |
+
],
|
45 |
+
'iframeSrc' => [
|
46 |
+
'type' => 'string',
|
47 |
+
],
|
48 |
+
],
|
49 |
+
'render_callback' => 'embedpress_gutenberg_render_block_wistia',
|
50 |
+
] );
|
51 |
+
endif;
|
52 |
+
}
|
53 |
+
|
54 |
+
add_action( 'init', 'embedpress_gutenberg_register_block_wistia' );
|
Gutenberg/src/wistia/style.scss
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* #.# Styles
|
3 |
+
*
|
4 |
+
* CSS for both Frontend+Backend.
|
5 |
+
*/
|
6 |
+
|
Gutenberg/src/youtube/edit.js
ADDED
@@ -0,0 +1,155 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import EmbedControls from "../common/embed-controls";
|
5 |
+
import EmbedLoading from "../common/embed-loading";
|
6 |
+
import EmbedPlaceholder from "../common/embed-placeholder";
|
7 |
+
import Iframe from "../common/Iframe";
|
8 |
+
import {youtubeIcon} from "../common/icons";
|
9 |
+
|
10 |
+
|
11 |
+
/**
|
12 |
+
* WordPress dependencies
|
13 |
+
*/
|
14 |
+
const {__} = wp.i18n;
|
15 |
+
const {Component, Fragment} = wp.element;
|
16 |
+
|
17 |
+
class YoutubeEdit extends Component {
|
18 |
+
constructor() {
|
19 |
+
super(...arguments);
|
20 |
+
this.switchBackToURLInput = this.switchBackToURLInput.bind(this);
|
21 |
+
this.setUrl = this.setUrl.bind(this);
|
22 |
+
this.onLoad = this.onLoad.bind(this);
|
23 |
+
this.hideOverlay = this.hideOverlay.bind( this );
|
24 |
+
this.state = {
|
25 |
+
editingURL: false,
|
26 |
+
url: this.props.attributes.url,
|
27 |
+
fetching: true,
|
28 |
+
cannotEmbed: false,
|
29 |
+
interactive: false
|
30 |
+
};
|
31 |
+
}
|
32 |
+
|
33 |
+
static getDerivedStateFromProps( nextProps, state ) {
|
34 |
+
if ( ! nextProps.isSelected && state.interactive ) {
|
35 |
+
return { interactive: false };
|
36 |
+
}
|
37 |
+
|
38 |
+
return null;
|
39 |
+
}
|
40 |
+
|
41 |
+
hideOverlay() {
|
42 |
+
this.setState( { interactive: true } );
|
43 |
+
}
|
44 |
+
|
45 |
+
componentWillMount() {
|
46 |
+
if (this.state.url) {
|
47 |
+
this.setUrl();
|
48 |
+
}
|
49 |
+
}
|
50 |
+
|
51 |
+
onLoad() {
|
52 |
+
this.setState({
|
53 |
+
fetching: false
|
54 |
+
});
|
55 |
+
}
|
56 |
+
|
57 |
+
decodeHTMLEntities(str) {
|
58 |
+
if (str && typeof str === "string") {
|
59 |
+
// strip script/html tags
|
60 |
+
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "");
|
61 |
+
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
|
62 |
+
}
|
63 |
+
return str;
|
64 |
+
}
|
65 |
+
|
66 |
+
setUrl(event) {
|
67 |
+
if (event) {
|
68 |
+
event.preventDefault();
|
69 |
+
}
|
70 |
+
const {url} = this.state;
|
71 |
+
const {setAttributes} = this.props;
|
72 |
+
setAttributes({url});
|
73 |
+
const matches = url.match(
|
74 |
+
/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
|
75 |
+
);
|
76 |
+
if (url && matches) {
|
77 |
+
let mediaId = matches[1];
|
78 |
+
let iframeSrc = "https://www.youtube.com/embed/" + mediaId;
|
79 |
+
let iframeUrl = new URL(iframeSrc);
|
80 |
+
|
81 |
+
// // If your expected result is "http://foo.bar/?x=42&y=2"
|
82 |
+
if (typeof embedpressProObj !== 'undefined') {
|
83 |
+
for (var key in embedpressProObj.youtubeParams) {
|
84 |
+
iframeUrl.searchParams.set(
|
85 |
+
key,
|
86 |
+
embedpressProObj.youtubeParams[key]
|
87 |
+
);
|
88 |
+
}
|
89 |
+
}
|
90 |
+
|
91 |
+
this.setState({editingURL: false, cannotEmbed: false});
|
92 |
+
setAttributes({iframeSrc: iframeUrl.href, mediaId});
|
93 |
+
} else {
|
94 |
+
this.setState({
|
95 |
+
cannotEmbed: true,
|
96 |
+
editingURL: true
|
97 |
+
});
|
98 |
+
}
|
99 |
+
}
|
100 |
+
|
101 |
+
switchBackToURLInput() {
|
102 |
+
this.setState({editingURL: true});
|
103 |
+
}
|
104 |
+
|
105 |
+
render() {
|
106 |
+
const {url, editingURL, fetching, cannotEmbed,interactive} = this.state;
|
107 |
+
const {iframeSrc, attrs} = this.props.attributes;
|
108 |
+
const label = __("Youtube URL");
|
109 |
+
// No preview, or we can't embed the current URL, or we've clicked the edit button.
|
110 |
+
if (!iframeSrc || editingURL) {
|
111 |
+
return (
|
112 |
+
<EmbedPlaceholder
|
113 |
+
label={label}
|
114 |
+
onSubmit={this.setUrl}
|
115 |
+
value={url}
|
116 |
+
cannotEmbed={cannotEmbed}
|
117 |
+
onChange={event => this.setState({url: event.target.value})}
|
118 |
+
icon={youtubeIcon}
|
119 |
+
DocTitle={__('Learn More About Youtube Embed')}
|
120 |
+
docLink={'https://embedpress.com/docs/embed-youtube-wordpress/'}
|
121 |
+
|
122 |
+
/>
|
123 |
+
);
|
124 |
+
} else {
|
125 |
+
return (
|
126 |
+
<Fragment>
|
127 |
+
{fetching ? <EmbedLoading/> : null}
|
128 |
+
|
129 |
+
<Iframe
|
130 |
+
src={iframeSrc}
|
131 |
+
{...attrs}
|
132 |
+
onLoad={this.onLoad}
|
133 |
+
style={{display: fetching ? "none" : ""}}
|
134 |
+
width="640"
|
135 |
+
onFocus={ this.hideOverlay }
|
136 |
+
height="450"
|
137 |
+
/>
|
138 |
+
{ ! interactive && (
|
139 |
+
<div
|
140 |
+
className="block-library-embed__interactive-overlay"
|
141 |
+
onMouseUp={ this.hideOverlay }
|
142 |
+
/>
|
143 |
+
) }
|
144 |
+
|
145 |
+
<EmbedControls
|
146 |
+
showEditButton={iframeSrc && !cannotEmbed}
|
147 |
+
switchBackToURLInput={this.switchBackToURLInput}
|
148 |
+
/>
|
149 |
+
</Fragment>
|
150 |
+
);
|
151 |
+
}
|
152 |
+
}
|
153 |
+
}
|
154 |
+
|
155 |
+
export default YoutubeEdit;
|
Gutenberg/src/youtube/editor.scss
ADDED
File without changes
|
Gutenberg/src/youtube/index.js
ADDED
@@ -0,0 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* BLOCK: embedpress-blocks
|
3 |
+
*
|
4 |
+
* Registering a basic block with Gutenberg.
|
5 |
+
* Simple block, renders and saves the same content without any interactivity.
|
6 |
+
*/
|
7 |
+
|
8 |
+
// Import CSS.
|
9 |
+
import './style.scss';
|
10 |
+
import './editor.scss';
|
11 |
+
import edit from './edit';
|
12 |
+
import { youtubeIcon } from '../common/icons';
|
13 |
+
const { __ } = wp.i18n; // Import __() from wp.i18n
|
14 |
+
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
|
15 |
+
|
16 |
+
/**
|
17 |
+
* Register: aa Gutenberg Block.
|
18 |
+
*
|
19 |
+
* Registers a new block provided a unique name and an object defining its
|
20 |
+
* behavior. Once registered, the block is made editor as an option to any
|
21 |
+
* editor interface where blocks are implemented.
|
22 |
+
*
|
23 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
24 |
+
* @param {string} name Block name.
|
25 |
+
* @param {Object} settings Block settings.
|
26 |
+
* @return {?WPBlock} The block, if it has been successfully
|
27 |
+
* registered; otherwise `undefined`.
|
28 |
+
*/
|
29 |
+
registerBlockType( 'embedpress/youtube-block', {
|
30 |
+
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
31 |
+
title: __( 'Youtube' ), // Block title.
|
32 |
+
icon: youtubeIcon,
|
33 |
+
category: 'embedpress', // Block category — Group blocks together based on common traits E.g. common, formatting, layout Widgets, embed.
|
34 |
+
keywords: [
|
35 |
+
__( 'embedpress' ),
|
36 |
+
__( 'youtube' ),
|
37 |
+
],
|
38 |
+
supports: {align: ["wide", "full","right","left"], default: ''},
|
39 |
+
/**
|
40 |
+
* The edit function describes the structure of your block in the context of the editor.
|
41 |
+
* This represents what the editor will render when the block is used.
|
42 |
+
*
|
43 |
+
* The "edit" property must be a valid function.
|
44 |
+
*
|
45 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
46 |
+
*/
|
47 |
+
edit,
|
48 |
+
|
49 |
+
/**
|
50 |
+
* The save function defines the way in which the different attributes should be combined
|
51 |
+
* into the final markup, which is then serialized by Gutenberg into post_content.
|
52 |
+
*
|
53 |
+
* The "save" property must be specified and must be a valid function.
|
54 |
+
*
|
55 |
+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
56 |
+
*/
|
57 |
+
save: () => {
|
58 |
+
return null
|
59 |
+
}
|
60 |
+
} );
|
Gutenberg/src/youtube/index.php
ADDED
@@ -0,0 +1,66 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
|
4 |
+
/**
|
5 |
+
* Renders the `embedpress/youtube` block on server.
|
6 |
+
*
|
7 |
+
* @param array $attributes The block attributes.
|
8 |
+
*
|
9 |
+
* @return false|string
|
10 |
+
*/
|
11 |
+
function embedpress_gutenberg_render_block_youtube( $attributes )
|
12 |
+
{
|
13 |
+
ob_start();
|
14 |
+
$align = 'align' . ( isset( $attributes[ 'align' ] ) ? $attributes[ 'align' ] : 'center' );
|
15 |
+
$youtube_params = apply_filters( 'embedpress_gutenberg_youtube_params', [] );
|
16 |
+
$iframeUrl = $attributes[ 'iframeSrc' ];
|
17 |
+
foreach ( $youtube_params as $param => $value ) {
|
18 |
+
$iframeUrl = add_query_arg( $param, $value, $iframeUrl );
|
19 |
+
}
|
20 |
+
|
21 |
+
?>
|
22 |
+
<div class="ose-youtube wp-block-embed-youtube <?php echo $align; ?>">
|
23 |
+
<iframe src="<?php echo $iframeUrl; ?>"
|
24 |
+
allowtransparency="true"
|
25 |
+
allowfullscreen="true"
|
26 |
+
frameborder="0"
|
27 |
+
width="640" height="360">
|
28 |
+
</iframe>
|
29 |
+
</div>
|
30 |
+
<?php
|
31 |
+
return ob_get_clean();
|
32 |
+
}
|
33 |
+
|
34 |
+
/**
|
35 |
+
* Registers the `embedpress/youtube-block` block on server.
|
36 |
+
*/
|
37 |
+
function embedpress_gutenberg_register_block_youtube()
|
38 |
+
{
|
39 |
+
if ( function_exists( 'register_block_type' ) ) :
|
40 |
+
register_block_type( 'embedpress/youtube-block', [
|
41 |
+
'style' => 'embedpress_youtube-cgb-style-css',
|
42 |
+
// Enqueue blocks.build.js in the editor only.
|
43 |
+
'editor_script' => 'embedpress_youtube-cgb-block-js',
|
44 |
+
// Enqueue blocks.editor.build.css in the editor only.
|
45 |
+
'editor_style' => 'embedpress_youtube-cgb-block-editor-css',
|
46 |
+
|
47 |
+
'attributes' => [
|
48 |
+
'url' => [
|
49 |
+
'type' => 'string',
|
50 |
+
'default' => ''
|
51 |
+
],
|
52 |
+
'iframeSrc' => [
|
53 |
+
'type' => 'string',
|
54 |
+
'default' => ''
|
55 |
+
],
|
56 |
+
'mediaId' => [
|
57 |
+
'type' => 'string',
|
58 |
+
'default' => ''
|
59 |
+
]
|
60 |
+
],
|
61 |
+
'render_callback' => 'embedpress_gutenberg_render_block_youtube',
|
62 |
+
] );
|
63 |
+
endif;
|
64 |
+
}
|
65 |
+
|
66 |
+
add_action( 'init', 'embedpress_gutenberg_register_block_youtube' );
|
Gutenberg/src/youtube/style.scss
ADDED
File without changes
|
embedpress.php
CHANGED
@@ -5,7 +5,7 @@
|
|
5 |
* Description: EmbedPress lets you embed videos, images, posts, audio, maps and uplaoad PDF, DOC, PPT & all other types of content into your WordPress site with one-click and showcase it beautifully for the visitors. 100+ sources supported.
|
6 |
* Author: WPDeveloper
|
7 |
* Author URI: https://wpdeveloper.net
|
8 |
-
* Version: 2.7.
|
9 |
* Text Domain: embedpress
|
10 |
* Domain Path: /languages
|
11 |
*
|
5 |
* Description: EmbedPress lets you embed videos, images, posts, audio, maps and uplaoad PDF, DOC, PPT & all other types of content into your WordPress site with one-click and showcase it beautifully for the visitors. 100+ sources supported.
|
6 |
* Author: WPDeveloper
|
7 |
* Author URI: https://wpdeveloper.net
|
8 |
+
* Version: 2.7.4
|
9 |
* Text Domain: embedpress
|
10 |
* Domain Path: /languages
|
11 |
*
|
readme.txt
CHANGED
@@ -6,11 +6,11 @@ Tags: embed, embed youtube, gutenberg embed, pdf, doc, docs, ppt, elementor embe
|
|
6 |
Requires at least: 4.6
|
7 |
Tested up to: 5.7
|
8 |
Requires PHP: 5.6
|
9 |
-
Stable tag: 2.7.
|
10 |
License: GPLv3 or later
|
11 |
License URI: https://opensource.org/licenses/GPL-3.0
|
12 |
|
13 |
-
EmbedPress lets you embed videos, images, posts, audio, maps and upload PDF, DOC, PPT & all other types of content into your WordPress site with one-click and showcase it beautifully for the visitors.
|
14 |
|
15 |
== Description ==
|
16 |
|
@@ -262,7 +262,7 @@ Visit [WPDeveloper](https://wpdeveloper.net/) to learn more about how to do bett
|
|
262 |
|
263 |
= Modern Way: =
|
264 |
1. Go to the WordPress Dashboard "Add New Plugin" section.
|
265 |
-
2. Search For "EmbedPress".
|
266 |
3. Install, then Activate it.
|
267 |
4. Follow the [Documentation](https://embedpress.com/documentation/)
|
268 |
|
@@ -286,7 +286,7 @@ Not at all. You can set up everything your team needs without any coding knowled
|
|
286 |
== Screenshots ==
|
287 |
|
288 |
1. YouTube Embeding Example
|
289 |
-
2. EmbedPress Screenshot - Dashboard
|
290 |
3. EmbedPress Screenshot - Google Map
|
291 |
4. EmbedPress Screenshot - Google Sheet
|
292 |
5. EmbedPress Screenshot - Twitter
|
@@ -299,6 +299,9 @@ Not at all. You can set up everything your team needs without any coding knowled
|
|
299 |
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
300 |
and this project adheres to [Semantic Versioning](http://semver.org/).
|
301 |
|
|
|
|
|
|
|
302 |
= [2.7.3] - 2021-03-23 =
|
303 |
* Added: Dedicated button to apply height width on Block Editor.
|
304 |
* Improved: Facebook and Instagram works without APP key
|
@@ -325,7 +328,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
325 |
* Few minor bug fix and improvements
|
326 |
|
327 |
= [2.6.2] - 2020-10-28 =
|
328 |
-
* Fixed: Facebook & Instagram Embedding issue
|
329 |
* Fixed: PHP error on WordPress 4.9.8
|
330 |
* Fixed: Additional stylesheets loaded in frontend
|
331 |
* Fixed: Conflict with WordPress 5.5.1
|
6 |
Requires at least: 4.6
|
7 |
Tested up to: 5.7
|
8 |
Requires PHP: 5.6
|
9 |
+
Stable tag: 2.7.4
|
10 |
License: GPLv3 or later
|
11 |
License URI: https://opensource.org/licenses/GPL-3.0
|
12 |
|
13 |
+
EmbedPress lets you embed videos, images, posts, audio, maps and upload PDF, DOC, PPT & all other types of content into your WordPress site with one-click and showcase it beautifully for the visitors.
|
14 |
|
15 |
== Description ==
|
16 |
|
262 |
|
263 |
= Modern Way: =
|
264 |
1. Go to the WordPress Dashboard "Add New Plugin" section.
|
265 |
+
2. Search For "EmbedPress".
|
266 |
3. Install, then Activate it.
|
267 |
4. Follow the [Documentation](https://embedpress.com/documentation/)
|
268 |
|
286 |
== Screenshots ==
|
287 |
|
288 |
1. YouTube Embeding Example
|
289 |
+
2. EmbedPress Screenshot - Dashboard
|
290 |
3. EmbedPress Screenshot - Google Map
|
291 |
4. EmbedPress Screenshot - Google Sheet
|
292 |
5. EmbedPress Screenshot - Twitter
|
299 |
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
300 |
and this project adheres to [Semantic Versioning](http://semver.org/).
|
301 |
|
302 |
+
= [2.7.4] - 2021-03-23 =
|
303 |
+
* Hotfix: Fatal Error
|
304 |
+
|
305 |
= [2.7.3] - 2021-03-23 =
|
306 |
* Added: Dedicated button to apply height width on Block Editor.
|
307 |
* Improved: Facebook and Instagram works without APP key
|
328 |
* Few minor bug fix and improvements
|
329 |
|
330 |
= [2.6.2] - 2020-10-28 =
|
331 |
+
* Fixed: Facebook & Instagram Embedding issue
|
332 |
* Fixed: PHP error on WordPress 4.9.8
|
333 |
* Fixed: Additional stylesheets loaded in frontend
|
334 |
* Fixed: Conflict with WordPress 5.5.1
|