From 0ebd6a9e4b5b3354326128c5d521a8ebf293b0ff Mon Sep 17 00:00:00 2001 From: Mitchell Killian Date: Mon, 21 Oct 2019 20:21:00 +0300 Subject: [PATCH] After a Gutenberg update (#14112 - https://github.com/WordPress/gutenberg/pull/14112), the RichText and InspectorControls were moved to the editor component. block.js has been updated to pull these elements from the editor component. --- block.js | 597 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 299 insertions(+), 298 deletions(-) diff --git a/block.js b/block.js index 8991b55..8e1801e 100644 --- a/block.js +++ b/block.js @@ -1,299 +1,300 @@ -(function( blocks, components, element, i18n, _ ) { - var __ = i18n.__; - var el = element.createElement; - var RichText = blocks.RichText; - var InspectorControls = blocks.InspectorControls; - var SelectControl = components.SelectControl; - var TextareaControl = components.TextareaControl; - var ToggleControl = components.ToggleControl; - - var ADDRESS_TEMPLATE_STANDARD = '{name}\n{street}\n{city}, {state} {postal_code}\n{country}'; - var ADDRESS_TEMPLATE_INTERNATONAL = '{name}\n{street}\n{postal_code} {city}\n{state}\n{country}'; - - var ADDRESS_TEMPLATES = { - AU: '{name}\n{street}\n{city} {state} {postal_code}\n{country}', - CA: ADDRESS_TEMPLATE_STANDARD, - GB: '{name}\n{street}\n{city}\n{postal_code}\n{country}', - US: ADDRESS_TEMPLATE_STANDARD - }; - - function tokenize( text ) { - var cursor = 0; - var match; - var pattern = /{([^}]+)?}/g; - var tokens = []; - - while ( match = pattern.exec( text ) ) { - tokens.push( text.slice( cursor, match.index ) ) - tokens.push( match[0] ); - cursor = match.index + match[0].length; - } - - tokens.push( text.substr( cursor, text.length - cursor ) ); - - return _.without( tokens, '' ); - } - - blocks.registerBlockType( 'cedaro/address', { - title: __( 'Address' ), - - description: __( 'Display an address with Schema.org markup.' ), - - icon: 'id', - - category: 'formatting', - - keywords: [ __( 'address' ), __( 'vcard' ) ], - - attributes: { - name: { - type: 'array', - source: 'children', - selector: '.vcard__name' - }, - street: { - type: 'array', - source: 'children', - selector: '.vcard__street' - }, - city: { - type: 'array', - source: 'children', - selector: '.vcard__city' - }, - state: { - type: 'array', - source: 'children', - selector: '.vcard__state' - }, - postal_code: { - type: 'array', - source: 'children', - selector: '.vcard__postal-code' - }, - country: { - type: 'array', - source: 'children', - selector: '.vcard__country' - }, - format: { - type: 'string', - default: 'US' - }, - template: { - type: 'string', - default: ADDRESS_TEMPLATES.US - }, - is_country_hidden: { - type: 'boolean', - default: false - } - }, - - edit: function( props ) { - var attributes = props.attributes; - - var attributeMap = { - name: { - placeholder: __( 'Name' ) - }, - street: { - placeholder: __( 'Street' ) - }, - city: { - placeholder: __( 'City' ) - }, - state: { - placeholder: __( 'State' ) - }, - postal_code: { - placeholder: __( 'Postal Code' ) - }, - country: { - placeholder: __( 'Country' ) - } - }; - - if ( 'CA' === attributes.format ) { - attributeMap.state.placeholder = __( 'Province' ); - } else if ( 'GB' === attributes.format ) { - attributeMap.postal_code.placeholder = __( 'Postcode' ); - } else if ( 'US' === attributes.format ) { - attributeMap.postal_code.placeholder = __( 'Zip Code' ); - } - - var controls = el( InspectorControls, { key: 'inspector' }, - el( ToggleControl, { - label: __( 'Hide the country?' ), - checked: attributes.is_country_hidden, - onChange: function() { - props.setAttributes({ is_country_hidden: ! attributes.is_country_hidden }); - } - }), - el( SelectControl, { - label: __( 'Format' ), - value: attributes.format, - options: [ - { label: __( 'Australia' ), value: 'AU' }, - { label: __( 'Canada' ), value: 'CA' }, - { label: __( 'United Kingdom' ), value: 'GB' }, - { label: __( 'United States' ), value: 'US' }, - { label: __( 'International' ), value: 'international' }, - { label: __( 'Custom' ), value: 'custom' }, - ], - onChange: function( value ) { - props.setAttributes({ format: value }); - - switch ( value ) { - case 'custom' : - break; - case 'international' : - props.setAttributes({ template: ADDRESS_TEMPLATE_INTERNATONAL }); - break; - default : - props.setAttributes({ template: ADDRESS_TEMPLATES[ value ] }); - break; - } - } - }), - 'custom' === attributes.format && el( TextareaControl, { - label: __( 'Template' ), - value: attributes.template, - onChange: function( value ) { - props.setAttributes({ template: value }); - } - }) - ); - - function parse( token ) { - var pattern = new RegExp( '^{(' + _.keys( attributeMap ).join( '|' ) + ')}$' ); - - if ( pattern.test( token ) ) { - var attributeName = token.replace( /{|}/g, '' ); - var attributeProps = attributeMap[ attributeName ]; - - return el( RichText, { - key: attributeName, - wrapperClassName: 'vcard__' + attributeName.replace( '_', '-' ) + '-wrapper', - tagName: 'span', - className: 'vcard__' + attributeName.replace( '_', '-' ), - placeholder: attributeProps.placeholder, - keepPlaceholderOnFocus: true, - value: attributes[ attributeName ], - formattingControls: [ 'bold', 'italic', 'link' ], - onChange: function( value ) { - var attributes = {}; - attributes[ attributeName ] = value; - props.setAttributes( attributes ); - } - }); - } - - return el( 'span', {}, token ); - } - - var elements = _.chain( attributes.template.split( '\n' ) ) - .map( tokenize ) - .map(function( tokens ) { - return tokens.map( parse ).concat([ el( 'br' ) ]); - }) - .flatten() - .initial() // Removes the trailing line break element. - .value(); - - var className = props.className; - className += ' is-' + attributes.format; - className += attributes.is_country_hidden ? ' is-country-hidden' : ''; - - return [ - props.isSelected && controls, - el.apply( null, [ 'div', { className: className, key: 'ui' } ].concat( elements ) ) - ]; - }, - - save: function( props ) { - var attributes = props.attributes; - var template = attributes.template; - - var attributeMap = { - name: { - className: 'vcard__name', - itemProp: 'name' - }, - street: { - className: 'vcard__street', - itemProp: 'streetAddress' - }, - city: { - className: 'vcard__city', - itemProp: 'addressLocality' - }, - state: { - className: 'vcard__state', - itemProp: 'addressRegion' - }, - postal_code: { - className: 'vcard__postal-code', - itemProp: 'postalCode' - }, - country: { - className: 'vcard__country' + ( attributes.is_country_hidden ? ' screen-reader-text' : '' ), - itemProp: 'addressCountry' - } - }; - - function parse( token ) { - var pattern = new RegExp( '^{(' + _.keys( attributeMap ).join( '|' ) + ')}$' ); - - if ( pattern.test( token ) ) { - var attributeName = token.replace( /{|}/g, '' ); - var attributeValue = attributes[ attributeName ]; - var attributeProps = attributeMap[ attributeName ]; - - if ( _.isEmpty( attributeValue ) ) { - return ''; - } - - return el( - 'span', - { - className: attributeProps.className, - itemProp: attributeProps.itemProp - }, - attributeValue - ); - } - - return token; - } - - // Remove variables from the template for empty attributes. - _.each( _.keys( attributeMap ), function( attributeName ) { - if ( _.isEmpty( attributes[ attributeName ] ) ) { - template = template.replace( '{' + attributeName + '}', '' ); - } - }); - - var elements = _.chain( template.split( '\n' ) ) - .map(function( line ) { - return line.replace( /^[, ]+|[, ]+$/g, '' ); - }) - .without( '' ) - .map( tokenize ) - .map(function( tokens ) { - return tokens.map( parse ).concat([ el( 'br' ) ]); - }) - .flatten() - .initial() - .value(); - - return el.apply( null, [ 'div', { itemScope: true, itemType: 'http://schema.org/PostalAddress' } ].concat( elements ) ); - } - }); +(function( blocks, components, element, editor, i18n, _ ) { + var __ = i18n.__; + var el = element.createElement; + var RichText = editor.RichText; + var InspectorControls = editor.InspectorControls; + var SelectControl = components.SelectControl; + var TextareaControl = components.TextareaControl; + var ToggleControl = components.ToggleControl; + + var ADDRESS_TEMPLATE_STANDARD = '{name}\n{street}\n{city}, {state} {postal_code}\n{country}'; + var ADDRESS_TEMPLATE_INTERNATONAL = '{name}\n{street}\n{postal_code} {city}\n{state}\n{country}'; + + var ADDRESS_TEMPLATES = { + AU: '{name}\n{street}\n{city} {state} {postal_code}\n{country}', + CA: ADDRESS_TEMPLATE_STANDARD, + GB: '{name}\n{street}\n{city}\n{postal_code}\n{country}', + US: ADDRESS_TEMPLATE_STANDARD + }; + + function tokenize( text ) { + var cursor = 0; + var match; + var pattern = /{([^}]+)?}/g; + var tokens = []; + + while ( match = pattern.exec( text ) ) { + tokens.push( text.slice( cursor, match.index ) ) + tokens.push( match[0] ); + cursor = match.index + match[0].length; + } + + tokens.push( text.substr( cursor, text.length - cursor ) ); + + return _.without( tokens, '' ); + } + + blocks.registerBlockType( 'cedaro/address', { + title: __( 'Address' ), + + description: __( 'Display an address with Schema.org markup.' ), + + icon: 'id', + + category: 'formatting', + + keywords: [ __( 'address' ), __( 'vcard' ) ], + + attributes: { + name: { + type: 'array', + source: 'children', + selector: '.vcard__name' + }, + street: { + type: 'array', + source: 'children', + selector: '.vcard__street' + }, + city: { + type: 'array', + source: 'children', + selector: '.vcard__city' + }, + state: { + type: 'array', + source: 'children', + selector: '.vcard__state' + }, + postal_code: { + type: 'array', + source: 'children', + selector: '.vcard__postal-code' + }, + country: { + type: 'array', + source: 'children', + selector: '.vcard__country' + }, + format: { + type: 'string', + default: 'US' + }, + template: { + type: 'string', + default: ADDRESS_TEMPLATES.US + }, + is_country_hidden: { + type: 'boolean', + default: false + } + }, + + edit: function( props ) { + var attributes = props.attributes; + + var attributeMap = { + name: { + placeholder: __( 'Name' ) + }, + street: { + placeholder: __( 'Street' ) + }, + city: { + placeholder: __( 'City' ) + }, + state: { + placeholder: __( 'State' ) + }, + postal_code: { + placeholder: __( 'Postal Code' ) + }, + country: { + placeholder: __( 'Country' ) + } + }; + + if ( 'CA' === attributes.format ) { + attributeMap.state.placeholder = __( 'Province' ); + } else if ( 'GB' === attributes.format ) { + attributeMap.postal_code.placeholder = __( 'Postcode' ); + } else if ( 'US' === attributes.format ) { + attributeMap.postal_code.placeholder = __( 'Zip Code' ); + } + + var controls = el( InspectorControls, { key: 'inspector' }, + el( ToggleControl, { + label: __( 'Hide the country?' ), + checked: attributes.is_country_hidden, + onChange: function() { + props.setAttributes({ is_country_hidden: ! attributes.is_country_hidden }); + } + }), + el( SelectControl, { + label: __( 'Format' ), + value: attributes.format, + options: [ + { label: __( 'Australia' ), value: 'AU' }, + { label: __( 'Canada' ), value: 'CA' }, + { label: __( 'United Kingdom' ), value: 'GB' }, + { label: __( 'United States' ), value: 'US' }, + { label: __( 'International' ), value: 'international' }, + { label: __( 'Custom' ), value: 'custom' }, + ], + onChange: function( value ) { + props.setAttributes({ format: value }); + + switch ( value ) { + case 'custom' : + break; + case 'international' : + props.setAttributes({ template: ADDRESS_TEMPLATE_INTERNATONAL }); + break; + default : + props.setAttributes({ template: ADDRESS_TEMPLATES[ value ] }); + break; + } + } + }), + 'custom' === attributes.format && el( TextareaControl, { + label: __( 'Template' ), + value: attributes.template, + onChange: function( value ) { + props.setAttributes({ template: value }); + } + }) + ); + + function parse( token ) { + var pattern = new RegExp( '^{(' + _.keys( attributeMap ).join( '|' ) + ')}$' ); + + if ( pattern.test( token ) ) { + var attributeName = token.replace( /{|}/g, '' ); + var attributeProps = attributeMap[ attributeName ]; + + return el( RichText, { + key: attributeName, + wrapperClassName: 'vcard__' + attributeName.replace( '_', '-' ) + '-wrapper', + tagName: 'span', + className: 'vcard__' + attributeName.replace( '_', '-' ), + placeholder: attributeProps.placeholder, + keepPlaceholderOnFocus: true, + value: attributes[ attributeName ], + formattingControls: [ 'bold', 'italic', 'link' ], + onChange: function( value ) { + var attributes = {}; + attributes[ attributeName ] = value; + props.setAttributes( attributes ); + } + }); + } + + return el( 'span', {}, token ); + } + + var elements = _.chain( attributes.template.split( '\n' ) ) + .map( tokenize ) + .map(function( tokens ) { + return tokens.map( parse ).concat([ el( 'br' ) ]); + }) + .flatten() + .initial() // Removes the trailing line break element. + .value(); + + var className = props.className; + className += ' is-' + attributes.format; + className += attributes.is_country_hidden ? ' is-country-hidden' : ''; + + return [ + props.isSelected && controls, + el.apply( null, [ 'div', { className: className, key: 'ui' } ].concat( elements ) ) + ]; + }, + + save: function( props ) { + var attributes = props.attributes; + var template = attributes.template; + + var attributeMap = { + name: { + className: 'vcard__name', + itemProp: 'name' + }, + street: { + className: 'vcard__street', + itemProp: 'streetAddress' + }, + city: { + className: 'vcard__city', + itemProp: 'addressLocality' + }, + state: { + className: 'vcard__state', + itemProp: 'addressRegion' + }, + postal_code: { + className: 'vcard__postal-code', + itemProp: 'postalCode' + }, + country: { + className: 'vcard__country' + ( attributes.is_country_hidden ? ' screen-reader-text' : '' ), + itemProp: 'addressCountry' + } + }; + + function parse( token ) { + var pattern = new RegExp( '^{(' + _.keys( attributeMap ).join( '|' ) + ')}$' ); + + if ( pattern.test( token ) ) { + var attributeName = token.replace( /{|}/g, '' ); + var attributeValue = attributes[ attributeName ]; + var attributeProps = attributeMap[ attributeName ]; + + if ( _.isEmpty( attributeValue ) ) { + return ''; + } + + return el( + 'span', + { + className: attributeProps.className, + itemProp: attributeProps.itemProp + }, + attributeValue + ); + } + + return token; + } + + // Remove variables from the template for empty attributes. + _.each( _.keys( attributeMap ), function( attributeName ) { + if ( _.isEmpty( attributes[ attributeName ] ) ) { + template = template.replace( '{' + attributeName + '}', '' ); + } + }); + + var elements = _.chain( template.split( '\n' ) ) + .map(function( line ) { + return line.replace( /^[, ]+|[, ]+$/g, '' ); + }) + .without( '' ) + .map( tokenize ) + .map(function( tokens ) { + return tokens.map( parse ).concat([ el( 'br' ) ]); + }) + .flatten() + .initial() + .value(); + + return el.apply( null, [ 'div', { itemScope: true, itemType: 'http://schema.org/PostalAddress' } ].concat( elements ) ); + } + }); })( - window.wp.blocks, - window.wp.components, - window.wp.element, - window.wp.i18n, - window._ -); + window.wp.blocks, + window.wp.components, + window.wp.element, + window.wp.editor, + window.wp.i18n, + window._ +); \ No newline at end of file