Merge pull request #1733 from INN/1683-output-largo-speicifc-photo-cr…

…edit-metadata-on-image-block

Output largo specific photo credit metadata on image block

changelog.md

@@ -26,6 +26,7 @@ though this project doesn't succeed in adhering to [Semantic Versioning](https:/
 - Added `font-display: block` to `fontello` font family. [Pull request #1742](https://github.com/INN/largo/pull/1742) for [issue #1686](https://github.com/INN/largo/issues/1686).
 - Replaced image settings in the Largo Series Posts widget to mirror the image settings in the Largo Recent Posts widget. [Pull request #1734](https://github.com/INN/largo/pull/1734) for [issue #1727](https://github.com/INN/largo/issues/1727).
 - Adds a temporary shim to fix left/right aligned images not being correctly aligned with paragraphs. [Pull request #1747](https://github.com/INN/largo/pull/1747) for [issue #1731](https://github.com/INN/largo/issues/1731).
+- Fixed an issue where the Largo specific media credit caption and url was not being output in Gutenberg image blocks. [Pull request #1733](https://github.com/INN/largo/pull/1733/) for [issue #1683](https://github.com/INN/largo/issues/1683).
 
 ## [Largo 0.6.3](https://github.com/INN/largo/compare/v0.6.2...v0.6.3)
 

functions.php

@@ -181,7 +181,8 @@ private function require_files() {
 			'/inc/featured-media.php',
 			'/inc/deprecated.php',
 			'/inc/pagination.php',
-			'/inc/conditionals.php'
+			'/inc/conditionals.php',
+			'/inc/gutenberg-block-edits.php',
 		);
 
 		if ( $this->is_less_enabled() ) {
@@ -490,4 +491,4 @@ function theme_gallery_defaults( $settings ) {
 	$settings['galleryDefaults']['columns'] = 0;
 	return $settings;
 }
-add_filter( 'media_view_settings', 'theme_gallery_defaults' );
+add_filter( 'media_view_settings', 'theme_gallery_defaults' );

inc/gutenberg-block-edits.php

@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * Enqueue scripts to extend default block editor.
+ */
+function largo_extend_block_editor() {
+
+    wp_enqueue_script(
+        'blocks-image-customizations',
+		get_template_directory_uri() . '/js/blocks-image-customization.js',
+        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-api' ),
+        '1.0.0',
+        true
+    );
+
+}
+add_action( 'enqueue_block_editor_assets', 'largo_extend_block_editor' );

js/blocks-image-customization.js

@@ -0,0 +1,72 @@
+const { createHigherOrderComponent } = wp.compose;
+
+var largo_core_image_block_add_media_credit = createHigherOrderComponent( function ( BlockListBlock ) {
+
+  return function ( props ) {
+
+    if( props.name === 'core/image' ){
+
+        var attachment_id = props.attributes.id;
+        var media = new wp.api.models.Media( { id: attachment_id } );
+
+        var media_response = media.fetch().then( function( media ) {
+
+            // the original instance of the media caption
+            var attachment_caption = props.attributes.caption;
+
+            if( media.media_credit && ( media.media_credit._media_credit || media.media_credit._navis_media_credit_org ) ){
+
+                // if both the credit and organization are present
+                if( media.media_credit._media_credit && media.media_credit._navis_media_credit_org ){
+
+                    var media_credit = media.media_credit._media_credit+' / '+media.media_credit._navis_media_credit_org;
+
+                // if only the credit is present
+                } else if( media.media_credit._media_credit ){
+
+                    var media_credit = media.media_credit._media_credit;
+
+                // if only the org is present
+                } else if( media.media_credit._navis_media_credit_org ){
+
+                    var media_credit = media.media_credit._navis_media_credit_org;
+
+                }
+
+                // if the media credit url exists, wrap the media credit with it
+                if( media.media_credit._media_credit_url ){
+
+                    var media_credit = '<a href="'+media.media_credit._media_credit_url+'">'+media_credit+'</a>';
+
+                }
+
+                // our full media credit
+                var media_credit = '<p class="wp-media-credit">'+media_credit+'</p>';
+
+                // if our media attachment caption already includes `largo-attachment-media-credit`,
+                // which is the class of our span, don't do anything more
+                if( ! attachment_caption.includes( 'wp-media-credit' ) ){
+
+                    var attachment_caption = media_credit + attachment_caption;
+
+                    props.attributes.caption = attachment_caption;
+
+                }
+
+            }
+
+        });
+
+    }
+
+    return React.createElement( BlockListBlock, props );
+
+  };
+
+}, 'largo_core_image_block_add_media_credit');
+
+wp.hooks.addFilter( 
+    'editor.BlockEdit', 
+    'largo-core-block-customizations/editor/block-edit', 
+    largo_core_image_block_add_media_credit 
+);

lib/navis-media-credit/navis-media-credit.php

@@ -271,3 +271,47 @@ function update( $field, $value ) {
         return update_post_meta( $this->post_id, '_' . $field, $value );
     }
 }
+
+/**
+ * Register custom fields for the REST api
+ */
+function navis_register_custom_rest_fields() {
+
+	register_rest_field( 'attachment', 'media_credit', 
+		array(
+			'get_callback' => 'navis_display_media_credit_in_rest_api',
+			'schema' => null,
+		)
+	);
+
+}
+add_action( 'rest_api_init', 'navis_register_custom_rest_fields' );
+
+/**
+ * Configure data for custom fields to display in REST api
+ * 
+ * @param Array $object The post object
+ * @return Array $media_credit_meta the new object meta data
+ */
+function navis_display_media_credit_in_rest_api( $object ) {
+
+    $post_id = $object[ 'id' ];
+
+	$meta = get_post_meta( $post_id );
+
+    $meta_fields = [ '_media_credit', '_media_credit_url', '_navis_media_credit_org', '_navis_media_can_distribute' ];
+
+    foreach( $meta_fields as $meta_field ){
+
+        if ( isset( $meta[ $meta_field ] ) && isset( $meta[ $meta_field ][0] ) ) {
+
+            //return the post meta
+            $media_credit_meta[ $meta_field ] = $meta[ $meta_field ][0];
+
+        }
+
+    }
+
+    return $media_credit_meta;
+
+}