diff --git a/.wp-env.json b/.wp-env.json index 0967ef4..dafab87 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -1 +1,5 @@ -{} +{ + "plugins": [ + "." + ] +} diff --git a/src/blockparty-iframe/block.json b/src/blockparty-iframe/block.json index b70d68a..f0e57c1 100644 --- a/src/blockparty-iframe/block.json +++ b/src/blockparty-iframe/block.json @@ -28,6 +28,21 @@ "url": { "type": "string", "default": "" + }, + "iframeAttributes": { + "type": "array", + "default": [], + "items": { + "type": "object", + "properties": { + "key": { + "type": "string" + }, + "value": { + "type": "string" + } + } + } } }, "textdomain": "blockparty-iframe", diff --git a/src/blockparty-iframe/edit.js b/src/blockparty-iframe/edit.js index 102c424..c66694e 100644 --- a/src/blockparty-iframe/edit.js +++ b/src/blockparty-iframe/edit.js @@ -39,6 +39,7 @@ import { useState } from '@wordpress/element'; import './editor.scss'; import { aspectRatio } from '@wordpress/icons'; +import { convertAttributesToProps, parseIframeCode } from './utils'; /** * The edit function describes the structure of your block in the context of the @@ -50,12 +51,18 @@ import { aspectRatio } from '@wordpress/icons'; */ export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); - const { lazyload, title: initialTitle, url: initialUrl } = attributes; + const { + lazyload, + title: initialTitle, + url: initialUrl, + iframeAttributes: initialAttributes, + } = attributes; // State local pour les champs TextControl const [ iframeData, setIframeData ] = useState( { url: initialUrl || '', title: initialTitle || '', + iframeAttributes: initialAttributes || [], } ); // hasConfirmed = l’utilisateur a validé l’ajout de l’iframe @@ -76,6 +83,29 @@ export default function Edit( { attributes, setAttributes } ) { const showPlaceholder = ! hasConfirmed; const showIframe = hasConfirmed && isIframeElligible; + // Handle URL/iframe code change + function handleUrlChange( value ) { + // Try to parse as iframe code + const parsed = parseIframeCode( value ); + + if ( parsed ) { + // It's an iframe code, extract URL, title, and attributes + setIframeData( { + ...iframeData, + url: parsed.url, + title: parsed.title || iframeData.title, // Use extracted title if available, otherwise keep current + iframeAttributes: parsed.attributes, + } ); + } else { + // It's a regular URL + setIframeData( { + ...iframeData, + url: value, + iframeAttributes: [], + } ); + } + } + // Handle clic Add iframe function handleAddIframeButtonClick() { setAttributes( { ...attributes, ...iframeData } ); @@ -118,28 +148,20 @@ export default function Edit( { attributes, setAttributes } ) { icon={ aspectRatio } label={ __( 'Iframe', 'blockparty-iframe' ) } instructions={ __( - 'Fill the URL and the title of the iframe.', + 'Fill the iframe source and the title of the iframe.', 'blockparty-iframe' ) } >
- setIframeData( { ...iframeData, url: value } ) - } - placeholder="https://..." - type="url" - help={ - iframeData.url.length && - ! isURL( iframeData.url ) - ? __( - 'The URL is invalid.', - 'blockparty-iframe' - ) - : '' - } + onChange={ handleUrlChange } + placeholder={ `https://... or ' ); + const iframeElement = tempDiv.querySelector( 'iframe' ); + + if ( ! iframeElement ) { + return null; + } + + // Extract src attribute + const src = iframeElement.getAttribute( 'src' ) || ''; + + // Extract title attribute + const title = iframeElement.getAttribute( 'title' ) || ''; + + // Extract all other attributes (excluding managed and deprecated ones) + const attributes = []; + + for ( const attr of iframeElement.attributes ) { + if ( ! isExcludedIframeAttribute( attr.name ) ) { + // For boolean attributes, store 'true' as value if present + const value = isBooleanAttribute( attr.name ) ? 'true' : attr.value; + + attributes.push( { + key: attr.name, + value, + } ); + } + } + + return { + url: src, + title, + attributes, + }; +}