PHP Classes

File: src/blocks/iframe/inspector.js

Recommend this page to a friend!
  Classes of Adeleye Ayodeji   Dynamic Iframe for Gutenberg   src/blocks/iframe/inspector.js   Download  
File: src/blocks/iframe/inspector.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Dynamic Iframe for Gutenberg
Insert dynamic iframes in the WordPress editor
Author: By
Last change:
Date: 2 months ago
Size: 2,579 bytes
 

Contents

Class file image Download
/** * WordPress dependencies */ const { __ } = wp.i18n; const { Component } = wp.element; const { InspectorControls } = wp.editor; const { PanelBody, TextControl, ToggleControl } = wp.components; /** * Inspector controls */ export default class Inspector extends Component { render() { const { attributes, setAttributes } = this.props; return ( <InspectorControls key="inspector"> <PanelBody title={__("Settings", "dynamic-iframe-for-wp")}> <TextControl label={__("Iframe URL", "dynamic-iframe-for-wp")} value={attributes.iframeSrc} onChange={(value) => { //check if the url is youtube with watch in it if (value.includes("youtube.com/watch")) { //get the video id var url = new URL(value); var videoId = url.searchParams.get("v"); //generate the embed url let embedUrl = `https://www.youtube.com/embed/${videoId}`; //set the embed value value = embedUrl; } setAttributes({ iframeSrc: value }); }} /> <ToggleControl label={__("Allow fullscreen", "dynamic-iframe-for-wp")} checked={attributes.allowFullscreen} onChange={(value) => { setAttributes({ allowFullscreen: value }); }} /> <ToggleControl label={__("Add lazyload attribute", "dynamic-iframe-for-wp")} checked={attributes.useLazyload} onChange={(value) => { setAttributes({ useLazyload: value }); }} /> </PanelBody> <PanelBody title={__("Style options", "dynamic-iframe-for-wp")}> <TextControl label={__("Width", "dynamic-iframe-for-wp")} value={attributes.iframeWidth} onChange={(value) => { setAttributes({ iframeWidth: value }); }} /> <TextControl label={__("Height", "dynamic-iframe-for-wp")} value={attributes.iframeHeight} onChange={(value) => { setAttributes({ iframeHeight: value }); }} /> <ToggleControl label={__("Use !important", "dynamic-iframe-for-wp")} checked={attributes.useImportant} onChange={(value) => { setAttributes({ useImportant: value }); }} /> </PanelBody> </InspectorControls> ); } }