PHP Classes

File: src/blocks/iframe/block.js

Recommend this page to a friend!
  Classes of Adeleye Ayodeji   Dynamic Iframe for Gutenberg   src/blocks/iframe/block.js   Download  
File: src/blocks/iframe/block.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: 3,484 bytes
 

Contents

Class file image Download
import "./style.scss"; import "./editor.scss"; import Inspector from "./inspector"; const { __ } = wp.i18n; const { Fragment } = wp.element; const { Placeholder } = wp.components; const { registerBlockType } = wp.blocks; registerBlockType("adeleyeayodeji/dynamic-iframe-for-wp", { title: __("Dynamic Iframe", "dynamic-iframe-for-wp"), description: __( "Easily insert dynamic iframes into the block editor.", "dynamic-iframe-for-wp" ), keywords: [ __("iframe"), __("external"), __("embed"), __("video"), __("youtube"), __("vimeo"), __("google maps"), __("google"), __("maps"), __("map"), __("google map"), __("google maps embed"), __("google map embed"), __("google maps iframe"), __("google map iframe"), __("dynamic iframe"), __("dynamic iframe for gutenberg"), __("dynamic iframe block"), __("dynamic iframe block for gutenberg"), __("dynamic iframe for gutenberg block editor"), __("dynamic iframe block for gutenberg block editor"), __("dynamic iframe for gutenberg block"), __("dynamic iframe block for gutenberg block") ], category: "embed", icon: "admin-site-alt", supports: { anchor: true, className: false, customClassName: true, align: ["full"] }, attributes: { iframeSrc: { type: "string" }, iframeWidth: { type: "string" }, iframeHeight: { type: "string" }, allowFullscreen: { type: "boolean" }, useLazyload: { type: "boolean" }, useImportant: { type: "boolean" } }, edit: function (props) { const { attributes } = props; let customClassName = [attributes.className]; if (attributes.align == "full") customClassName.push("alignfull"); const iframeStyle = { width: attributes.iframeWidth || "100%", maxWidth: attributes.iframeWidth || "100%", height: attributes.iframeHeight || "320px" }; let allow = {}; if (attributes.allowFullscreen) allow.allowFullscreen = true; const block = attributes.iframeSrc ? ( <iframe id={attributes.anchor} className={customClassName.join(" ")} src={attributes.iframeSrc} style={iframeStyle} frameBorder="0" {...allow}></iframe> ) : ( <Placeholder icon="admin-site-alt" label={__("Please fill the Iframe URL", "dynamic-iframe-for-wp")} /> ); return ( <Fragment> <Inspector {...props} /> {block} </Fragment> ); }, save: function (props) { const { attributes } = props; let customClassName = [attributes.className]; if (attributes.align == "full") customClassName.push("alignfull"); const iframeStyle = { width: attributes.iframeWidth || "100%", maxWidth: attributes.iframeWidth || "100%", height: attributes.iframeHeight || "320px" }; if (attributes.useImportant) { for (let i in iframeStyle) { iframeStyle[i] += " !important"; } } let allow = {}; if (attributes.allowFullscreen) allow.allowFullscreen = true; return ( <Fragment> <iframe style={iframeStyle} id={attributes.anchor} src={attributes.iframeSrc} class={customClassName.join(" ")} loading={attributes.useLazyload ? "lazy" : false} frameBorder="0" {...allow}></iframe> </Fragment> ); } });