diff --git a/blocks/library/index.js b/blocks/library/index.js index 94c00c5538d60..88024283e1382 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -18,6 +18,7 @@ import './latest-posts'; import './categories'; import './cover-image'; import './cover-text'; +import './shortcode'; import './text-columns'; import './verse'; import './video'; diff --git a/blocks/library/shortcode/index.js b/blocks/library/shortcode/index.js new file mode 100644 index 0000000000000..c2e84e0f7028d --- /dev/null +++ b/blocks/library/shortcode/index.js @@ -0,0 +1,66 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { withInstanceId, Dashicon } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlockType, source } from '../../api'; +import InspectorControls from '../../inspector-controls'; +import BlockDescription from '../../block-description'; + +const { text } = source; + +registerBlockType( 'core/shortcode', { + title: __( 'Shortcode' ), + + icon: 'marker', + + category: 'widgets', + + attributes: { + text: { + type: 'string', + source: text(), + }, + }, + + className: false, + + edit: withInstanceId( + ( { attributes, setAttributes, instanceId, focus } ) => { + const inputId = `blocks-shortcode-input-${ instanceId }`; + + return ( +
+ + setAttributes( { + text: event.target.value, + } ) } /> + { focus && + + +

{ __( 'A shortcode is a WordPress-specific code snippet that is written between square brackets as [shortcode]. ' ) }

+
+
+ } +
+ ); + } + ), + + save( { attributes } ) { + return attributes.text; + }, +} ); diff --git a/blocks/library/shortcode/style.scss b/blocks/library/shortcode/style.scss new file mode 100644 index 0000000000000..f2287c1386cdb --- /dev/null +++ b/blocks/library/shortcode/style.scss @@ -0,0 +1,22 @@ +.wp-block-shortcode { + display: flex; + flex-direction: row; + padding: 1em; + background-color: $light-gray-100; + + label { + flex-basis: 0; + display: flex; + align-items: center; + margin-right: $item-spacing; + white-space: nowrap; + } + + input { + flex: 1 0 0%; + } + + .dashicon { + margin-right: $item-spacing; + } +} diff --git a/blocks/test/fixtures/core__shortcode.html b/blocks/test/fixtures/core__shortcode.html new file mode 100644 index 0000000000000..ed4bd8928dbee --- /dev/null +++ b/blocks/test/fixtures/core__shortcode.html @@ -0,0 +1,3 @@ + +[gallery ids="238,338"] + diff --git a/blocks/test/fixtures/core__shortcode.json b/blocks/test/fixtures/core__shortcode.json new file mode 100644 index 0000000000000..c656285da72a5 --- /dev/null +++ b/blocks/test/fixtures/core__shortcode.json @@ -0,0 +1,10 @@ +[ + { + "uid": "_uid_0", + "name": "core/shortcode", + "isValid": true, + "attributes": { + "text": "[gallery ids=\"238,338\"]" + } + } +] diff --git a/blocks/test/fixtures/core__shortcode.parsed.json b/blocks/test/fixtures/core__shortcode.parsed.json new file mode 100644 index 0000000000000..1d2c79754d4c6 --- /dev/null +++ b/blocks/test/fixtures/core__shortcode.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/shortcode", + "attrs": null, + "rawContent": "\n[gallery ids=\"238,338\"]\n" + }, + { + "attrs": {}, + "rawContent": "\n" + } +] diff --git a/blocks/test/fixtures/core__shortcode.serialized.html b/blocks/test/fixtures/core__shortcode.serialized.html new file mode 100644 index 0000000000000..ed4bd8928dbee --- /dev/null +++ b/blocks/test/fixtures/core__shortcode.serialized.html @@ -0,0 +1,3 @@ + +[gallery ids="238,338"] +