| 1 |
/* eslint-disable quotes */ |
| 2 |
/* eslint-disable space-in-parens */ |
| 3 |
/* eslint-disable valid-jsdoc */ |
| 4 |
/** |
| 5 |
* BLOCK: epyt/youtube |
| 6 |
* |
| 7 |
* Registering a basic block with Gutenberg. |
| 8 |
* Simple block, renders and saves the same content without any interactivity. |
| 9 |
*/ |
| 10 |
|
| 11 |
// Import CSS. |
| 12 |
import "./style.scss"; |
| 13 |
import "./editor.scss"; |
| 14 |
|
| 15 |
const { __ } = wp.i18n; // Import __() from wp.i18n |
| 16 |
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks |
| 17 |
const { Component, Fragment } = wp.element; |
| 18 |
const { Button, Modal } = wp.components; |
| 19 |
const { serverSideRender: ServerSideRender } = wp; |
| 20 |
|
| 21 |
//const { withState } = wp.compose; |
| 22 |
|
| 23 |
import debounce from "lodash/debounce"; |
| 24 |
|
| 25 |
/** |
| 26 |
* Register: aa Gutenberg Block. |
| 27 |
* |
| 28 |
* Registers a new block provided a unique name and an object defining its |
| 29 |
* behavior. Once registered, the block is made editor as an option to any |
| 30 |
* editor interface where blocks are implemented. |
| 31 |
* |
| 32 |
* @link https://wordpress.org/gutenberg/handbook/block-api/ |
| 33 |
* @param {string} name Block name. |
| 34 |
* @param {Object} settings Block settings. |
| 35 |
* @return {?WPBlock} The block, if it has been successfully |
| 36 |
* registered; otherwise `undefined`. |
| 37 |
*/ |
| 38 |
registerBlockType("epyt/youtube", { |
| 39 |
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. |
| 40 |
title: __("EmbedPlus for YouTube Wizard"), // Block title. |
| 41 |
// <defs><style>.epytcls-1{fill:red;}.epytcls-2{fill-rule:evenodd;fill:url(#radial-gradient);}.epytcls-3{fill:#31aaff;}.epytcls-4{fill:#fff;}</style><radialGradient id="radial-gradient" cx="193" cy="85.85" r="77.53" gradientUnits="userSpaceOnUse"><stop offset="0.17" stop-color="#fff"/><stop offset="0.68" stop-color="#31aaff"/></radialGradient></defs> |
| 42 |
icon: ( |
| 43 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.89 282.69"> |
| 44 |
<title>EmbedPlus for YouTube Wizard Icon</title> |
| 45 |
<g id="Layer_2" data-name="Layer 2"> |
| 46 |
<g id="Слой_1" data-name="Слой 1"> |
| 47 |
<g id="g5360"> |
| 48 |
<g id="g4167"> |
| 49 |
<path |
| 50 |
id="path4156" |
| 51 |
className="epytcls-1" |
| 52 |
d="M139.27,87.65s-87.11,0-109,5.68A36,36,0,0,0,5.68,118.12C0,140,0,185.26,0,185.26s0,45.44,5.68,67A35.47,35.47,0,0,0,30.3,276.84c22,5.85,109,5.85,109,5.85s87.28,0,109.14-5.68a34.64,34.64,0,0,0,24.44-24.62c5.86-21.69,5.86-67,5.86-67s.17-45.45-5.86-67.31a34.41,34.41,0,0,0-24.44-24.45C226.55,87.65,139.27,87.65,139.27,87.65Zm-27.72,55.77L184,185.26l-72.48,41.65V143.42Z" |
| 53 |
/> |
| 54 |
</g> |
| 55 |
</g> |
| 56 |
<path |
| 57 |
className="epytcls-2" |
| 58 |
d="M143.39,153.45c10.52-19.27,14.91-39.2,19.18-58.61q.68-3,1.33-6l.12-.54-.25-.48c-13.87-26.66-41.06-52.54-57.1-66.42,21,11.33,60,31.21,84,36.13l.63.13.53-.37c4.14-2.92,8.28-5.7,12.28-8.4,13.41-9,26.27-17.67,38.31-30.64-10.26,20.67-14.18,40.47-18.14,64.42l-.09.58.32.48c18.19,27.91,40.93,50.88,54.81,63.7C261.68,137.5,230,121.76,197,115.29l-.57-.12-3.83,2.35C176,127.67,159,138.08,143.39,153.45Z" |
| 59 |
/> |
| 60 |
<path |
| 61 |
className="epytcls-3" |
| 62 |
d="M237.47,25.4c-7.73,18.08-11.19,36-14.67,57l-.19,1.15.64,1c15,23,33.15,42.76,46.87,56.19-18.4-9.59-45.13-21.49-72.87-26.93l-1.15-.22-1,.61-3.33,2c-14.47,8.86-29.26,17.93-43.24,30.34,7.94-17,11.77-34.43,15.51-51.43q.66-3,1.33-6l.24-1.06-.51-1c-11.66-22.4-32.12-43.86-48-58.48C139,40,170,54.82,190.37,59l1.27.26,1.06-.74c4.12-2.91,8.25-5.69,12.25-8.38,11.27-7.59,22.16-14.91,32.52-24.74M254.86,0l-.74,1.11L254.86,0Zm-.74,1.11C235.26,28.88,213.71,40,191,56.06c-33.55-6.88-97.91-43.92-97.91-43.92s49,37.13,69.38,76.37c-6,26.61-11,54.9-31.35,80.94,19.83-25.28,42.66-38.61,65.58-52.69,50.06,9.8,96.22,40.55,96.22,40.55s-38.84-31-67.13-74.4c4.89-29.58,9.81-54,28.36-81.8Z" |
| 63 |
/> |
| 64 |
<polyline |
| 65 |
className="epytcls-4" |
| 66 |
points="102.6 133.11 102.6 133.11 192.98 185.28 102.6 237.22 102.6 133.11" |
| 67 |
/> |
| 68 |
</g> |
| 69 |
</g> |
| 70 |
</svg> |
| 71 |
), |
| 72 |
category: "embed", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. |
| 73 |
keywords: [__("gallery"), __("live"), __("video")], // playlist |
| 74 |
description: __('Embed a video, playlist, channel, gallery, or live stream.'), |
| 75 |
attributes: { |
| 76 |
shortcode: { |
| 77 |
type: "string", |
| 78 |
default: "" |
| 79 |
} |
| 80 |
}, |
| 81 |
|
| 82 |
/** |
| 83 |
* The edit function describes the structure of your block in the context of the editor. |
| 84 |
* This represents what the editor will render when the block is used. |
| 85 |
* |
| 86 |
* The "edit" property must be a valid function. |
| 87 |
* |
| 88 |
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 89 |
*/ |
| 90 |
edit: class extends Component { |
| 91 |
state = { show: false }; |
| 92 |
|
| 93 |
constructor(props) { |
| 94 |
super(...arguments); |
| 95 |
this.props = props; |
| 96 |
|
| 97 |
//this.onMessage = this.onMessage.bind(this); |
| 98 |
} |
| 99 |
|
| 100 |
componentDidMount() { |
| 101 |
window.addEventListener("message", this.onMessage); |
| 102 |
this.gbPreviewSetup("componentDidMount"); |
| 103 |
} |
| 104 |
|
| 105 |
componentDidUpdate() { |
| 106 |
this.gbPreviewSetup("componentDidUpdate"); |
| 107 |
} |
| 108 |
|
| 109 |
componentWillUnmount() { |
| 110 |
window.removeEventListener("message", this.onMessage); |
| 111 |
} |
| 112 |
|
| 113 |
showModal = () => { |
| 114 |
this.setState({ show: true }); |
| 115 |
}; |
| 116 |
|
| 117 |
hideModal = () => { |
| 118 |
this.setState({ show: false }); |
| 119 |
}; |
| 120 |
|
| 121 |
onMessage = e => { |
| 122 |
try { |
| 123 |
if ( |
| 124 |
e.data.indexOf("youtubeembedplus") === 0 && |
| 125 |
e.data.indexOf(this.props.clientId) > 0 |
| 126 |
) { |
| 127 |
let embedcode = ""; |
| 128 |
embedcode = e.data.split("|")[1]; |
| 129 |
// if (embedcode.indexOf("[") !== 0) |
| 130 |
// { |
| 131 |
// embedcode = "<p>" + embedcode + "</p>"; |
| 132 |
// } |
| 133 |
this.props.setAttributes({ shortcode: embedcode.toString() }); |
| 134 |
this.hideModal(); // close modal |
| 135 |
this.gbPreviewSetup("onMessage"); |
| 136 |
} |
| 137 |
} catch (err) { } |
| 138 |
}; |
| 139 |
|
| 140 |
gbPreviewSetup = debounce(myContext => { |
| 141 |
setTimeout(() => { |
| 142 |
window._EPYTA_.gbPreviewSetup(); |
| 143 |
}, 1500); |
| 144 |
}, 50); |
| 145 |
|
| 146 |
render() { |
| 147 |
if (this.props.attributes.shortcode) { |
| 148 |
const ssr = ( |
| 149 |
<ServerSideRender |
| 150 |
block="epyt/youtube" |
| 151 |
attributes={this.props.attributes} |
| 152 |
/> |
| 153 |
); |
| 154 |
return ssr; |
| 155 |
} |
| 156 |
|
| 157 |
return ( |
| 158 |
<div className="components-placeholder is-large editor-media-placeholder wp-block-image epytblock"> |
| 159 |
<div className="components-placeholder__label"> |
| 160 |
<svg |
| 161 |
xmlns="http://www.w3.org/2000/svg" |
| 162 |
viewBox="0 0 292.89 282.69" |
| 163 |
width="20" |
| 164 |
height="20" |
| 165 |
className="dashicon" |
| 166 |
> |
| 167 |
<title>EmbedPlus for YouTube Wizard Icon</title> |
| 168 |
<g id="Layer_2" data-name="Layer 2"> |
| 169 |
<g id="Слой_1" data-name="Слой 1"> |
| 170 |
<g id="g5360"> |
| 171 |
<g id="g4167"> |
| 172 |
<path |
| 173 |
id="path4156" |
| 174 |
className="epytcls-1" |
| 175 |
d="M139.27,87.65s-87.11,0-109,5.68A36,36,0,0,0,5.68,118.12C0,140,0,185.26,0,185.26s0,45.44,5.68,67A35.47,35.47,0,0,0,30.3,276.84c22,5.85,109,5.85,109,5.85s87.28,0,109.14-5.68a34.64,34.64,0,0,0,24.44-24.62c5.86-21.69,5.86-67,5.86-67s.17-45.45-5.86-67.31a34.41,34.41,0,0,0-24.44-24.45C226.55,87.65,139.27,87.65,139.27,87.65Zm-27.72,55.77L184,185.26l-72.48,41.65V143.42Z" |
| 176 |
/> |
| 177 |
</g> |
| 178 |
</g> |
| 179 |
<path |
| 180 |
className="epytcls-2" |
| 181 |
d="M143.39,153.45c10.52-19.27,14.91-39.2,19.18-58.61q.68-3,1.33-6l.12-.54-.25-.48c-13.87-26.66-41.06-52.54-57.1-66.42,21,11.33,60,31.21,84,36.13l.63.13.53-.37c4.14-2.92,8.28-5.7,12.28-8.4,13.41-9,26.27-17.67,38.31-30.64-10.26,20.67-14.18,40.47-18.14,64.42l-.09.58.32.48c18.19,27.91,40.93,50.88,54.81,63.7C261.68,137.5,230,121.76,197,115.29l-.57-.12-3.83,2.35C176,127.67,159,138.08,143.39,153.45Z" |
| 182 |
/> |
| 183 |
<path |
| 184 |
className="epytcls-3" |
| 185 |
d="M237.47,25.4c-7.73,18.08-11.19,36-14.67,57l-.19,1.15.64,1c15,23,33.15,42.76,46.87,56.19-18.4-9.59-45.13-21.49-72.87-26.93l-1.15-.22-1,.61-3.33,2c-14.47,8.86-29.26,17.93-43.24,30.34,7.94-17,11.77-34.43,15.51-51.43q.66-3,1.33-6l.24-1.06-.51-1c-11.66-22.4-32.12-43.86-48-58.48C139,40,170,54.82,190.37,59l1.27.26,1.06-.74c4.12-2.91,8.25-5.69,12.25-8.38,11.27-7.59,22.16-14.91,32.52-24.74M254.86,0l-.74,1.11L254.86,0Zm-.74,1.11C235.26,28.88,213.71,40,191,56.06c-33.55-6.88-97.91-43.92-97.91-43.92s49,37.13,69.38,76.37c-6,26.61-11,54.9-31.35,80.94,19.83-25.28,42.66-38.61,65.58-52.69,50.06,9.8,96.22,40.55,96.22,40.55s-38.84-31-67.13-74.4c4.89-29.58,9.81-54,28.36-81.8Z" |
| 186 |
/> |
| 187 |
<polyline |
| 188 |
className="epytcls-4" |
| 189 |
points="102.6 133.11 102.6 133.11 192.98 185.28 102.6 237.22 102.6 133.11" |
| 190 |
/> |
| 191 |
</g> |
| 192 |
</g> |
| 193 |
</svg> |
| 194 |
EmbedPlus for YouTube Wizard |
| 195 |
</div> |
| 196 |
<div className="components-placeholder__instructions"> |
| 197 |
Click the button below to easily embed a video, playlist, channel, |
| 198 |
gallery, or live stream. |
| 199 |
</div> |
| 200 |
<div className="components-placeholder__fieldset"> |
| 201 |
<div> |
| 202 |
<Button isPrimary onClick={this.showModal}> |
| 203 |
Open Wizard |
| 204 |
</Button> |
| 205 |
{this.state.show ? ( |
| 206 |
<Modal |
| 207 |
title="EmbedPlus for YouTube Wizard" |
| 208 |
className="epytblock epytblock__modal" |
| 209 |
onRequestClose={this.hideModal} |
| 210 |
shouldCloseOnClickOutside={false} |
| 211 |
> |
| 212 |
<iframe |
| 213 |
title="EmbedPlus for YouTube Wizard" |
| 214 |
src={ |
| 215 |
window._EPYTA_.wizhref + |
| 216 |
"&clientId=" + |
| 217 |
this.props.clientId |
| 218 |
} |
| 219 |
/> |
| 220 |
</Modal> |
| 221 |
) : null} |
| 222 |
</div> |
| 223 |
</div> |
| 224 |
</div> |
| 225 |
); |
| 226 |
} |
| 227 |
}, |
| 228 |
|
| 229 |
/**/ |
| 230 |
/** |
| 231 |
* The save function defines the way in which the different attributes should be combined |
| 232 |
* into the final markup, which is then serialized by Gutenberg into post_content. |
| 233 |
* |
| 234 |
* The "save" property must be specified and must be a valid function. |
| 235 |
* |
| 236 |
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 237 |
*/ |
| 238 |
save: function (props) { |
| 239 |
return <Fragment>{props.attributes.shortcode}</Fragment>; |
| 240 |
} |
| 241 |
}); |
| 242 |
|
