如何在编辑器外使用MediaUpload

Question

我试图创建一个界面，允许用户管理存储在与他们相关的帖子中的数据，而不允许他们实际访问存储数据的自定义post类型。

其他一切都很好，但我想为他们添加一种方式，从这个页面上传个人资料图片，这是一个反应应用程序。所有其他元素都加载得很好，比如TextControl和SelectControl等等。然而，我很难让MediaUpload在块编辑器之外激活。

有什么办法我可以做它，以便我可以使用它在我的反应应用程序，以便他们可以上传配置文件图片？

以下是一些代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import ReactPhoneInput from 'react-phone-input-2'

let { Button, SelectControl, TextControl, ToggleControl } = window.wp.components
let { MediaUpload, RichText } = window.wp.editor

class ClassmateProfile extends Component {
  constructor (props) {
    super(props)
    this.state = {
      pageID: USNA1978.pageID,
      aboutDetails: USNA1978.aboutDetails,
      aboutImage1: USNA1978.aboutImage1,
      aboutImage2: USNA1978.aboutImage2,
      firstName: USNA1978.firstName,
      middleName: USNA1978.middleName,
      lastName: USNA1978.lastName,
      //...
    }
  }

  render () {
    if (this.state.pageID) {
      return (
        
          
            
              
                About
              
              
                
                  
                    {(() => {
                      if (this.state.aboutImage1) {
                        return 
                      } else {
                        return Graduation Photo
                      }
                    })()}
                  
                  
                    {(() => {
                      if (this.state.aboutImage2) {
                        return 
                      } else {
                        return Graduation Photo
                      }
                    })()}
                     this.setState({ aboutImage2: media.url })}
                      render={({ open }) => (
                        
                          {!this.state.aboutImage2 ? 'Upload/Select Photo' : 'Change Photo'}
                        
                      )}
                    />
                  
                
                 this.setState({ aboutDetails: value })}
                  placeholder='Click here to add details about this classmate...'
                />
              
            
            
          

          
            
              
                Contact Info
              
              
                
                  
                    Name & Company
                  
                  
                    
                      First Name
                    
                    
                       this.setState({ firstName: value })}
                      />
                    
                  
                  
                    
                      Middle Name
                    
                    
                       this.setState({ middleName: value })}
                      />
                    
                  
                  
                    
                      Last Name
                    
                    
                       this.setState({ lastName: value })}
                      />
                    
                  
                  
                
              
            
          
        
      )
    }
  }
}

if (document.getElementById('edit_classmate_profile')) {
  ReactDOM.render(, document.getElementById('edit_classmate_profile'))
}

Answer 1

答案实际上是几个步骤，这些步骤让我进行了大量的实验，但最终需要使用webpack之类的代码来编译这些代码，并提取出库等等：

// MediaUploadFilter.js
import { MediaUpload } from '@wordpress/media-utils'
 
const { addFilter } = window.wp.hooks
const replaceMediaUpload = () => MediaUpload

addFilter(
  'editor.MediaUpload',
  'core/edit-post/components/media-upload/replace-media-upload',
  replaceMediaUpload
)

从本质上讲，我已经为您简化的这个类是在init钩子过程中调用的：

displayHandler, 'displayPage'], // a function loading a view
        'dashicons-admin-users',
        21
    );

    add_action('admin_enqueue_scripts', static function ($hook) use ($pageMenuObject) {
       /**
         * Make sure that we load the scripts specific to the add to release page
         */
        if ($hook === $pageMenuObject) {
            $pageMenuData = ClassmateProfileData::getInstance(); // Grabs data for user
            $allPageData = [];
            if ($pageMenuData) {
                $allPageData = $pageMenuData->getPageData() ?: [];
            }

            static::enqueueLibraryAssets(); // See below abstract function I pasted below

            wp_enqueue_script(
                'plugin-classmate-profile',
                mix_plugin_uri('/assets/js/ClassmateProfile.js'),
                ['plugin-media-upload-filter', 'wp-editor', 'wp-block-editor'],
                PLUGIN_VERSION,
                true
            );
            wp_localize_script(
                'plugin-classmate-profile',
                'ClassmateProfileData',
                $allPageData
            );
        }
    });
}
// This is from the parent abstract class for the class I am calling it in
public static function enqueueLibraryAssets(): void
{
    wp_enqueue_style(
        'plugin-application',
        mix_plugin_uri('assets/css/app.css'),
        ['wp-edit-blocks'],
        PLUGIN_VERSION
    );
    wp_enqueue_media(); // MUST HAVE THIS! Loads the files you need...
    wp_enqueue_script(
        'plugin-library-manifest',
        mix_plugin_uri('assets/js/manifest.js'),
        ['lodash', 'react', 'react-dom', 'wp-components', 'wp-i18n', 'wp-element', 'wp-editor'],
        PLUGIN_VERSION,
        true
    );
    wp_enqueue_script(
        'plugin-library-vendor',
        mix_plugin_uri('assets/js/vendor.js'),
        ['plugin-library-manifest'],
        PLUGIN_VERSION,
        true
    );
    wp_enqueue_script(
        'plugin-media-upload-filter',
        mix_plugin_uri('assets/js/MediaUploadFilter.js'),
        ['plugin-library-manifest', 'plugin-library-vendor'],
        PLUGIN_VERSION,
        true
    );
}