[Summary view] [Print] [Text view]

   1  /**
   2   * WordPress dependencies.
   3   */
   4  const {
   5      element: {
   6          createElement,
   7          Fragment,
   8          useState,
   9      },
  10      i18n: {
  11          __,
  12      },
  13      components: {
  14          Placeholder,
  15          Disabled,
  16          SandBox,
  17          Button,
  18          ExternalLink,
  19          Spinner,
  20          ToolbarGroup,
  21          ToolbarButton,
  22      },
  23      compose: {
  24          compose,
  25      },
  26      data: {
  27          withSelect,
  28      },
  29      blockEditor: {
  30          RichText,
  31          BlockControls,
  32      }
  33  } = wp;
  34  
  35  /**
  36   * BuddyPress dependencies.
  37   */
  38   const {
  39      blockData: {
  40          embedScriptURL,
  41      }
  42  } = bp;
  43  
  44  const EditEmbedActivity = ( {
  45      attributes,
  46      setAttributes,
  47      isSelected,
  48      preview,
  49      fetching
  50  } ) => {
  51      const { url, caption } = attributes;
  52      const label = __( 'BuddyPress Activity URL', 'buddypress' );
  53      const [ value, setURL ] = useState( url );
  54      const [ isEditingURL, setIsEditingURL ] = useState( ! url );
  55  
  56      const onSubmit = ( event ) => {
  57          if ( event ) {
  58              event.preventDefault();
  59          }
  60  
  61          setIsEditingURL( false );
  62          setAttributes( { url: value } );
  63      };
  64  
  65      const switchBackToURLInput = ( event ) => {
  66          if ( event ) {
  67              event.preventDefault();
  68          }
  69  
  70          setIsEditingURL( true );
  71      };
  72  
  73      const editToolbar = (
  74          <BlockControls>
  75              <ToolbarGroup>
  76                  <ToolbarButton
  77                      icon="edit"
  78                      title={ __( 'Edit URL', 'buddypress' ) }
  79                      onClick={ switchBackToURLInput }
  80                  />
  81              </ToolbarGroup>
  82          </BlockControls>
  83      );
  84  
  85      if ( isEditingURL ) {
  86          return (
  87              <Placeholder
  88                  icon="buddicons-activity"
  89                  label={ label }
  90                  className="wp-block-embed"
  91                  instructions={ __( 'Paste the link to the activity content you want to display on your site.', 'buddypress' ) }
  92              >
  93                  <form onSubmit={ onSubmit }>
  94                      <input
  95                          type="url"
  96                          value={ value || '' }
  97                          className="components-placeholder__input"
  98                          aria-label={ label }
  99                          placeholder={ __( 'Enter URL to embed here…', 'buddypress' ) }
 100                          onChange={ ( event ) => setURL( event.target.value ) }
 101                      />
 102                      <Button isPrimary type="submit">
 103                          { __( 'Embed', 'buddypress' ) }
 104                      </Button>
 105                  </form>
 106                  <div className="components-placeholder__learn-more">
 107                      <ExternalLink
 108                          href={ __(
 109                              'https://codex.buddypress.org/activity-embeds/'
 110                          ) }
 111                      >
 112                          { __( 'Learn more about activity embeds', 'buddypress' ) }
 113                      </ExternalLink>
 114                  </div>
 115              </Placeholder>
 116          );
 117      }
 118  
 119      if ( fetching ) {
 120          return (
 121              <div className="wp-block-embed is-loading">
 122                  <Spinner />
 123                  <p>{ __( 'Embedding…', 'buddypress' ) }</p>
 124              </div>
 125          );
 126      }
 127  
 128      if ( ! preview || ! preview['x_buddypress'] || 'activity' !== preview['x_buddypress'] ) {
 129          return (
 130              <Fragment>
 131                  { editToolbar }
 132                  <Placeholder
 133                      icon="buddicons-activity"
 134                      label={ label }
 135                  >
 136                      <p className="components-placeholder__error">
 137                          { __( 'The URL you provided is not a permalink to a public BuddyPress Activity. Please use another URL.', 'buddypress' ) }
 138                      </p>
 139                  </Placeholder>
 140              </Fragment>
 141          );
 142      }
 143  
 144      return (
 145          <Fragment>
 146              { ! isEditingURL && editToolbar }
 147              <figure className="wp-block-embed is-type-bp-activity">
 148                  <div className="wp-block-embed__wrapper">
 149                      <Disabled>
 150                          <SandBox
 151                              html={ preview && preview.html ? preview.html : '' }
 152                              scripts={ [ embedScriptURL ] }
 153                          />
 154                      </Disabled>
 155                  </div>
 156                  { ( ! RichText.isEmpty( caption ) || isSelected ) && (
 157                      <RichText
 158                          tagName="figcaption"
 159                          placeholder={ __( 'Write caption…', 'buddypress' ) }
 160                          value={ caption }
 161                          onChange={ ( value ) => setAttributes( { caption: value } ) }
 162                          inlineToolbar
 163                      />
 164                  ) }
 165              </figure>
 166          </Fragment>
 167      );
 168  }
 169  
 170  const editEmbedActivityBlock = compose( [
 171      withSelect( ( select, ownProps ) => {
 172          const { url } = ownProps.attributes;
 173          const {
 174              getEmbedPreview,
 175              isRequestingEmbedPreview,
 176          } = select( 'core' );
 177  
 178          const preview = !! url && getEmbedPreview( url );
 179          const fetching = !! url && isRequestingEmbedPreview( url );
 180  
 181          return {
 182              preview: preview,
 183              fetching: fetching,
 184          };
 185      } ),
 186  ] )( EditEmbedActivity );
 187  
 188  export default editEmbedActivityBlock;