diff --git a/extension.json b/extension.json
index 349d9bbd..5f3e1818 100644
--- a/extension.json
+++ b/extension.json
@@ -7,7 +7,7 @@
 	],
 	"url": "https://github.com/Universal-Omega/PortableInfobox",
 	"descriptionmsg": "portable-infobox-desc",
-	"version": "0.8",
+	"version": "1.0",
 	"type": "parserhook",
 	"license-name": "GPL-3.0-or-later",
 	"requires": {
@@ -15,7 +15,11 @@
 	},
 	"config": {
 		"AllInfoboxesExcludedSubpages": {
-			"value": [ "doc", "draft", "test" ]
+			"value": [
+				"doc",
+				"draft",
+				"test"
+			]
 		},
 		"PortableInfoboxCacheRenderers": {
 			"value": false
@@ -125,5 +129,6 @@
 	"APIListModules": {
 		"allinfoboxes": "PortableInfobox\\Controllers\\ApiQueryAllInfoboxes"
 	},
+	"ParsoidModules": [ "PortableInfobox\\Parsoid\\InfoboxTag" ],
 	"manifest_version": 2
-}
+}
\ No newline at end of file
diff --git a/includes/Parsoid/InfoboxTag.php b/includes/Parsoid/InfoboxTag.php
new file mode 100644
index 00000000..4888b87f
--- /dev/null
+++ b/includes/Parsoid/InfoboxTag.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use Wikimedia\Parsoid\DOM\Element;
+use Wikimedia\Parsoid\Ext\DOMUtils;
+use Wikimedia\Parsoid\Ext\ExtensionModule;
+use Wikimedia\Parsoid\Ext\ExtensionTagHandler;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+
+class InfoboxTag extends ExtensionTagHandler implements ExtensionModule {
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getConfig(): array
+	{
+		return [
+			'name' => 'PortableInfobox',
+			'tags' => [
+				[
+					'name' => 'infobox',
+					'handler' => self::class
+				]
+			],
+			'domProcessors' => [
+				'PortableInfobox\\Parsoid\\PortableInfoboxDOMProcessor'
+			]
+		];
+	}
+
+    /**
+     * @inheritDoc
+     */
+    public function sourceToDom( ParsoidExtensionAPI $api, string $src, array $args )
+	{
+		$domFragments = $api->extTagToDOM( $args, $src, [
+			'wrapperTag' => 'aside',
+			'parseOpts' => [
+				'extTag' => 'infobox',
+				'context' => 'inline'
+			]
+		]);
+	
+
+		// this is a bit messed up as these methods are deprecated, but the documentation
+		// for the replacement methods doesn't exist or make sense
+		// this is commented out at present, as these scripts and styles will be added
+		// by the legacy parser (might need it here to stick these in the parser cache also?)
+		$api->getMetadata()->addModules( [ 'ext.PortableInfobox.scripts' ] );
+		$api->getMetadata()->addModuleStyles( [ 'ext.PortableInfobox.styles' ] );
+
+		// return this back. At this point, we have constructed the outer tag (<aside class=...</aside>)
+		// and this function is done with its work. The rest of the work will happen in the DOMProcessor
+		return $domFragments;
+	}
+}
\ No newline at end of file
diff --git a/includes/Parsoid/ParsoidMediaWikiParser.php b/includes/Parsoid/ParsoidMediaWikiParser.php
new file mode 100644
index 00000000..aed30843
--- /dev/null
+++ b/includes/Parsoid/ParsoidMediaWikiParser.php
@@ -0,0 +1,117 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use MediaWiki\Title\Title;
+use PortableInfobox\Services\Parser\ExternalParser;
+use ReflectionClass;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+use Wikimedia\Parsoid\Fragments\WikitextPFragment;
+use Wikimedia\Parsoid\Utils\DOMCompat;
+
+class ParsoidMediaWikiParser implements ExternalParser {
+
+    public ParsoidExtensionAPI $api;
+
+    public function __construct(
+        ParsoidExtensionAPI $api
+    ) {
+        $this->api = $api;
+    }
+
+    public function parseRecursive( $wikitext ) 
+    {
+        if ( $wikitext === null ) {
+            return null; 
+        }
+
+        $paramParsed = $this->api->wikitextToDOM( $wikitext, [
+			// this differs from earlier as we need the frame to be able to grab the 
+            // params the user passed - parsoid handles this internally it appears
+            'processInNewFrame' => false,
+			'parseOpts' => [ 'context' => 'inline' ]
+		], true );
+
+        // we don't want Parsoid to wrap in a span or add a typeof here, 
+        // just interested in the content
+        return DOMCompat::getOuterHTML( $paramParsed );
+    }
+
+    public function replaceVariables( $wikitext ) {
+		// no-op - I think handled by ->wikiTextToDOM? 
+	}
+
+    public function addImage($title, array $sizeParams): ?string
+    {
+        // no-op at present. Used to extend the image tag with specific information for the PageImages extension. 
+        // that extension relies on Parser hooks and therefore is not safe to assume that will work indefinitely.
+        // could potentially just do it for now whilst the hooks still exist, and maybe remove at a later date if
+        // PageImages is not made Parsoid-compat. 
+        return '';
+    }
+
+    public function getParsoidExtensionApi(): ParsoidExtensionAPI {
+        return $this->api;
+    }
+
+    /**
+     * Extract the gallery and return the filename -> captions. PortableInfobox currently does this
+     * a lot cleaner as it piggybacks on onAfterParserFetchFileAndTitle hook to set the images into the data bag.
+     * This hook is NOT available on Parsoid, and we have no other way to get the resultant class which PortableInfobox
+     * currently relies on. So we need to fake it as best we can and hope WMF comes up with something later down
+     * the line.
+     * @param mixed $wikitext
+     * @return array an array of the images
+     */
+    public function extractGallery( string $wikitext ): array
+    {
+        if ( $wikitext === null ) {
+            return [];
+        }
+
+        // the legacy implementation reuturns an array where each element is an array of the caption
+        // and the title object for that specific image. We don't have access to this by default,
+        // since there is no concept of half parsing in Parsoid - we either ask Parsoid for the Parsed wt->html
+        // or we work with the WT and grab what we need.
+        $result = [];
+
+        // this is quicker than passing the wikitext to Parsoid and extracting
+        // the images etc from it. 
+        if ( preg_match( '/<gallery[^>]*>(.*?)<\/gallery>/s', $wikitext, $matches ) ) {
+            $galleryContent = trim( $matches[1] );
+
+            if ( empty( $galleryContent ) ) {
+                return [];
+            }
+
+            $lines = explode( "\n", $galleryContent );
+
+            foreach ( $lines as $line ) {
+                $line = trim( $line );
+
+                if ( empty( $line ) ) {
+                    continue;
+                }
+
+                $parts = explode( '|', $line, 2 );
+                $filename = trim( $parts[0] );
+                $caption = isset( $parts[1] ) ? trim( $parts[1] ) : '';
+
+                if ( empty( $filename ) ) {
+                    continue;
+                }
+
+                $title = Title::newFromText( $filename, NS_FILE );
+
+                if ( $title !== null ) {
+                    $result[] = [
+                        'label' => $caption,
+                        'title' => $title
+                    ];
+                }
+            }
+        }
+
+        return $result;
+    }
+}
\ No newline at end of file
diff --git a/includes/Parsoid/ParsoidPortableInfoboxRenderService.php b/includes/Parsoid/ParsoidPortableInfoboxRenderService.php
new file mode 100644
index 00000000..39f546b9
--- /dev/null
+++ b/includes/Parsoid/ParsoidPortableInfoboxRenderService.php
@@ -0,0 +1,210 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use DOMDocument;
+use PortableInfobox\Services\AbstractPortableInfoboxRenderService;
+use PortableInfobox\Services\Helpers\InfoboxParamsValidator;
+use PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine;
+use PortableInfobox\Services\Parser\Nodes\NodeFactory;
+use Wikimedia\Parsoid\Core\Sanitizer;
+use Wikimedia\Parsoid\DOM\Document;
+use Wikimedia\Parsoid\DOM\Element;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+use Wikimedia\Parsoid\Utils\DOMCompat;
+
+class ParsoidPortableInfoboxRenderService extends AbstractPortableInfoboxRenderService {
+
+    public const PARSER_TAG_VERSION = 2;
+	public const DEFAULT_THEME_NAME = 'default';
+	public const INFOBOX_THEME_PREFIX = 'pi-theme-';
+
+	private const DEFAULT_LAYOUT_NAME = 'default';
+	private const INFOBOX_LAYOUT_PREFIX = 'pi-layout-';
+	private const INFOBOX_TYPE_PREFIX = 'pi-type-';
+	private const ACCENT_COLOR = 'accent-color';
+	private const ACCENT_COLOR_TEXT = 'accent-color-text';
+	private const ERR_UNIMPLEMENTEDNODE = 'portable-infobox-unimplemented-infobox-tag';
+	private const ERR_UNSUPPORTEDATTR = 'portable-infobox-xml-parse-error-infobox-tag-attribute-unsupported';
+
+	private ?InfoboxParamsValidator $infoboxParamsValidator = null;
+
+    private array $paramMap = [];
+
+    /**
+     * Build a parameter map of field -> value for display
+     * @param array $params
+     * @return void
+     */
+    private function buildParamMap( array $params ): void {
+		// loop over all of the parameters we received and if they have both a value
+		// and a name, then add them to the array - if they do not have a "valueWt" value, then the value was 
+		// empty and therefore we should not render this part of the infobox
+		// At this point, we have what we pretty much have what we pass to the legacy function on line
+		// 104 of PortableInfoboxParserTagController::class
+		foreach ( $params as $param ) {
+			if ( isset( $param->k ) && isset( $param->valueWt ) ) {
+				$this->paramMap[ $param->k ] = $param->valueWt;
+			}
+		}
+	}
+
+    /**
+     * This function is responsible for rendering the actual infobox to the DOM
+     * This is the entrypoint which should be called to render the infobox from the 
+     * DOMProcessor. This will delegate appropriately
+     */
+    public function renderPI(
+		ParsoidExtensionAPI $extApi,
+        Element $container,
+        Document $doc,
+        array $params,
+        string $parsoidData
+    ): void {
+        $this->buildParamMap( $params );
+        [ $data, $attr ] = $this->prepareInfobox( $extApi, $parsoidData, $this->paramMap ?: [] );
+    
+        $themes = $this->getThemes( $attr );
+        $layout = $this->getLayout( $attr );
+        $type = $this->getType( $attr );
+        $itemName = $this->getItemName( $attr );
+        
+        // This is a slight change from the legacy, we only use the templates to render the children
+        // since Parsoid will have generated an <aside> wrapper tag before we reach this function, so
+        // lets get our classes and add them to this <aside> wrapper which is the $container
+        $classes = [
+            'portable-infobox',
+            'noexcerpt', 
+            'searchaux',
+            'pi-background'
+        ];
+        
+        $classes = array_merge( $classes, $themes );
+        $classes[] = $layout;  
+        $classes[] = $type;
+        
+        $container->setAttribute('class', implode(' ', $classes ) );
+        
+        $result = $this->renderInfobox(
+            $data, 
+        );
+    
+		DOMCompat::setInnerHTML( $container, $result );
+    }
+
+    public function prepareInfobox(
+		ParsoidExtensionAPI $extApi,
+        string $parsoidData,
+        array $params,
+    ): array {
+
+		$externalParser = new ParsoidMediaWikiParser( $extApi );
+        // same as legacy!
+        $infoboxNode = NodeFactory::newFromXML( $parsoidData, $this->paramMap ?: [], $externalParser );
+		$infoboxNode->setExternalParser( $externalParser );
+        $data = $infoboxNode->getRenderData();
+        $attr = $infoboxNode->getParams();
+        return [ $data, $attr ];
+    }
+
+    /**
+     * Get the themes for this infobox as an array, falling back to the default if needed
+     * @param $attr the attributes
+     * @return array
+     */
+    private function getThemes( array $attr ): array {
+        $themes = [];
+
+        if ( isset( $attr['theme'] ) ) {
+            $staticTheme = trim( $attr['theme'] );
+            if ( !empty( $staticTheme ) ) {
+                $themes[] = $staticTheme;
+            }
+        }
+
+        // we don't have access to the frame here, but what we do have is the params and their values we got earlier, so 
+        // we can get the value for that - I think this works but I'm a bit confused alas!
+        if ( !empty( $attr['theme-source' ] ) ) {
+            $variableTheme = $this->paramMap[ $attr['theme-source'] ];
+            if ( !empty( $variableTheme ) ) {
+                $themes[] = $variableTheme;
+            }
+        }
+
+        $themes = !empty( $themes ) ? $themes : [ self::DEFAULT_THEME_NAME ];
+
+        return array_map( static function ( $name ) {
+			return Sanitizer::escapeIdForAttribute(
+				self::INFOBOX_THEME_PREFIX . preg_replace( '|\s+|s', '-', $name )
+			);
+		}, $themes );
+    }
+
+    /**
+     * Get the layout for this infobox from the attributes 
+     * @param array $attr the attributes
+     */
+    private function getLayout( array $attr ): string {
+		$layoutName = $attr['layout'] ?? '';
+		if ( $this->getParamsValidator()->validateLayout( $layoutName ) ) {
+			return self::INFOBOX_LAYOUT_PREFIX . $layoutName;
+		}
+
+		return self::INFOBOX_LAYOUT_PREFIX . self::DEFAULT_LAYOUT_NAME;
+	}
+
+    /**
+     * Get an instance of the InfoboxParamsValidator::class
+     * @return \PortableInfobox\Services\Helpers\InfoboxParamsValidator;
+     */
+    private function getParamsValidator() {
+		if ( empty( $this->infoboxParamsValidator ) ) {
+			$this->infoboxParamsValidator = new InfoboxParamsValidator();
+		}
+
+		return $this->infoboxParamsValidator;
+	}
+
+    /**
+     * Get the type of infobox that this is, ie "character" "place"
+     * @param $attr the attributes
+     * @return string
+     */
+    private function getType( array $attr ): string {
+		return !empty( $attr['type'] ) ? Sanitizer::escapeIdForAttribute(
+				self::INFOBOX_TYPE_PREFIX . preg_replace( '|\s+|s', '-', $attr['type'] )
+			) : '';
+	}
+
+    /**
+     * Get the name for this infobox
+     * @TODO: needs to go through the sanitizer
+     * @param array $attr 
+     * @return @string
+     */
+    private function getItemName( $attr ) {
+		return !empty( $attr['name'] ) ? $attr['name'] : '';
+	}
+
+    private function renderInfobox(
+        array $data,
+    ) {
+        $this->templateEngine = new PortableInfoboxTemplateEngine();
+
+        $infoboxHtmlContent = $this->renderChildren( $data );
+
+		return $infoboxHtmlContent;
+    }
+
+    protected function renderHeader( array $data ) {
+		// $data['inlineStyles'] = $this->inlineStyles;
+
+		return $this->render( 'header', $data );
+	}
+    
+    protected function renderTitle( array $data ) {
+		// $data['inlineStyles'] = $this->inlineStyles;
+
+		return $this->render( 'title', $data );
+	}
+}
\ No newline at end of file
diff --git a/includes/Parsoid/PortableInfoboxDOMProcessor.php b/includes/Parsoid/PortableInfoboxDOMProcessor.php
new file mode 100644
index 00000000..ac58290f
--- /dev/null
+++ b/includes/Parsoid/PortableInfoboxDOMProcessor.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use Wikimedia\Parsoid\DOM\Element;
+use Wikimedia\Parsoid\Ext\DOMProcessor;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+use Wikimedia\Parsoid\DOM\Node;
+use Wikimedia\Parsoid\Ext\DOMDataUtils;
+use Wikimedia\Parsoid\Ext\DOMUtils;
+
+class PortableInfoboxDOMProcessor extends DOMProcessor {
+
+	/**
+	 * Note, this is a WIP at present, see comments throughout.
+     * Will probably need to be revised at a later stage when Parsoid API is more mature
+     * @since 1.0
+	 */
+    public function wtPostprocess(
+		ParsoidExtensionAPI $extApi, Node $node, array $options
+	): void {
+        $child = $node->firstChild;
+		
+        // insipiration taken from Ext:Cite
+        // and also <gallery>
+        while ( $child !== null ) {
+			$nextChild = $child->nextSibling;
+			if ( $child instanceof Element ) {
+				// we're only interested in PIs in this function
+				if ( DOMUtils::hasTypeOf( $child, 'mw:Extension/infobox' ) ) {
+                    $dataMw = DOMDataUtils::getDataMw( $child );
+					$parsoidData = DOMDataUtils::getDataParsoid( $child )->src;
+
+					$parts = $dataMw->parts;
+
+					// remove the existing stuff that is generated on the first pass of Parsoid
+					// Note: this is probably a bit of a hacky solution, since we will have already
+					// processed the parser tag at this point and ended up with the mangled HTML 
+					// ideally, we would do all of this in the main parse, but Parsoid does not currently
+					// grant us the ability to do that, so just remove whatever gobbldy-guck was generated
+					// in the first pass. This is probably a bit of a performance hog, but it will be cached in the
+					// parser cache for subsequent reads so is a one-shot-pony until the cache expires.
+					while ( $child->firstChild ) {
+						$child->removeChild( $child->firstChild );
+					}
+					
+                	$doc = $child->ownerDocument;
+                
+					foreach ( $parts as $part ) {
+						// add our parts to the params info
+						// this will get us the key => value of the parameters that the 
+						// user passed to the template from the article,
+						// ie we might get something like
+						// params['name'] = [ 'k' => 'name', 'valueWt' => 'John Doe' ]
+						// which is something akin to what PortableInfoboxParserTagController::renderInfobox()
+						// expects to be passed, albeit we'll need to fudge it a bit!
+						$params = $part->paramInfos ?? [];
+						
+						$portableInfoboxRenderService = new ParsoidPortableInfoboxRenderService();
+
+						$portableInfoboxRenderService->renderPI( $extApi, $child, $doc, $params, $parsoidData );
+					}
+
+				}
+			}
+			$child = $nextChild;
+		}
+	}
+}
\ No newline at end of file
diff --git a/includes/Services/AbstractPortableInfoboxRenderService.php b/includes/Services/AbstractPortableInfoboxRenderService.php
new file mode 100644
index 00000000..7d3e1834
--- /dev/null
+++ b/includes/Services/AbstractPortableInfoboxRenderService.php
@@ -0,0 +1,348 @@
+<?php 
+
+namespace PortableInfobox\Services;
+
+use PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine;
+
+abstract class AbstractPortableInfoboxRenderService {
+
+    // keep synced with css variables (--pi-width)
+	public const DEFAULT_DESKTOP_INFOBOX_WIDTH = 270;
+	public const DEFAULT_DESKTOP_THUMBNAIL_WIDTH = 350;
+
+	protected $templateEngine;
+	protected $inlineStyles;
+
+    public function __construct() {
+		$this->templateEngine = new PortableInfoboxTemplateEngine();
+	}
+
+    /**
+	 * Produces HTML output for item type and data
+	 *
+	 * @param string $type
+	 * @param array $data
+	 * @return string
+	 */
+	protected function render( $type, array $data ) {
+		return $this->templateEngine->render( $type, $data );
+	}
+
+    /**
+	 * renders part of infobox
+	 *
+	 * @param string $type
+	 * @param array $data
+	 *
+	 * @return string - HTML
+	 */
+	protected function renderItem( $type, array $data ) {
+		switch ( $type ) {
+			case 'group':
+				$result = $this->renderGroup( $data );
+				break;
+			case 'header':
+				$result = $this->renderHeader( $data );
+				break;
+			case 'media':
+				$result = $this->renderMedia( $data );
+				break;
+			case 'title':
+				$result = $this->renderTitle( $data );
+				break;
+			case 'panel':
+				$result = $this->renderPanel( $data );
+				break;
+			case 'section':
+				$result = '';
+				break;
+			default:
+				$result = $this->render( $type, $data );
+				break;
+		}
+
+		return $result;
+	}
+
+    /**
+     * Render specific elements. These are declared abstract so that both 
+     * Parsoid and legacy can implement themselves as legacy uses $this->inlineStyles
+     * which Parsoid implementation does not currently support
+     * @TODO: implement inlineStyles so these can be made non-abstract
+     */
+    abstract protected function renderHeader( array $data );
+    abstract protected function renderTitle( array $data );
+
+    /**
+	 * renders group infobox component
+	 *
+	 * @param array $groupData
+	 *
+	 * @return string - group HTML markup
+	 */
+	protected function renderGroup( array $groupData ) {
+		$cssClasses = [];
+		$groupHTMLContent = '';
+		$children = $groupData['value'];
+		$layout = $groupData['layout'];
+		$collapse = $groupData['collapse'];
+		$rowItems = $groupData['row-items'];
+
+		if ( $rowItems > 0 ) {
+			$items = $this->createSmartGroups( $children, $rowItems );
+			$groupHTMLContent .= $this->renderChildren( $items );
+		} elseif ( $layout === 'horizontal' ) {
+			$groupHTMLContent .= $this->renderItem(
+				'horizontal-group-content',
+				$this->createHorizontalGroupData( $children )
+			);
+		} else {
+			$groupHTMLContent .= $this->renderChildren( $children );
+		}
+
+		if ( $collapse !== null && count( $children ) > 0 && $children[0]['type'] === 'header' ) {
+			$cssClasses[] = 'pi-collapse';
+			$cssClasses[] = 'pi-collapse-' . $collapse;
+		}
+
+		return $this->render( 'group', [
+			'content' => $groupHTMLContent,
+			'cssClasses' => implode( ' ', $cssClasses ),
+			'item-name' => $groupData['item-name']
+		] );
+	}
+
+    /**
+     * Create a smart group 
+     * @param array $groupData
+     * @param $rowCapacity
+     */
+    protected function createSmartGroups( array $groupData, $rowCapacity ) {
+		$result = [];
+		$rowSpan = 0;
+		$rowItems = [];
+
+		foreach ( $groupData as $item ) {
+			$data = $item['data'];
+
+			if ( $item['type'] === 'data' && $data['layout'] !== 'default' ) {
+
+				if ( !empty( $rowItems ) && $rowSpan + $data['span'] > $rowCapacity ) {
+					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
+					$rowSpan = 0;
+					$rowItems = [];
+				}
+				$rowSpan += $data['span'];
+				$rowItems[] = $item;
+			} else {
+				// smart wrapping works only for data tags
+				if ( !empty( $rowItems ) ) {
+					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
+					$rowSpan = 0;
+					$rowItems = [];
+				}
+				$result[] = $item;
+			}
+		}
+		if ( !empty( $rowItems ) ) {
+			$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
+		}
+
+		return $result;
+	}
+
+    /**
+     * Create a smart group item
+     * @param array $rowItems
+     * @param $rowSpan
+     * @return array
+     */
+    protected function createSmartGroupItem( array $rowItems, $rowSpan ): array {
+		return [
+			'type' => 'smart-group',
+			'data' => $this->createSmartGroupSections( $rowItems, $rowSpan )
+		];
+	}
+
+    /**
+     * Create a smart group section
+     * @param array $rowItems
+     * @param $capacity
+     */
+    protected function createSmartGroupSections( array $rowItems, $capacity ) {
+		return array_reduce( $rowItems, static function ( $result, $item ) use ( $capacity ) {
+			$width = $item['data']['span'] / $capacity * 100;
+			$styles = "width: {$width}%";
+
+			$label = $item['data']['label'] ?? "";
+			if ( !empty( $label ) ) {
+				$result['renderLabels'] = true;
+			}
+			$result['data'][] = [
+				'label' => $label,
+				'value' => $item['data']['value'],
+				'inlineStyles' => $styles,
+				'source' => $item['data']['source'] ?? "",
+				'item-name' => $item['data']['item-name']
+			];
+
+			return $result;
+		}, [ 'data' => [], 'renderLabels' => false ] );
+	}
+
+    /**
+     * Create group data for a horizontal group
+     * @param array $groupData
+     * @return array
+     */
+    protected function createHorizontalGroupData( array $groupData ): array {
+		$horizontalGroupData = [
+			'data' => [],
+			'renderLabels' => false
+		];
+
+		foreach ( $groupData as $item ) {
+			$data = $item['data'];
+
+			if ( $item['type'] === 'data' ) {
+				$horizontalGroupData['data'][] = [
+					'label' => $data['label'],
+					'value' => $data['value'],
+					'source' => $item['data']['source'] ?? "",
+					'item-name' => $item['data']['item-name']
+				];
+
+				if ( !empty( $data['label'] ) ) {
+					$horizontalGroupData['renderLabels'] = true;
+				}
+			} elseif ( $item['type'] === 'header' ) {
+				$horizontalGroupData['header'] = $data['value'];
+				$horizontalGroupData['inlineStyles'] = $this->inlineStyles;
+			}
+		}
+
+		return $horizontalGroupData;
+	}
+
+    /**
+     * Get data for a specific section
+     * @param $section
+     * @param $index
+     * @return array
+     */
+    protected function getSectionData( $section, $index ): array {
+		$content = $this->renderChildren( $section['data']['value'] );
+		return [
+			'index' => $index,
+			'item-name' => $section['data']['item-name'],
+			'label' => $section['data']['label'],
+			'content' => !empty( $content ) ? $content : null
+		];
+	}
+
+    /**
+     * Render the children of the infobox - this turns everything between the 
+     * <infobox></infobox> tags into HTML
+     * @param array $children
+     * @return string
+     */
+    protected function renderChildren( array $children ): string {
+		$result = '';
+		foreach ( $children as $child ) {
+			$type = $child['type'];
+			if ( $this->templateEngine->isSupportedType( $type ) ) {
+				$result .= $this->renderItem( $type, $child['data'] );
+			}
+		}
+
+		return $result;
+	}
+
+    /**
+     * Render a panel
+     * @param array $data
+     * @param string $type
+     */
+    protected function renderPanel( array $data, $type = 'panel' ) {
+		$cssClasses = [];
+		$sections = [];
+		$collapse = $data['collapse'];
+		$header = '';
+		$shouldShowToggles = false;
+
+		foreach ( $data['value'] as $index => $child ) {
+			switch ( $child['type'] ) {
+				case 'header':
+					if ( empty( $header ) ) {
+						$header = $this->renderHeader( $child['data'] );
+					}
+					break;
+				case 'section':
+					$sectionData = $this->getSectionData( $child, $index );
+					// section needs to have content in order to render it
+					if ( !empty( $sectionData['content'] ) ) {
+						$sections[] = $sectionData;
+						if ( !empty( $sectionData['label'] ) ) {
+							$shouldShowToggles = true;
+						}
+					}
+					break;
+				default:
+					// we do not support any other tags than section and header inside panel
+					break;
+			}
+		}
+		if ( $collapse !== null && count( $sections ) > 0 && !empty( $header ) ) {
+			$cssClasses[] = 'pi-collapse';
+			$cssClasses[] = 'pi-collapse-' . $collapse;
+		}
+		if ( count( $sections ) > 0 ) {
+			$sections[0]['active'] = true;
+		} else {
+			// do not render empty panel
+			return '';
+		}
+		if ( !$shouldShowToggles ) {
+			$sections = array_map( static function ( $content ) {
+				$content['active'] = true;
+				return $content;
+			}, $sections );
+		}
+
+		return $this->render( $type, [
+			'item-name' => $data['item-name'],
+			'cssClasses' => implode( ' ', $cssClasses ),
+			'header' => $header,
+			'sections' => $sections,
+			'shouldShowToggles' => $shouldShowToggles,
+		] );
+	}
+
+    /**
+	 * If image element has invalid thumbnail, doesn't render this element at all.
+	 *
+	 * @param array $data
+	 * @return string
+	 */
+	protected function renderMedia( array $data ) {
+		if ( count( $data ) === 0 || !$data[0] ) {
+			return '';
+		}
+
+		if ( count( $data ) === 1 ) {
+			$data = $data[0];
+			$templateName = 'media';
+		} else {
+			// More than one image means image collection
+			$data = [
+				'images' => $data,
+				'source' => $data[0]['source'],
+				'item-name' => $data[0]['item-name']
+			];
+			$templateName = 'media-collection';
+		}
+
+		return $this->render( $templateName, $data );
+	}
+
+}
\ No newline at end of file
diff --git a/includes/Services/Parser/Nodes/Node.php b/includes/Services/Parser/Nodes/Node.php
index 28bb011b..c95a451d 100644
--- a/includes/Services/Parser/Nodes/Node.php
+++ b/includes/Services/Parser/Nodes/Node.php
@@ -150,8 +150,8 @@ protected function getChildNodes() {
 		if ( !isset( $this->children ) ) {
 			$this->children = [];
 			foreach ( $this->xmlNode as $child ) {
-				$this->children[] = NodeFactory::newFromSimpleXml( $child, $this->infoboxData )
-					->setExternalParser( $this->externalParser );
+				$this->children[] = NodeFactory::newFromSimpleXml( $child, $this->infoboxData, $this->getExternalParser() )
+					->setExternalParser( $this->getExternalParser() );
 			}
 		}
 
diff --git a/includes/Services/Parser/Nodes/NodeFactory.php b/includes/Services/Parser/Nodes/NodeFactory.php
index e8000d3d..056f5afa 100644
--- a/includes/Services/Parser/Nodes/NodeFactory.php
+++ b/includes/Services/Parser/Nodes/NodeFactory.php
@@ -2,17 +2,18 @@
 
 namespace PortableInfobox\Services\Parser\Nodes;
 
+use PortableInfobox\Parsoid\ParsoidMediaWikiParser;
 use PortableInfobox\Services\Parser\XmlParser;
 use SimpleXMLElement;
 
 class NodeFactory {
 
-	public static function newFromXML( $text, array $data = [] ) {
-		return self::getInstance( XmlParser::parseXmlString( $text ), $data );
+	public static function newFromXML( $text, array $data = [], $externalParser = null ) {
+		return self::getInstance( XmlParser::parseXmlString( $text ), $data, $externalParser );
 	}
 
-	public static function newFromSimpleXml( SimpleXMLElement $xmlNode, array $data = [] ) {
-		return self::getInstance( $xmlNode, $data );
+	public static function newFromSimpleXml( SimpleXMLElement $xmlNode, array $data = [], $externalParser = null ) {
+		return self::getInstance( $xmlNode, $data, $externalParser );
 	}
 
 	/**
@@ -21,8 +22,20 @@ public static function newFromSimpleXml( SimpleXMLElement $xmlNode, array $data
 	 *
 	 * @return Node|NodeUnimplemented
 	 */
-	protected static function getInstance( SimpleXMLElement $xmlNode, array $data ) {
+	protected static function getInstance( SimpleXMLElement $xmlNode, array $data, $externalParser ) {
 		$tagType = $xmlNode->getName();
+
+		// a bit messed up, but we want to do some special stuff here with images
+		// that differs from the legacy implementation (which also calls out to Parser.php)
+		// so lets load a different class if we have an image
+		if ( $externalParser instanceof ParsoidMediaWikiParser ) {
+			if ( $tagType === 'image' ) {
+				return new ParsoidImageNode( $xmlNode, $data );
+			} elseif ( $tagType === 'media' ) {
+				return new ParsoidMediaNode( $xmlNode, $data );
+			}
+		}
+		
 		$className = Node::class . mb_convert_case( mb_strtolower( $tagType ), MB_CASE_TITLE );
 		if ( class_exists( $className ) ) {
 			/* @var $instance Node */
diff --git a/includes/Services/Parser/Nodes/ParsoidImageNode.php b/includes/Services/Parser/Nodes/ParsoidImageNode.php
new file mode 100644
index 00000000..61545c12
--- /dev/null
+++ b/includes/Services/Parser/Nodes/ParsoidImageNode.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace PortableInfobox\Services\Parser\Nodes;
+
+class ParsoidImageNode extends ParsoidMediaNode {
+	/*
+	 * @return string
+	 */
+	public function getType() {
+		return 'media';
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowImage() {
+		return true;
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowAudio() {
+		return false;
+	}
+}
diff --git a/includes/Services/Parser/Nodes/ParsoidMediaNode.php b/includes/Services/Parser/Nodes/ParsoidMediaNode.php
new file mode 100644
index 00000000..f6102124
--- /dev/null
+++ b/includes/Services/Parser/Nodes/ParsoidMediaNode.php
@@ -0,0 +1,226 @@
+<?php
+
+namespace PortableInfobox\Services\Parser\Nodes;
+
+use MediaWiki\MediaWikiServices;
+use MediaWiki\Title\Title;
+use PortableInfobox\Parsoid\ParsoidPortableInfoboxRenderService;
+use PortableInfobox\Services\Helpers\FileNamespaceSanitizeHelper;
+use PortableInfobox\Services\Helpers\PortableInfoboxImagesHelper;
+
+class ParsoidMediaNode extends Node {
+
+    private ?PortableInfoboxImagesHelper $helper;
+
+    private const ALLOWIMAGE_ATTR_NAME = 'image';
+	private const ALLOWVIDEO_ATTR_NAME = 'video';
+	private const ALLOWAUDIO_ATTR_NAME = 'audio';
+	private const ALT_TAG_NAME = 'alt';
+	private const CAPTION_TAG_NAME = 'caption';
+
+    /**
+     * Return the data for the image
+     * return array
+     */
+    public function getData(): array {
+		if ( !isset( $this->data ) ) {
+			$this->data = [];
+
+			// value passed to source parameter (or default)
+			// force the $value to be a string so that containsTabberOrGallery()
+			// doesn't fatal
+			$value = $this->getRawValueWithDefault( $this->xmlNode );
+            if ( $this->containsTabberOrGallery( (string)$value ) ) {
+				$this->data = $this->getImagesData( $value );
+			} else {
+				$this->data = [ $this->getImageData(
+					$value,
+					$this->getValueWithDefault( $this->xmlNode->{self::ALT_TAG_NAME} ),
+					$this->getValueWithDefault( $this->xmlNode->{self::CAPTION_TAG_NAME} )
+				) ];
+			}
+        }
+		return $this->data;
+	}
+
+    /**
+     * Checks if string contains raw <gallery> or <tabber> tags using a hacky regex. With the legacy Parser,
+     * by the time this function runs in NodeMedia::class, the intial parse has already replaced the $str with a strip marker
+     * we are not in such environment and we will receieve the raw wikitext passed by the user
+     * @param string $value wikitext passed in the parameter
+     * @return bool
+     */
+    private function containsTabberOrGallery( string $value ): bool {
+        // <gallery></gallery>
+        if ( preg_match( '/<gallery\b[^>]*>/i', $value ?? '' ) ) {
+            return true;
+        }
+        
+        // <tabber></tabber>
+        if ( preg_match( '/<tabber\b[^>]*>/i', $value ?? '' ) ) {
+            return true;
+        }
+        
+        return false;
+    }
+
+    /**
+     * Get the data about the image (or images if tabber/gallery) and return it as an array
+     * @TODO: revisit this later, see comment on ParsoidMediaWikiParser::extractGallery for why this
+     * is a bad idea - but it works
+     * @param string $value the wikitext gallery
+     * @param mixed $value
+     */
+    private function getImagesData( string $value ) {
+		$helper = $this->getImageHelper();
+		$data = [];
+        $parser = $this->getExternalParser();
+        $items = $parser->extractGallery( $value );
+		// @TODO: do tabbers also 
+        foreach ( $items as $item ) {
+			$mediaItem = $this->getImageData( $item['title'], $item['label'], $item['label'] );
+			if ( (bool)$mediaItem ) {
+				$data[] = $mediaItem;
+			}
+		}
+
+        return count( $data ) > 1 ? $helper->extendImageCollectionData( $data ) : $data;
+	}
+
+    private function getImageData( $title, $alt, $caption ) {
+		$helper = $this->getImageHelper();
+		$titleObj = $title instanceof Title ? $title : $this->getImageAsTitleObject( $title );
+		$fileObj = $helper->getFile( $titleObj );
+
+		if ( !isset( $fileObj ) || !$this->isTypeAllowed( $fileObj->getMediaType() ) ) {
+			return [];
+		}
+
+		$mediatype = $fileObj->getMediaType();
+		$image = [
+			'url' => $this->resolveImageUrl( $fileObj, $titleObj ),
+			'name' => $titleObj ? $titleObj->getText() : '',
+			'alt' => $alt ?? ( $titleObj ? $titleObj->getText() : null ),
+			'caption' => $caption ?: null,
+			'isImage' => in_array( $mediatype, [ MEDIATYPE_BITMAP, MEDIATYPE_DRAWING ] ),
+			'isVideo' => $mediatype === MEDIATYPE_VIDEO,
+			'isAudio' => $mediatype === MEDIATYPE_AUDIO,
+			'source' => $this->getPrimarySource(),
+			'item-name' => $this->getItemName(),
+			'htmlAfter' => null,
+		];
+
+		if ( $image['isImage'] ) {
+			$image = array_merge( $image, $helper->extendImageData(
+				$fileObj,
+				ParsoidPortableInfoboxRenderService::DEFAULT_DESKTOP_THUMBNAIL_WIDTH,
+				ParsoidPortableInfoboxRenderService::DEFAULT_DESKTOP_INFOBOX_WIDTH
+			) );
+		}
+
+		return $image;
+	}
+
+    /**
+     * Get the image as a title object
+     * @param $imageName the image name 
+     * @return Title|null
+     */
+    private function getImageAsTitleObject( $imageName ): ?Title {
+		$contLang = MediaWikiServices::getInstance()->getContentLanguage();
+
+		$title = Title::makeTitleSafe(
+			NS_FILE,
+			FileNamespaceSanitizeHelper::getInstance()->sanitizeImageFileName( $imageName, $contLang )
+		);
+
+		return $title;
+	}
+
+    /**
+	 * Returns image url for given image title
+	 * @param File|null $file
+	 * @param Title|null $title
+	 * @return string url or '' if image doesn't exist
+	 */
+	public function resolveImageUrl( $file, $title ) {
+		global $wgPortableInfoboxUseFileDescriptionPage;
+
+		if ( $wgPortableInfoboxUseFileDescriptionPage && $title ) {
+			return $title->getLocalURL();
+		}
+
+		return $file ? $file->getUrl() : '';
+	}
+
+    /**
+     * Get an instance of the PortableInfoboxImageHelper
+     * @return PortableInfoboxImagesHelper
+     */
+    protected function getImageHelper() {
+		if ( !isset( $this->helper ) ) {
+			$this->helper = new PortableInfoboxImagesHelper();
+		}
+		return $this->helper;
+	}
+
+    /**
+	 * Checks if file media type is allowed
+	 * @param string $type
+	 * @return bool
+	 */
+	private function isTypeAllowed( $type ) {
+		switch ( $type ) {
+			case MEDIATYPE_BITMAP:
+			case MEDIATYPE_DRAWING:
+				return $this->allowImage();
+			case MEDIATYPE_VIDEO:
+				return $this->allowVideo();
+			case MEDIATYPE_AUDIO:
+				return $this->allowAudio();
+			default:
+				return false;
+		}
+	}
+
+    /**
+	 * @return bool
+	 */
+	protected function allowImage() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWIMAGE_ATTR_NAME );
+
+		return !( isset( $attr ) && strtolower( $attr ) === 'false' );
+	}
+
+	/**
+	 * @return bool
+	 */
+	protected function allowVideo() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWVIDEO_ATTR_NAME );
+
+		return !( isset( $attr ) && strtolower( $attr ) === 'false' );
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowAudio() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWAUDIO_ATTR_NAME );
+
+		return !( isset( $attr ) && strtolower( $attr ) === 'false' );
+	}
+
+    public function isEmpty() {
+		$data = $this->getData();
+		foreach ( $data as $dataItem ) {
+			if ( !empty( $dataItem['url'] ) ) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	public function getType() {
+		return 'media';
+	}
+}
\ No newline at end of file
diff --git a/includes/Services/PortableInfoboxRenderService.php b/includes/Services/PortableInfoboxRenderService.php
index 0ba72104..a39f291c 100644
--- a/includes/Services/PortableInfoboxRenderService.php
+++ b/includes/Services/PortableInfoboxRenderService.php
@@ -4,17 +4,7 @@
 
 use PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine;
 
-class PortableInfoboxRenderService {
-	// keep synced with css variables (--pi-width)
-	public const DEFAULT_DESKTOP_INFOBOX_WIDTH = 270;
-	public const DEFAULT_DESKTOP_THUMBNAIL_WIDTH = 350;
-
-	protected $templateEngine;
-	protected $inlineStyles;
-
-	public function __construct() {
-		$this->templateEngine = new PortableInfoboxTemplateEngine();
-	}
+class PortableInfoboxRenderService extends AbstractPortableInfoboxRenderService {
 
 	/**
 	 * renders infobox
@@ -51,119 +41,6 @@ public function renderInfobox(
 		return $output;
 	}
 
-	/**
-	 * Produces HTML output for item type and data
-	 *
-	 * @param string $type
-	 * @param array $data
-	 * @return string
-	 */
-	protected function render( $type, array $data ) {
-		return $this->templateEngine->render( $type, $data );
-	}
-
-	/**
-	 * renders part of infobox
-	 *
-	 * @param string $type
-	 * @param array $data
-	 *
-	 * @return string - HTML
-	 */
-	protected function renderItem( $type, array $data ) {
-		switch ( $type ) {
-			case 'group':
-				$result = $this->renderGroup( $data );
-				break;
-			case 'header':
-				$result = $this->renderHeader( $data );
-				break;
-			case 'media':
-				$result = $this->renderMedia( $data );
-				break;
-			case 'title':
-				$result = $this->renderTitle( $data );
-				break;
-			case 'panel':
-				$result = $this->renderPanel( $data );
-				break;
-			case 'section':
-				$result = '';
-				break;
-			default:
-				$result = $this->render( $type, $data );
-				break;
-		}
-
-		return $result;
-	}
-
-	/**
-	 * renders group infobox component
-	 *
-	 * @param array $groupData
-	 *
-	 * @return string - group HTML markup
-	 */
-	protected function renderGroup( array $groupData ) {
-		$cssClasses = [];
-		$groupHTMLContent = '';
-		$children = $groupData['value'];
-		$layout = $groupData['layout'];
-		$collapse = $groupData['collapse'];
-		$rowItems = $groupData['row-items'];
-
-		if ( $rowItems > 0 ) {
-			$items = $this->createSmartGroups( $children, $rowItems );
-			$groupHTMLContent .= $this->renderChildren( $items );
-		} elseif ( $layout === 'horizontal' ) {
-			$groupHTMLContent .= $this->renderItem(
-				'horizontal-group-content',
-				$this->createHorizontalGroupData( $children )
-			);
-		} else {
-			$groupHTMLContent .= $this->renderChildren( $children );
-		}
-
-		if ( $collapse !== null && count( $children ) > 0 && $children[0]['type'] === 'header' ) {
-			$cssClasses[] = 'pi-collapse';
-			$cssClasses[] = 'pi-collapse-' . $collapse;
-		}
-
-		return $this->render( 'group', [
-			'content' => $groupHTMLContent,
-			'cssClasses' => implode( ' ', $cssClasses ),
-			'item-name' => $groupData['item-name']
-		] );
-	}
-
-	/**
-	 * If image element has invalid thumbnail, doesn't render this element at all.
-	 *
-	 * @param array $data
-	 * @return string
-	 */
-	protected function renderMedia( array $data ) {
-		if ( count( $data ) === 0 || !$data[0] ) {
-			return '';
-		}
-
-		if ( count( $data ) === 1 ) {
-			$data = $data[0];
-			$templateName = 'media';
-		} else {
-			// More than one image means image collection
-			$data = [
-				'images' => $data,
-				'source' => $data[0]['source'],
-				'item-name' => $data[0]['item-name']
-			];
-			$templateName = 'media-collection';
-		}
-
-		return $this->render( $templateName, $data );
-	}
-
 	protected function renderTitle( array $data ) {
 		$data['inlineStyles'] = $this->inlineStyles;
 
@@ -176,178 +53,10 @@ protected function renderHeader( array $data ) {
 		return $this->render( 'header', $data );
 	}
 
-	protected function renderChildren( array $children ) {
-		$result = '';
-		foreach ( $children as $child ) {
-			$type = $child['type'];
-			if ( $this->templateEngine->isSupportedType( $type ) ) {
-				$result .= $this->renderItem( $type, $child['data'] );
-			}
-		}
-
-		return $result;
-	}
-
-	protected function renderPanel( $data, $type = 'panel' ) {
-		$cssClasses = [];
-		$sections = [];
-		$collapse = $data['collapse'];
-		$header = '';
-		$shouldShowToggles = false;
-
-		foreach ( $data['value'] as $index => $child ) {
-			switch ( $child['type'] ) {
-				case 'header':
-					if ( empty( $header ) ) {
-						$header = $this->renderHeader( $child['data'] );
-					}
-					break;
-				case 'section':
-					$sectionData = $this->getSectionData( $child, $index );
-					// section needs to have content in order to render it
-					if ( !empty( $sectionData['content'] ) ) {
-						$sections[] = $sectionData;
-						if ( !empty( $sectionData['label'] ) ) {
-							$shouldShowToggles = true;
-						}
-					}
-					break;
-				default:
-					// we do not support any other tags than section and header inside panel
-					break;
-			}
-		}
-		if ( $collapse !== null && count( $sections ) > 0 && !empty( $header ) ) {
-			$cssClasses[] = 'pi-collapse';
-			$cssClasses[] = 'pi-collapse-' . $collapse;
-		}
-		if ( count( $sections ) > 0 ) {
-			$sections[0]['active'] = true;
-		} else {
-			// do not render empty panel
-			return '';
-		}
-		if ( !$shouldShowToggles ) {
-			$sections = array_map( static function ( $content ) {
-				$content['active'] = true;
-				return $content;
-			}, $sections );
-		}
-
-		return $this->render( $type, [
-			'item-name' => $data['item-name'],
-			'cssClasses' => implode( ' ', $cssClasses ),
-			'header' => $header,
-			'sections' => $sections,
-			'shouldShowToggles' => $shouldShowToggles,
-		] );
-	}
-
-	private function getSectionData( $section, $index ) {
-		$content = $this->renderChildren( $section['data']['value'] );
-		return [
-			'index' => $index,
-			'item-name' => $section['data']['item-name'],
-			'label' => $section['data']['label'],
-			'content' => !empty( $content ) ? $content : null
-		];
-	}
-
 	private function getInlineStyles( $accentColor, $accentColorText ) {
 		$backgroundColor = empty( $accentColor ) ? '' : "background-color:{$accentColor};";
 		$color = empty( $accentColorText ) ? '' : "color:{$accentColorText};";
 
 		return "{$backgroundColor}{$color}";
 	}
-
-	private function createHorizontalGroupData( array $groupData ) {
-		$horizontalGroupData = [
-			'data' => [],
-			'renderLabels' => false
-		];
-
-		foreach ( $groupData as $item ) {
-			$data = $item['data'];
-
-			if ( $item['type'] === 'data' ) {
-				$horizontalGroupData['data'][] = [
-					'label' => $data['label'],
-					'value' => $data['value'],
-					'source' => $item['data']['source'] ?? "",
-					'item-name' => $item['data']['item-name']
-				];
-
-				if ( !empty( $data['label'] ) ) {
-					$horizontalGroupData['renderLabels'] = true;
-				}
-			} elseif ( $item['type'] === 'header' ) {
-				$horizontalGroupData['header'] = $data['value'];
-				$horizontalGroupData['inlineStyles'] = $this->inlineStyles;
-			}
-		}
-
-		return $horizontalGroupData;
-	}
-
-	private function createSmartGroups( array $groupData, $rowCapacity ) {
-		$result = [];
-		$rowSpan = 0;
-		$rowItems = [];
-
-		foreach ( $groupData as $item ) {
-			$data = $item['data'];
-
-			if ( $item['type'] === 'data' && $data['layout'] !== 'default' ) {
-
-				if ( !empty( $rowItems ) && $rowSpan + $data['span'] > $rowCapacity ) {
-					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
-					$rowSpan = 0;
-					$rowItems = [];
-				}
-				$rowSpan += $data['span'];
-				$rowItems[] = $item;
-			} else {
-				// smart wrapping works only for data tags
-				if ( !empty( $rowItems ) ) {
-					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
-					$rowSpan = 0;
-					$rowItems = [];
-				}
-				$result[] = $item;
-			}
-		}
-		if ( !empty( $rowItems ) ) {
-			$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
-		}
-
-		return $result;
-	}
-
-	private function createSmartGroupItem( array $rowItems, $rowSpan ) {
-		return [
-			'type' => 'smart-group',
-			'data' => $this->createSmartGroupSections( $rowItems, $rowSpan )
-		];
-	}
-
-	private function createSmartGroupSections( array $rowItems, $capacity ) {
-		return array_reduce( $rowItems, static function ( $result, $item ) use ( $capacity ) {
-			$width = $item['data']['span'] / $capacity * 100;
-			$styles = "width: {$width}%";
-
-			$label = $item['data']['label'] ?? "";
-			if ( !empty( $label ) ) {
-				$result['renderLabels'] = true;
-			}
-			$result['data'][] = [
-				'label' => $label,
-				'value' => $item['data']['value'],
-				'inlineStyles' => $styles,
-				'source' => $item['data']['source'] ?? "",
-				'item-name' => $item['data']['item-name']
-			];
-
-			return $result;
-		}, [ 'data' => [], 'renderLabels' => false ] );
-	}
 }