From 54affda5b212934e473abb35167260b794e3d505 Mon Sep 17 00:00:00 2001 From: Theofanis Despoudis <328805+theodesp@users.noreply.github.com> Date: Thu, 21 Sep 2023 09:57:19 +0100 Subject: [PATCH] Feat: Adds mediaDetails field in CoreImage block. (#151) * Feat: Add medialDetails field in CoreImage block. * Chore: Changeset * Test: Added unit tests for mediaDetails field. * Update tests/unit/blocks/CoreImageTest.php Co-authored-by: John Parris * Update CoreImageTest.php --------- Co-authored-by: John Parris --- .changeset/fifty-emus-mate.md | 27 ++++++++++++++++++++ includes/Blocks/Block.php | 1 - includes/Blocks/CoreImage.php | 38 ++++++++++++++++++++++++++++ tests/_data/images/test-image.jpg | Bin 0 -> 2028 bytes tests/bootstrap.php | 2 ++ tests/unit/blocks/CoreImageTest.php | 38 +++++++++++++++++++++++++++- 6 files changed, 104 insertions(+), 2 deletions(-) create mode 100644 .changeset/fifty-emus-mate.md create mode 100644 tests/_data/images/test-image.jpg diff --git a/.changeset/fifty-emus-mate.md b/.changeset/fifty-emus-mate.md new file mode 100644 index 00000000..64070fe9 --- /dev/null +++ b/.changeset/fifty-emus-mate.md @@ -0,0 +1,27 @@ +--- +"@wpengine/wp-graphql-content-blocks": patch +--- + +Adds mediaDetails field in CoreImage block: + +```graphql +{ + posts { + nodes { + editorBlocks { + ... on CoreImage { + mediaDetails { + file + sizes { + name + fileSize + height + width + } + } + } + } + } + } +} +``` diff --git a/includes/Blocks/Block.php b/includes/Blocks/Block.php index e25e519f..a0b4436c 100644 --- a/includes/Blocks/Block.php +++ b/includes/Blocks/Block.php @@ -12,7 +12,6 @@ use WPGraphQL\ContentBlocks\Utilities\DOMHelpers; use WPGraphQL\ContentBlocks\Utilities\WPGraphQLHelpers; use WPGraphQL\ContentBlocks\Type\Scalar\Scalar; -use WPGraphQL\ContentBlocks\Field\BlockSupports\Anchor; use WPGraphQL\Utils\Utils; /** diff --git a/includes/Blocks/CoreImage.php b/includes/Blocks/CoreImage.php index 04c208fb..fca9d887 100644 --- a/includes/Blocks/CoreImage.php +++ b/includes/Blocks/CoreImage.php @@ -7,6 +7,9 @@ namespace WPGraphQL\ContentBlocks\Blocks; +use WP_Block_Type; +use WPGraphQL\ContentBlocks\Registry\Registry; + /** * Class CoreImage */ @@ -31,4 +34,39 @@ class CoreImage extends Block { ), 'width' => array( 'type' => 'string' ), ); + + /** + * Block constructor. + * + * @param \WP_Block_Type $block The Block Type. + * @param \WPGraphQL\ContentBlocks\Registry\Registry $block_registry The instance of the WPGraphQL block registry. + */ + public function __construct( WP_Block_Type $block, Registry $block_registry ) { + parent::__construct( $block, $block_registry ); + register_graphql_field( + $this->type_name, + 'mediaDetails', + array( + 'type' => 'MediaDetails', + 'description' => sprintf( + // translators: %s is the block type name. + __( 'Media Details of the %s Block Type', 'wp-graphql-content-blocks' ), + $this->type_name + ), + 'resolve' => function ( $block ) { + $attrs = $block['attrs']; + $id = $attrs['id'] ?? null; + if ( $id ) { + $media_details = wp_get_attachment_metadata( $id ); + if ( ! empty( $media_details ) ) { + $media_details['ID'] = $id; + + return $media_details; + } + } + return null; + }, + ) + ); + } } diff --git a/tests/_data/images/test-image.jpg b/tests/_data/images/test-image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..534aac1d6bf494f7e83c96b32cfe29271e8aac5a GIT binary patch literal 2028 zcmbu9dr(t%7RP@#A%s9M1_M#3O~Dt1TBd+Rgp##vMX-pVB9KCg6dQ;vBM%J{Kmmyu zlp-oER04)V-4!WI0zQD41VL?4UdqEok{}O7I7=&|K(rj7AT%0fhQ?sb zjDvu(jPHRN5o6={$yW0fp|Mz}LnQa(CDj&dK5LZNhV{a0J@%*M;wP>w&H zn4Fq^_FVOP?#;Y<0r_pw#03HL(#ZZRmvIOX%FGOHhBa|Ps3RtDq8Y~V6LXubq1f0% zE1cYqTaZ30scw|u)_8=$w)<0hE$!BND%Pn?Xm82>H?Z9Qi);z(53Uh_M?=Qtp^1P7 z^m=Ddg*xUEF*fx4@ZHSXCnJe=DZag3N8(bgM}=qUA?rlawXkoAha?sMXwEsMH-uEO zIg)q|(2ZG^z?e+9Pe5D)UY2EQaM_Za)qdVc_^NaoZ{g@BzVyNHxXkPD*ob}0DKXQH zM{Y#cD8kEXrWG;KDOuExEy8Tqfizw^m0XT3m_NZ=R&|Up`B;xv7(nhZ7K7-woReh? z*_`M{^WN?2IB1oZNF`95ZYjL_aYYA}v8**md4Q`Fb0-RP?ITTW2c^2E-SJ`No2=$& zf92E0yCtz76rnZDrB8)2X{ii@)iwYtZ=RNH(-m>hvRgA<0#vbJ(l9 z>bHJ)hd_T%Z}G4vgJ<3bYov1wZCuZW$Mzvf84U>w_^(fSRuLxtp|=dJouR>78OUY> zP)xmSkk@-@cIqyQnaQ>dUBRp``Zi8z%zuBdcC{Sr<=O3SCqLq z-P&zW|0~5e1<$*7HD1eo)u&v~oXU-u*yeKUTkFKPOCjq7*}iOoIvT;Miq$-%I!nig z4M5J96_YtZsy%m9^#hBHd?CFpCfFl5GBSKB@=<&(f^!$qO zv_g*yyleoHL+vE33sSEMMW}k57{-p13yt*z4BG};5`m-*LrOJYKBHK-#{PsHQD*b% z5*hebQYF4rcJ%yIftDiA!Hq%+YpY#1sO9m^ZJe|8p(~eT6QS1&+V`k%oZfO)lcK-f ztM%8_h~*W0lpkT5-}pqJq?|70gd@?KaHiN+%c|CXTJe`GsxtdzCEft?lfSq&;JYa! zfu$H*iJZxF5Z>&+1Y;@%&Ga3tJMlmlV*q&};$#CrSPzi(Ps-p8om&Rg#kUP$h!@tM zZT-A)^vjHq3j#QGx2Sa>+nm++Vcf*#+3xCWm|qe*F3mWo`SuMK9*R{fhLC zH2G6E#Pz`oo{Dvw*2LA?3`%M5YpGYXA0v61-CAb`;@s7d1I^g5+E*iVc(;T?O0&u# za=Zu9X9-r1>9Z>$XY3ZaMcVipW*IrEEB^qJRLfla0he?2mpFh`2f_hLuEec~hWB+H z=MN7m39^vFG3?bBJI~9<>^L8&0t&RTu%1OB1TDUIBm6`?J7{57PxCa{&SttLD!u+z zmeZ@wB=<=x7BBLvBD9Y>AK_|fS`Wm3JUUZdty+*i;8M`@8=YpPF+M76XEK@1k}wE= z6E=_~Zrn-u)%AL$DYWm+e&4{=+Hz0(gDv~B!s(51EYjSsB|l?-+nytFpvkMnIOFz9 zDR2a3)r>u@!>8CLTUP0fss2j>~b=h(03{cN-c_1$N%Z5La;vo0Y! zI;s8swf|z}Ny>|h(z@NdXGN(=&e+9YI4(#NEFQ0u&EmBYh?|Na;oG*aMDE|uGyoi8 zykHB3o_sRfzr*W7%V1RWiyJ$|)uT_IwbaV?{w(ejt*pM5Ak>9RHNkCXtY&<^a{_Pd PO?Tnlf9gLS!7%(gr&MST literal 0 HcmV?d00001 diff --git a/tests/bootstrap.php b/tests/bootstrap.php index 908b4eaa..a302df94 100644 --- a/tests/bootstrap.php +++ b/tests/bootstrap.php @@ -8,6 +8,7 @@ $_tests_dir = getenv( 'WP_TESTS_DIR' ); define( 'WP_TEST_PLUGINS_DIR', '/var/www/html/wp-content/plugins' ); +define( 'WP_TEST_DATA_DIR', dirname( __FILE__ ) . '/_data' ); if ( ! $_tests_dir ) { $_tests_dir = rtrim( sys_get_temp_dir(), '/\\' ) . '/wordpress-tests-lib'; @@ -42,3 +43,4 @@ function _manually_load_plugin() { } require $_tests_dir . '/includes/bootstrap.php'; + diff --git a/tests/unit/blocks/CoreImageTest.php b/tests/unit/blocks/CoreImageTest.php index bee210d2..03c11e6c 100644 --- a/tests/unit/blocks/CoreImageTest.php +++ b/tests/unit/blocks/CoreImageTest.php @@ -5,10 +5,12 @@ final class CoreImageTest extends PluginTestCase { public $instance; public $post_id; + public $attachment_id; public function setUp(): void { parent::setUp(); global $wpdb; + $this->attachment_id = $this->factory->attachment->create_upload_object( WP_TEST_DATA_DIR . '/images/test-image.jpg' ); $this->post_id = wp_insert_post( array( @@ -18,7 +20,7 @@ public function setUp(): void { ' ', trim( ' - +
' @@ -35,6 +37,38 @@ public function tearDown(): void { wp_delete_post( $this->post_id, true ); } + public function test_retrieve_core_image_media_details() { + $query = ' + fragment CoreImageBlockFragment on CoreImage { + attributes { + id + } + mediaDetails { + height + width + } + } + + query GetPosts { + posts(first: 1) { + nodes { + editorBlocks { + ...CoreImageBlockFragment + } + } + } + } + '; + $actual = graphql( array( 'query' => $query ) ); + $node = $actual['data']['posts']['nodes'][0]; + + $this->assertEquals( $node['editorBlocks'][0]['mediaDetails'], [ + "width" => 50, + "height" => 50, + ]); + } + + public function test_retrieve_core_image_attributes() { $query = ' fragment CoreColumnBlockFragment on CoreColumn { @@ -45,6 +79,7 @@ public function test_retrieve_core_image_attributes() { fragment CoreImageBlockFragment on CoreImage { attributes { + id width height alt @@ -86,6 +121,7 @@ public function test_retrieve_core_image_attributes() { "width" => "500", "height" => 500.0, "alt" => "", + "id" => $this->attachment_id, "src" => "http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg", "style" => NULL, "sizeSlug" => "full",