index.php
88 lines
| 1 | <?php |
| 2 | |
| 3 | namespace Kubio\Blocks; |
| 4 | |
| 5 | use Kubio\AssetsDependencyInjector; |
| 6 | use Kubio\Core\Blocks\BlockContainerBase; |
| 7 | use Kubio\Core\Registry; |
| 8 | use Kubio\Core\Utils; |
| 9 | |
| 10 | class ImageBlock extends BlockContainerBase { |
| 11 | |
| 12 | const OUTER = 'outer'; |
| 13 | const IMAGE = 'image'; |
| 14 | const OVERLAY = 'overlay'; |
| 15 | const CAPTION = 'caption'; |
| 16 | const FRAME_IMAGE = 'frameImage'; |
| 17 | const FRAME_CONTAINER = 'frameContainer'; |
| 18 | |
| 19 | |
| 20 | public function computed() { |
| 21 | $show_caption = $this->getAttribute( 'captionEnabled', false ); |
| 22 | $show_overlay = $this->getStyle( 'background.overlay.enabled', false, array( 'styledComponent' => 'overlay' ) ); |
| 23 | $show_frame_image = $this->getPropByMedia( 'frame.enabled', false ); |
| 24 | return array( |
| 25 | 'showCaption' => $show_caption, |
| 26 | 'showOverlay' => $show_overlay, |
| 27 | 'showFrameImage' => in_array( true, $show_frame_image ), |
| 28 | ); |
| 29 | } |
| 30 | |
| 31 | public function mapPropsToElements() { |
| 32 | $frame_hide_classes = Utils::mapHideClassesByMedia( |
| 33 | $this->getPropByMedia( 'frame.enabled' ), |
| 34 | true |
| 35 | ); |
| 36 | |
| 37 | $map = array(); |
| 38 | |
| 39 | $id = \kubio_wpml_get_translated_media_id( ( $this->getAttribute( 'id' ) ) ); |
| 40 | $size_slug = $this->getAttribute( 'sizeSlug' ); |
| 41 | $align = $this->getAttribute( 'align', 'center' ); |
| 42 | |
| 43 | //the wp image class is used to add the src set by WordPress |
| 44 | $image_classes = array( 'wp-image-' . $this->getAttribute( 'id' ) ); |
| 45 | $default_img = Utils::getDefaultAssetsURL( 'default-image.png' ); |
| 46 | $src = null; |
| 47 | if ( $id ) { |
| 48 | $src = wp_get_attachment_image_url( $id, $size_slug ); |
| 49 | } |
| 50 | if ( ! $src ) { |
| 51 | $src = $this->getAttribute( 'url' ); |
| 52 | } |
| 53 | if ( ! $src ) { |
| 54 | $src = $default_img; |
| 55 | } |
| 56 | $outer_classes = array( "size-$size_slug", $this->getAlignClasses( $align ) ); |
| 57 | |
| 58 | $map[ self::OUTER ] = array( 'className' => $outer_classes ); |
| 59 | $map[ self::IMAGE ] = array( |
| 60 | 'alt' => esc_attr( $this->getAttribute( 'alt', '' ) ), |
| 61 | 'src' => esc_attr( $src ), |
| 62 | 'className' => $image_classes, |
| 63 | ); |
| 64 | $map[ self::FRAME_IMAGE ] = array( |
| 65 | 'className' => array_merge( |
| 66 | $frame_hide_classes |
| 67 | ), |
| 68 | ); |
| 69 | $map[ self::CAPTION ] = array( 'innerHTML' => wp_kses_post( $this->getBlockInnerHtml() ) ); |
| 70 | |
| 71 | $type = $this->getAttribute( 'link.typeOpenLink' ); |
| 72 | |
| 73 | if ( $type === 'lightbox' ) { |
| 74 | AssetsDependencyInjector::injectKubioFrontendStyleDependencies( 'fancybox' ); |
| 75 | AssetsDependencyInjector::injectKubioScriptDependencies( 'fancybox' ); |
| 76 | |
| 77 | } |
| 78 | |
| 79 | return $map; |
| 80 | } |
| 81 | |
| 82 | |
| 83 | public function getAlignClasses( $align ) { |
| 84 | return sprintf( 'align-items-%s', $align ? $align : 'center' ); |
| 85 | } |
| 86 | } |
| 87 | Registry::registerBlock( __DIR__, ImageBlock::class ); |
| 88 |