Add a Nutrifox block for the Block Editor

.babelrc

@@ -0,0 +1,23 @@
+{
+ "presets": [
+ [ "@babel/preset-env", {
+ "modules": false,
+ "targets": {
+ "browsers": [
+ "last 2 Chrome versions",
+ "last 2 Firefox versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 1 Android version",
+ "last 1 ChromeAndroid version",
+ "ie 11"
+ ]
+ }
+ } ]
+ ],
+ "plugins": [
+ [ "transform-react-jsx", {
+ "pragma": "wp.element.createElement"
+ } ]
+ ]
+}

.distignore

@@ -1,28 +1,33 @@
 # A set of files you probably don't want in your WordPress.org distribution
 .babelrc
+.deployignore
 .distignore
 .editorconfig
-.eslintrc
 .eslintignore
+.eslintrc
 .git
 .gitignore
 .gitlab-ci.yml
 .travis.yml
 .DS_Store
 Thumbs.db
 behat.yml
+bitbucket-pipelines.yml
 bin
-circle.yml
+.circleci/config.yml
 composer.json
 composer.lock
+dependencies.yml
 Gruntfile.js
 package.json
 package-lock.json
 phpunit.xml
 phpunit.xml.dist
 multisite.xml
 multisite.xml.dist
+.phpcs.xml
 phpcs.xml
+.phpcs.xml.dist
 phpcs.xml.dist
 README.md
 webpack.config.js

.eslintrc

@@ -0,0 +1,7 @@
+{
+ "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ],
+ "globals": {
+ "lodash": true,
+ "wp": true
+ }
+}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 Thumbs.db
 wp-cli.local.yml
+assets/dist/
 node_modules/
 vendor/
 *.sql

assets/block-editor/index.js

@@ -0,0 +1,10 @@
+const {
+ registerBlockType,
+} = wp.blocks;
+
+/**
+ * Internal dependencies
+ */
+import blockRegistration from './nutrifox-block';
+
+registerBlockType( 'nutrifox/nutrifox', blockRegistration );

assets/block-editor/nutrifox-block.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+const {
+ PlainText,
+} = wp.editor;
+
+const {
+ Dashicon,
+ ServerSideRender,
+} = wp.components;
+
+const {
+ Fragment,
+} = wp.element;
+
+const {
+ __,
+} = wp.i18n;
+
+const edit = ( { attributes, setAttributes, instanceId } ) => {
+ const inputId = `blocks-nutrifox-input-${ instanceId }`;
+ const placeholderStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ padding: '14px',
+ backgroundColor: '#f8f9f9',
+ fontSize: '13px',
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+ };
+ const labelStyle = {
+ display: 'flex',
+ alignItems: 'center',
+ whiteSpace: 'nowrap',
+ marginRight: '8px',
+ fontWeight: 600,
+ flexShrink: 0,
+ };
+ const spanStyle = {
+ marginLeft: '8px',
+ };
+ return (
+ <Fragment>
+ <div className="wp-nutrifox-shortcode" style={ placeholderStyle }>
+ <label htmlFor={ inputId } style={ labelStyle }>
+ <Dashicon icon="carrot" />
+ <span style={ spanStyle }>{ __( 'Nutrifox Card' ) }</span>
+ </label>
+ <PlainText
+ id={ inputId }
+ className="input-control"
+ value={ attributes.url }
+ placeholder={ __( 'Paste Nutrifox URL or ID here…' ) }
+ onChange={ ( url ) => setAttributes( { url } ) }
+ />
+ </div>
+ { attributes.url &&
+ <ServerSideRender block="nutrifox/nutrifox" attributes={ attributes } />
+ }
+ </Fragment>
+ );
+};
+
+// Renders dynamically on the frontend.
+const save = () => {
+ return null;
+};
+
+const blockRegistration = {
+ title: __( 'Nutrifox Card', 'nutrifox' ),
+ icon: 'carrot',
+ category: 'common',
+ html: false,
+ attributes: {
+ id: {
+ type: 'number',
+ },
+ url: {
+ type: 'string',
+ },
+ },
+ edit,
+ save,
+ transforms: {
+ from: [
+ {
+ type: 'shortcode',
+ tag: 'nutrifox',
+ attributes: {
+ id: {
+ type: 'number',
+ shortcode: ( props ) => {
+ if ( typeof props.named.id === 'undefined' ) {
+ return 0;
+ }
+ return parseInt( props.named.id );
+ },
+ },
+ },
+ },
+ ],
+ },
+};
+
+export default blockRegistration;

nutrifox.php

@@ -19,6 +19,42 @@
 function nutrifox_action_init() {
  add_shortcode( 'nutrifox', 'nutrifox_shortcode' );
  wp_embed_register_handler( 'nutrifox', '#^https?://nutrifox\.com/(embed/label|recipes)/(?P<id>\d+)(/edit)?#', 'nutrifox_shortcode' );
+ if ( function_exists( 'register_block_type' ) ) {
+ $time = filemtime( dirname( __FILE__ ) . '/assets/js/nutrifox-resize.js' );
+ wp_register_script(
+ 'nutrifox-resize',
+ plugins_url( 'assets/js/nutrifox-resize.js?r=' . (int) $time, __FILE__ )
+ );
+ $time = filemtime( dirname( __FILE__ ) . '/assets/dist/block-editor.build.js' );
+ wp_register_script(
+ 'nutrifox-block-editor',
+ plugins_url( 'assets/dist/block-editor.build.js?r=' . (int) $time, __FILE__ ),
+ array(
+ 'nutrifox-resize',
+ 'wp-blocks',
+ 'wp-editor',
+ 'wp-element',
+ 'wp-components',
+ 'wp-data',
+ 'wp-i18n',
+ )
+ );
+ register_block_type(
+ 'nutrifox/nutrifox',
+ array(
+ 'attributes' => array(
+ 'id' => array(
+ 'type' => 'number',
+ ),
+ 'url' => array(
+ 'type' => 'string',
+ ),
+ ),
+ 'editor_script' => 'nutrifox-block-editor',
+ 'render_callback' => 'nutrifox_shortcode',
+ )
+ );
+ }
 }
 add_action( 'init', 'nutrifox_action_init' );
 
@@ -28,9 +64,23 @@ function nutrifox_action_init() {
  * @param array $attr Shortcode attributes.
  */
 function nutrifox_shortcode( $attr ) {
- if ( empty( $attr['id'] ) ) {
+ if ( empty( $attr['id'] ) && empty( $attr['url'] ) ) {
  return '';
  }
+ if ( ! empty( $attr['url'] ) ) {
+ if ( is_numeric( $attr['url'] ) ) {
+ $attr['id'] = $attr['url'];
+ } else {
+ preg_match( '#^https?://nutrifox\.com/(embed/label|recipes)/(?P<id>\d+)(/edit)?#', $attr['url'], $matches );
+ if ( empty( $matches ) ) {
+ if ( current_user_can( 'edit_posts' ) ) {
+ return __( 'Invalid Nutrifox URL provided.', 'nutrifox' );
+ }
+ return '';
+ }
+ $attr['id'] = $matches['id'];
+ }
+ }
  $nutrifox_id = (int) $attr['id'];
  $nutrifox_iframe_url = sprintf( 'https://nutrifox.com/embed/label/%d', $nutrifox_id );
  $nutrifox_resize_script = file_get_contents( dirname( __FILE__ ) . '/assets/js/nutrifox-resize.js' );