Il pulsante di copia serve a permettere agli utenti di copiare un contenuto della pagina in cui si trovano negli appunti del sistema operativo. Il contenuto può essere di qualsiasi tipo, ad esempio uno snippet all'interno del blocco gutenberg codice oppure il testo di un paragrafo, ecc... L'elemento da cui ricavare il contenuto in questo pattern deve avere l'attributo data-codice-da-copiare per essere trovato dal pulsante di copia. Il pulsante ha semplicemente un attributo onclick applicato all'interno del quale sono scritte pochissime linee javascript variabili in base al contenuto da ottenere.
Requisiti
Pulsante di copia contenuto paragrafo
Copiamo il contenuto di un paragrafo:
Pattern
<!-- wp:gpci/button {"content":"Copia paragrafo","align":"left","className":"wp-element-button","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"ClientId":"fc247f8d-c68c-411c-8f02-bfbfdf97a37e","tsLastChange":1720499980387,"alignBr":true,"AttributesDefinition":[[{"AttributeName":"onclick"},{"AttributeValue":"let content = GetElementFromAttribute( element=this, name='data-codice-da-copiare', value=name, direction='previousElementSibling', compare='hasAttribute' ).textContent;\nnavigator.clipboard.writeText( content ).then( function(){ alert( 'Copiato!'); } );"},{"AttributeSelector":"id"},{"AttributeSelectorContent":""},{"RepeatSelection":false},{"prependAttribute":false},{"AttributeValueType":"string"}]],"ForeachArrayInType":"string","AdminOnlySettings":[],"IsInnerBlock":true,"BlockBackendLocation":"GutenbergBackendPost"} -->
<button class="wp-block-gpci-button alignleft wp-element-button alignleftbr" style="margin-top:var(--wp--preset--spacing--60)" onclick="let content = GetElementFromAttribute( element=this, name='data-codice-da-copiare', value=name, direction='previousElementSibling', compare='hasAttribute' ).textContent;navigator.clipboard.writeText( content ).then( function(){ alert( 'Copiato!'); } );" type="button">Copia paragrafo</button>
<!-- /wp:gpci/button -->Risultato
Sono il paragrafo da copiare!
Pulsante di copia snippet
Ora copiamo uno snippet da un blocco codice con syntax highlighting:
<!-- wp:gpci/button {"content":"Copia snippet","className":"wp-element-button pulsante-copia","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"ClientId":"e9bdba26-834c-4e67-9f1b-33a4bfdc0837","tsLastChange":1720500380840,"AttributesDefinition":[[{"AttributeName":"onclick"},{"AttributeValue":"let lines = GetElementFromAttribute( element=this.previousElementSibling, name='data-codice-da-copiare', value=name, direction='previousElementSibling', compare='hasAttribute' ).querySelectorAll( '.CodeMirror-code .CodeMirror-line' );\nlet contentArray = Array.from( lines ).map( line =\u003e line.innerText ); \nlet content = contentArray.join( '\\n' ); \nnavigator.clipboard.writeText( content ).then( function(){ alert( 'Copiato!'); } );"},{"AttributeSelector":"id"},{"AttributeSelectorContent":""},{"RepeatSelection":false},{"prependAttribute":false},{"AttributeValueType":"string"}]],"ForeachArrayInType":"string","AdminOnlySettings":[],"IsInnerBlock":true,"BlockBackendLocation":"GutenbergBackendPost"} -->
<button class="wp-block-gpci-button wp-element-button pulsante-copia" style="margin-top:var(--wp--preset--spacing--60)" onclick="let lines = GetElementFromAttribute( element=this.previousElementSibling, name='data-codice-da-copiare', value=name, direction='previousElementSibling', compare='hasAttribute' ).querySelectorAll( '.CodeMirror-code .CodeMirror-line' );let contentArray = Array.from( lines ).map( line => line.innerText ); let content = contentArray.join( '\n' ); navigator.clipboard.writeText( content ).then( function(){ alert( 'Copiato!'); } );" type="button">Copia snippet</button>
<!-- /wp:gpci/button -->