Last active
September 2, 2024 22:33
-
-
Save algmelo/a84d0ae9d4ad80644f5edec72b21a3d0 to your computer and use it in GitHub Desktop.
Adiciona custom field ao attachment do wordpress
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ----------------------------------- functions.php ----------------------------------- | |
| /** | |
| * Add Attachment Credit | |
| */ | |
| function CustomAttachmentFields( $form_fields, $post ) { | |
| $form_fields['custom_credit'] = array( | |
| 'label' => __('Image credit', BOOTSTRAPTHEME_TEXTDOMAIN), | |
| 'input' => 'text', | |
| 'value' => get_post_meta( $post->ID, 'custom_credit', true ), | |
| 'helps' => __('If provided, photo credit will be displayed', BOOTSTRAPTHEME_TEXTDOMAIN), | |
| ); | |
| return $form_fields; | |
| } | |
| add_filter( 'attachment_fields_to_edit', 'CustomAttachmentFields', 10, 2 ); | |
| /** | |
| * Save values of fields in media uploader | |
| * | |
| * @param $post array, the post data for database | |
| * @param $attachment array, attachment fields from $_POST form | |
| * @return $post array, modified post data | |
| */ | |
| function CustomAttachmentFieldsSave( $post, $attachment ) { | |
| if( isset( $attachment['custom_credit'] ) ) | |
| update_post_meta( $post['ID'], 'custom_credit', $attachment['custom_credit'] ); | |
| return $post; | |
| } | |
| add_filter( 'attachment_fields_to_save', 'CustomAttachmentFieldsSave', 10, 2 ); | |
| /** | |
| * Return custom caption attachment field | |
| */ | |
| function load_custom_caption($media_id) { | |
| $attachment_id = isset($_POST['attachment_id']) ? intval($_POST['attachment_id']) : $media_id; | |
| if ($attachment_id) { | |
| $custom_caption = get_post_meta($attachment_id, 'custom_credit', true); | |
| echo sprintf('<span class="custom-credit">%s %s</span>', __('Credit:', BOOTSTRAPTHEME_TEXTDOMAIN), esc_html($custom_caption)); | |
| } | |
| wp_die(); | |
| } | |
| /** | |
| * Custom Gutenberg Assets | |
| */ | |
| function CustomGutenbergAssets() { | |
| wp_enqueue_script( | |
| 'custom-gutenberg-script', | |
| BOOTSTRAPTHEME_URL . '/assets/js/blocks/block-image.js', | |
| array('wp-blocks', 'wp-element', 'wp-editor', 'wp-data', 'wp-components'), | |
| md5(filemtime(BOOTSTRAPTHEME_PATH . '/assets/js/blocks/block-image.js')), | |
| true | |
| ); | |
| } | |
| add_action("enqueue_block_editor_assets", "CustomGutenbergAssets"); | |
| ----------------------------- arquivo block-image.js ----------------------------------- | |
| const { createElement, Fragment } = wp.element; | |
| const { InspectorControls, MediaPlaceholder } = wp.blockEditor; | |
| const { PanelBody, TextControl } = wp.components; | |
| wp.blocks.registerBlockVariation('core/image', { | |
| name: 'custom-image-with-credit', | |
| title: 'Imagem com Créditos', | |
| edit: function (props) { | |
| const { attributes, setAttributes } = props; | |
| const { customCredit, url, alt, caption } = attributes; | |
| // Função personalizada para carregar o campo custom_caption | |
| function loadCustomCaption(mediaId) { | |
| // A função deve estar definida globalmente e aceitar um ID de mídia | |
| if (typeof load_custom_caption === 'function') { | |
| console.log('mediaId', mediaId); | |
| return load_custom_caption(mediaId); // Chama a função personalizada | |
| } | |
| return ''; | |
| } | |
| return createElement(Fragment, {}, | |
| createElement(InspectorControls, {}, | |
| createElement(PanelBody, { title: 'Créditos da Imagem' }, | |
| createElement(TextControl, { | |
| label: "Créditos", | |
| value: customCredit || '', | |
| onChange: function (newCredit) { | |
| setAttributes({ customCredit: newCredit }); | |
| } | |
| }) | |
| ) | |
| ), | |
| createElement(MediaPlaceholder, { | |
| icon: "format-image", | |
| onSelect: function (media) { | |
| const customCreditMeta = media.meta && media.meta.custom_credit ? media.meta.custom_credit : ''; | |
| const customCaption = loadCustomCaption(media.id); // Usa a função personalizada para obter a legenda | |
| console.log('select'); | |
| setAttributes({ | |
| url: media.url, | |
| alt: media.alt, | |
| caption: customCaption || '', | |
| customCredit: customCreditMeta | |
| }); | |
| }, | |
| allowedTypes: ['image'], | |
| labels: { title: 'Selecione uma Imagem' } | |
| }), | |
| url && createElement('figure', {}, | |
| createElement('img', { src: url, alt: alt || '' }), | |
| createElement('figcaption', {}, | |
| caption, | |
| customCredit && createElement('p', {}, 'Créditos: ' + customCredit) | |
| ) | |
| ) | |
| ); | |
| }, | |
| save: function (props) { | |
| const { attributes } = props; | |
| const { url, alt, caption, customCredit } = attributes; | |
| return createElement('figure', {}, | |
| createElement('img', { src: url, alt: alt || '' }), | |
| createElement('figcaption', {}, | |
| caption, | |
| customCredit && createElement('p', {}, 'Créditos: ' + customCredit) | |
| ) | |
| ); | |
| } | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment