index.js
113 lines
| 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: { |
| 43 | align: true, |
| 44 | lightBlockWrapper: true, |
| 45 | }, |
| 46 | attributes: { |
| 47 | id: { |
| 48 | type: "string" |
| 49 | }, |
| 50 | href: { |
| 51 | type: "string" |
| 52 | }, |
| 53 | powered_by: { |
| 54 | type: "boolean", |
| 55 | default: true, |
| 56 | }, |
| 57 | width: { |
| 58 | type: 'number', |
| 59 | default: 600, |
| 60 | }, |
| 61 | height: { |
| 62 | type: 'number', |
| 63 | default: 600, |
| 64 | }, |
| 65 | fileName: { |
| 66 | type: "string", |
| 67 | }, |
| 68 | mime: { |
| 69 | type: "string", |
| 70 | } |
| 71 | }, |
| 72 | /** |
| 73 | * The edit function describes the structure of your block in the context of the editor. |
| 74 | * This represents what the editor will render when the block is used. |
| 75 | * |
| 76 | * The "edit" property must be a valid function. |
| 77 | * |
| 78 | * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 79 | */ |
| 80 | edit, |
| 81 | |
| 82 | /** |
| 83 | * The save function defines the way in which the different attributes should be combined |
| 84 | * into the final markup, which is then serialized by Gutenberg into post_content. |
| 85 | * |
| 86 | * The "save" property must be specified and must be a valid function. |
| 87 | * |
| 88 | * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ |
| 89 | */ |
| 90 | //save |
| 91 | save: function (props) { |
| 92 | const {href, mime, id, width, height, powered_by} = props.attributes |
| 93 | const iframeSrc = '//view.officeapps.live.com/op/embed.aspx?src='+href; |
| 94 | const defaultClass = "embedpress-embed-document" |
| 95 | return ( |
| 96 | <figure className={defaultClass}> |
| 97 | {mime === 'application/pdf' && ( |
| 98 | <div style={{height: height, width: width}} className={'embedpress-embed-document-pdf' + ' ' + id} |
| 99 | data-emid={id} data-emsrc={href}></div> |
| 100 | )} |
| 101 | {mime !== 'application/pdf' && ( |
| 102 | <iframe style={{height: height, width: width}} src={iframeSrc} mozallowfullscreen="true" |
| 103 | webkitallowfullscreen="true"/> |
| 104 | )} |
| 105 | {powered_by && ( |
| 106 | <p className="embedpress-el-powered">Powered By EmbedPress</p> |
| 107 | )} |
| 108 | </figure> |
| 109 | ); |
| 110 | }, |
| 111 | |
| 112 | }); |
| 113 |