amp-flickity-converter.php

<?php
/**
 * AMP Flickity Converter plugin initialization file.
 *
 * @package   AMP_Flickity_Converter
 * @author    Weston Ruter, Google
 * @link      https://gist.github.com/westonruter/8db0c662b68bba2e1bb980d41cf81636
 * @license   GPL-2.0-or-later
 * @copyright 2020 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: AMP Flickity Converter
 * Plugin URI: https://gist.github.com/westonruter/8db0c662b68bba2e1bb980d41cf81636
 * Description: Automatically convert markup intended for Flickity to amp-carousel.
 * Version: 0.1
 * Author: Weston Ruter, Google
 * Author URI: https://weston.ruter.net/
 * License: GNU General Public License v2 (or later)
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Gist Plugin URI: https://gist.github.com/westonruter/8db0c662b68bba2e1bb980d41cf81636
 */

namespace AMP_Flickity_Converter;

add_filter(
	'amp_content_sanitizers',
	function ( $sanitizers ) {
		require_once __DIR__ . '/class-sanitizer.php';

		// Merge so it runs before the image sanitizer.
		return array_merge(
			[ __NAMESPACE__ . '\Sanitizer' => [] ],
			$sanitizers
		);
	}
);

class-sanitizer.php

<?php
/**
 * AMP Flickity Converter plugin initialization file.
 *
 * @package AMP_Flickity_Converter
 */

namespace AMP_Flickity_Converter;

use AMP_Base_Sanitizer;
use DOMElement;

/**
 * Sanitizer that converts Flickity to amp-carousel.
 */
class Sanitizer extends AMP_Base_Sanitizer {

	/**
	 * Sanitize.
	 */
	public function sanitize() {
		foreach ( $this->dom->xpath->query( '//div[ @data-flickity ]' ) as $element ) {
			$this->convert_element( $element );
		}
	}

	/**
	 * Convert element.
	 *
	 * @param DOMElement $element Element.
	 */
	public function convert_element( DOMElement $element ) {
		$config = json_decode( $element->getAttribute( 'data-flickity' ), true );
		$height = 400;
		if ( preg_match( '/height:(\d+)px/', $element->getAttribute( 'style' ), $matches ) ) {
			$height = (int) $matches[1];
		}

		// Code specific to CoBlocks Carousel Gallery.
		$has_lightbox = false !== strpos( $element->parentNode->getAttribute( 'class' ), 'has-lightbox' );

		$amp_carousel = $this->dom->createElement( 'amp-carousel' );
		$amp_carousel->setAttribute( 'layout', 'fixed-height' );
		$amp_carousel->setAttribute( 'height', (string) $height );

		// @todo More of the $config should be copied.
		$amp_carousel->setAttribute( 'loop', '' );
		if ( ! empty( $config['autoPlay'] ) ) {
			$amp_carousel->setAttribute( 'autoplay', '' );
			$amp_carousel->setAttribute( 'delay', (string) $config['autoPlay'] );
		}

		// @todo Are all of these appropriate?
		$amp_carousel->setAttribute( 'class', $element->getAttribute( 'class' ) );

		$items = $this->dom->xpath->query( './div[ contains( @class, "coblocks-gallery--item" ) ]', $element );

		/**
		 * Item.
		 *
		 * @var DOMElement $item
		 */
		foreach ( $items as $item ) {
			$item->setAttribute( 'style', "height:{$height}px" );
			$img = $item->getElementsByTagName( 'img' )->item( 0 );
			if ( $img ) {
				$img->setAttribute( 'layout', 'fill' );
				$img->setAttribute( 'object-fit', 'cover' );

				if ( $has_lightbox ) {
					$img->setAttribute( 'lightbox', '' );
				}
			}
			$amp_carousel->appendChild( $item );
		}

		$element->parentNode->replaceChild( $amp_carousel, $element );
	}
}

Installation instructions: https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c