index.php
139 lines
| 1 | <?php |
| 2 | |
| 3 | namespace Kubio\Blocks; |
| 4 | |
| 5 | use Kubio\Core\Blocks\BlockBase; |
| 6 | use Kubio\Core\LodashBasic; |
| 7 | use Kubio\Core\Registry; |
| 8 | use Kubio\Core\Styles\FlexAlign; |
| 9 | use Kubio\Core\Utils; |
| 10 | |
| 11 | class PostFeaturedImageBlock extends Blockbase { |
| 12 | |
| 13 | |
| 14 | const IMAGE = 'image'; |
| 15 | const CONTAINER = 'container'; |
| 16 | const INNER = 'inner'; |
| 17 | const ALIGN = 'align'; |
| 18 | |
| 19 | public function computed() { |
| 20 | return array( |
| 21 | 'showImage' => $this->shouldRenderImage(), |
| 22 | ); |
| 23 | } |
| 24 | |
| 25 | public function getFeaturedImageUrl() { |
| 26 | if ( ! ( $post_ID = LodashBasic::get( $this->block_context, 'postId' ) ) ) { |
| 27 | return null; |
| 28 | } |
| 29 | |
| 30 | $url = get_the_post_thumbnail_url( $post_ID ); |
| 31 | $url = apply_filters( 'kubio/post-featured-image-url', $url ); |
| 32 | return $url; |
| 33 | } |
| 34 | |
| 35 | public function getFeaturedImageId() { |
| 36 | if ( ! ( $post_ID = LodashBasic::get( $this->block_context, 'postId' ) ) ) { |
| 37 | return null; |
| 38 | } |
| 39 | |
| 40 | $id = get_post_thumbnail_id( $post_ID ); |
| 41 | $id = apply_filters( 'kubio/post-featured-image-id', $id ); |
| 42 | return $id; |
| 43 | } |
| 44 | |
| 45 | public function shouldRenderImage() { |
| 46 | $featuredImageUrl = $this->getFeaturedImageUrl(); |
| 47 | $showPlaceholder = $this->getAttribute( 'showPlaceholder' ); |
| 48 | return $featuredImageUrl || ( ! $featuredImageUrl && ! $showPlaceholder ); |
| 49 | } |
| 50 | |
| 51 | public function getImageUrl() { |
| 52 | |
| 53 | $featuredImage = $this->getFeaturedImageUrl(); |
| 54 | if ( $featuredImage ) { |
| 55 | return $featuredImage; |
| 56 | } else { |
| 57 | return null; |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | public function mapPropsToElements() { |
| 62 | $imageSize = $this->getStyle( |
| 63 | 'object.fit', |
| 64 | null, |
| 65 | array( |
| 66 | 'styledComponent' => 'image', |
| 67 | ) |
| 68 | ); |
| 69 | $isNaturalSize = $imageSize === 'fill'; |
| 70 | $containerClasses = array(); |
| 71 | if ( $isNaturalSize ) { |
| 72 | $containerClasses[] = 'kubio-post-featured-image--natural-size'; |
| 73 | } |
| 74 | if ( $this->shouldRenderImage() ) { |
| 75 | $containerClasses[] = 'kubio-post-featured-image--has-image'; |
| 76 | } |
| 77 | $imageUrl = $this->getImageUrl(); |
| 78 | $linkData = $this->getLinkData(); |
| 79 | |
| 80 | $imageClasses = array(); |
| 81 | //only hide image in frontend. Show placeholder in editor |
| 82 | $imageAttributes = array(); |
| 83 | if ( ! $imageUrl ) { |
| 84 | $containerClasses[] = 'kubio-post-featured-image--image-missing'; |
| 85 | } else { |
| 86 | |
| 87 | //when it shows image |
| 88 | $imageId = $this->getFeaturedImageId(); |
| 89 | $imageClasses = array( 'wp-image-' . $imageId ); |
| 90 | $alt = trim( wp_strip_all_tags( get_post_meta( $imageId, '_wp_attachment_image_alt', true ) ) ); |
| 91 | if ( ! ! $alt ) { |
| 92 | $imageAttributes['alt'] = $alt; |
| 93 | } |
| 94 | $imageAttributes['className'] = $imageClasses; |
| 95 | } |
| 96 | |
| 97 | $verticalAlignByMedia = $this->getPropByMedia( 'verticalAlign' ); |
| 98 | $alignClasses = FlexAlign::getVAlignClasses( $verticalAlignByMedia, array( 'self' => true ) ); |
| 99 | $aspectRatioClass = $this->getAspectRatioClass( $this->getProp( 'aspectRatio' ) ); |
| 100 | $containerClasses[] = $aspectRatioClass; |
| 101 | return array( |
| 102 | self::CONTAINER => array_merge( |
| 103 | array( 'className' => $containerClasses ), |
| 104 | $linkData |
| 105 | ), |
| 106 | self::IMAGE => array_merge( |
| 107 | array( |
| 108 | 'src' => $imageUrl ? esc_url( $imageUrl ) : $imageUrl, |
| 109 | ), |
| 110 | $imageAttributes |
| 111 | ), |
| 112 | self::ALIGN => array( |
| 113 | 'className' => $alignClasses, |
| 114 | ), |
| 115 | ); |
| 116 | } |
| 117 | |
| 118 | public function getLinkData() { |
| 119 | if ( ! $this->getAttribute( 'addLink' ) ) { |
| 120 | return array(); |
| 121 | } |
| 122 | $postId = LodashBasic::get( $this->block_context, 'postId' ); |
| 123 | $postLink = get_permalink( $postId ); |
| 124 | $link = array( |
| 125 | 'value' => $postLink, |
| 126 | ); |
| 127 | $linkAttributes = Utils::getLinkAttributes( $link ); |
| 128 | $scriptData = Utils::useJSComponentProps( 'link', $linkAttributes ); |
| 129 | |
| 130 | return $scriptData; |
| 131 | } |
| 132 | |
| 133 | public function getAspectRatioClass( $aspectRatioValue ) { |
| 134 | return sprintf( 'h-aspect-ratio--%s', $aspectRatioValue ); |
| 135 | } |
| 136 | } |
| 137 | |
| 138 | Registry::registerBlock( __DIR__, PostFeaturedImageBlock::class ); |
| 139 |