Skip to content

Commit

Permalink
Removing the book link while editing the block in the editor.
Browse files Browse the repository at this point in the history
  • Loading branch information
@pagelab
pagelab committed Aug 1, 2023
1 parent 0d3029b commit 434ae48
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 59 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* Tested up to: 6.3
* Requires at least: 5.9
* Requires PHP: 7.0
* Stable tag: 0.2.0
* Stable tag: 0.3.0
* License: GPL 2.0 or later

Have an attractive 3D book cover that animates when you mouse over it, whether for decorative effect, increasing conversions, or generating leads.
Expand Down
111 changes: 59 additions & 52 deletions blocks/book/book.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}

const block = registerBlockType( 'cover3d/book', {
apiVersion: 2,
apiVersion: 3,
title: '3D Book Cover',
description: __( 'A 3D book cover animated on hover.', 'cover3d' ),
icon: el('svg', { viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', style: { strokeLinecap: 'round',strokeLinejoin: 'round',strokeMiterlimit: '1.5',fill: 'none',stroke: '#000',strokeWidth: '1px' } }, [el('path', { d: 'M10.358 3.792v3.283h6.567V3.792h-6.567zM7.075 10.358l3.283-3.283h6.567l-3.283 3.283H7.075zM7.075.509l3.283 3.283h6.567L13.642.509H7.075z' }), el('path', { d: 'M10.358 7.075 7.075 3.792V.509l3.283 3.283v3.283zM10.358 13.642v3.283h6.567v-3.283h-6.567z' }), el('path', { d: 'm7.075 20.208 3.283-3.283h6.567l-3.283 3.283H7.075zM7.075 10.358l3.283 3.284h6.567l-3.283-3.284H7.075z' }), el('path', { d: 'm10.358 16.925-3.283-3.283v-3.284l3.283 3.284v3.283zM13.642 23.491v-3.283l3.283-3.283v3.283l-3.283 3.283zM7.075 20.208v3.283h6.567v-3.283H7.075z' })]),
Expand Down Expand Up @@ -59,79 +59,86 @@
}
},
example: { attributes: { book_cover_link: {post_id: 0, url: '#void', title: '', 'post_type': null}, book_size: 'big', back_cover_text: __( 'Buy', 'cover3d' ), back_cover_icon_type: 'download', back_cover_color: '', back_cover_bkg_color: '', book_cover_img: {id: 0, url: (pg_project_data_cover3d ? pg_project_data_cover3d.url : '') + 'assets/cover.png', size: '', svg: '', alt: null} } },
edit: function ( props ) {

edit: function (props) {
const blockProps = useBlockProps({ className: 'book-cover' });
const setAttributes = props.setAttributes;
props.book_cover_img = useSelect(function( select ) {
const setAttributes = props.setAttributes;

props.book_cover_img = useSelect(function (select) {
return {
book_cover_img: props.attributes.book_cover_img.id ? select('core').getMedia(props.attributes.book_cover_img.id) : undefined
};
}, [props.attributes.book_cover_img] ).book_cover_img;


}, [props.attributes.book_cover_img]).book_cover_img;

const innerBlocksProps = null;


return el(Fragment, {}, [

el( ServerSideRender, {
block: 'cover3d/book',
httpMethod: 'POST',
attributes: props.attributes,
innerBlocksProps: innerBlocksProps,
blockProps: blockProps
} ),

el( InspectorControls, {},
[

pgMediaImageControl('book_cover_img', setAttributes, props, 'medium', false, __( 'Book cover image', 'cover3d' ), __( 'Add your book cover image.', 'cover3d' ) ),

el(Panel, {},
el(PanelBody, {

const children = React.Children.toArray(props.children);

const childrenWithKeys = children.map((child, index) => {
return React.cloneElement(child, { key: index });
});

return React.createElement(
React.Fragment,
null,
React.createElement(ServerSideRender, {
block: 'cover3d/book',
httpMethod: 'POST',
attributes: props.attributes,
innerBlocksProps: innerBlocksProps,
blockProps: blockProps
}),
childrenWithKeys,
React.createElement(
InspectorControls,
null,
[
pgMediaImageControl('book_cover_img', setAttributes, props, 'medium', false, __('Book cover image', 'cover3d'), __('Add your book cover image.', 'cover3d')),
React.createElement(
Panel,
null,
React.createElement(
PanelBody,
{
title: __('Block properties', 'cover3d')
}, [
pgUrlControl('book_cover_link', setAttributes, props, __( 'Book cover link', 'cover3d' ), __( 'Add an optional link to the book (to download or buy). Adding a link will trigger the hover animation to show the back cover.', 'cover3d' ), null ),
el(SelectControl, {
},
[
pgUrlControl('book_cover_link', setAttributes, props, __('Book cover link', 'cover3d'), __('Add an optional link to the book (to download or buy). Adding a link will trigger the hover animation to show the back cover.', 'cover3d'), null),
React.createElement(SelectControl, {
value: props.attributes.book_size,
label: __( 'Book size', 'cover3d' ),
onChange: function(val) { setAttributes({book_size: val}) },
label: __('Book size', 'cover3d'),
onChange: function (val) { setAttributes({ book_size: val }) },
options: [
{ value: '', label: '-' },
{ value: 'big', label: __('Big', 'cover3d') },
{ value: 'medium', label: __('Medium', 'cover3d') },
{ value: 'small', label: __('Small', 'cover3d') }
]
}),
el(TextControl, {
React.createElement(TextControl, {
value: props.attributes.back_cover_text,
help: __( 'Enter the short text that will appear on the back cover on hover (only displayed with linked covers and for large and medium sizes).', 'cover3d' ),
label: __( 'Back cover text', 'cover3d' ),
onChange: function(val) { setAttributes({back_cover_text: val}) },
help: __('Enter the short text that will appear on the back cover on hover (only displayed with linked covers and for large and medium sizes).', 'cover3d'),
label: __('Back cover text', 'cover3d'),
onChange: function (val) { setAttributes({ back_cover_text: val }) },
type: 'text'
}),
el(SelectControl, {
React.createElement(SelectControl, {
value: props.attributes.back_cover_icon_type,
label: __( 'Back cover icon', 'cover3d' ),
onChange: function(val) { setAttributes({back_cover_icon_type: val}) },
label: __('Back cover icon', 'cover3d'),
onChange: function (val) { setAttributes({ back_cover_icon_type: val }) },
options: [
{ value: '', label: '-' },
{ value: 'download', label: __( 'Download', 'cover3d') },
{ value: 'buy', label: __( 'Buy', 'cover3d') }
{ value: 'download', label: __('Download', 'cover3d') },
{ value: 'buy', label: __('Buy', 'cover3d') }
]
}),
pgColorControl('back_cover_color', setAttributes, props, __( 'Back cover color', 'cover3d'), ''),

pgColorControl('back_cover_bkg_color', setAttributes, props, __( 'Back cover background', 'cover3d'), ''),

])
)
]
)

]);
pgColorControl('back_cover_color', setAttributes, props, __('Back cover color', 'cover3d'), ''),
pgColorControl('back_cover_bkg_color', setAttributes, props, __('Back cover background', 'cover3d'), ''),
] )
)
]
)
);
},

save: function(props) {
Expand Down
6 changes: 3 additions & 3 deletions blocks/book/book.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@
<?php echo wp_strip_all_tags( $color_styles ); // Echo the color styles ?>
<?php echo '</style>'; // Close the style tag. ?>
<div class="book-cover-wrapper">
<?php if ($book_link['url']): // If a link was added. ?>
<a class="book-cover-link" href="<?php echo ( ! empty( $_GET['context'] ) && $_GET['context'] === 'edit' ) ? 'javascript:void()' : esc_url( PG_Blocks::getLinkUrl( $args, 'book_cover_link' ) ) ?>" id="<?php echo "book-cover-link-" . esc_attr( $block_id ) ?>" aria-labelledby="<?php echo "book-cover-label-" . esc_attr( $block_id ) ?>">
<?php if ( $book_link['url'] && empty( $_GET['context'] ) ) : // If a link was added. ?>
<a class="book-cover-link" href="<?php echo esc_url( PG_Blocks::getLinkUrl( $args, 'book_cover_link' ) ) ?>" id="<?php echo "book-cover-link-" . esc_attr( $block_id ) ?>" aria-labelledby="<?php echo "book-cover-label-" . esc_attr( $block_id ) ?>">
<?php endif; ?>
<div class="book-cover-container" id="<?php echo "book-cover-container-" . esc_attr( $block_id ) ?>">
<div class="book-cover-image" data-icon="<?php echo esc_attr( PG_Blocks::getAttribute( $args, 'back_cover_icon_type' ) ) ?>" data-size="<?php echo esc_attr( PG_Blocks::getAttribute( $args, 'book_size' ) ) ?>">
Expand All @@ -130,7 +130,7 @@ class="book-cover-image-file"
</div>
</div>
</div>
<?php if ( $book_link['url'] ): ?>
<?php if ( $book_link['url'] && empty( $_GET['context'] ) ) : // If a link was added. ?>
</a>
<?php echo '<span id="book-cover-label-' . esc_attr( $block_id ) . '" class="book-cover-sr-only">' . sprintf(__('%s', 'cover3d'), esc_html( $img_alt ) ) . '</span>';
endif; ?>
Expand Down
2 changes: 1 addition & 1 deletion blocks/book/book_register.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,6 @@
'book_cover_link' => array('post_id' => 0, 'url' => '#void', 'post_type' => '', 'title' => ''), 'book_size' => 'big', 'back_cover_text' => __( 'Buy', 'cover3d'), 'back_cover_icon_type' => 'download', 'back_cover_color' => '', 'back_cover_bkg_color' => '', 'book_cover_img' => array('id' => 0, 'url' => esc_url( COVER3D_URL . '/assets/cover.png' ), 'size' => '', 'svg' => '', 'alt' => null)
),
'dynamic' => true,
'version' => '0.2.0',
'version' => '0.3.0',
'api_version' => '3'
) );
4 changes: 4 additions & 0 deletions blocks/pg-blocks-controls.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,7 @@
max-height: 100px;
max-width: 100%;
}

.components-panel > .components-panel__body > div.components-panel__row:nth-of-type(2) > button:nth-of-type(2) {
text-align: right;
}
2 changes: 1 addition & 1 deletion cover3d.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* Plugin Name: Cover3D
* Plugin URI: https://github.com/EpicoStudio/cover3d
* Description: A block that displays a 3D book cover, animated when you mouse over it.
* Version: 0.2.0
* Version: 0.3.0
* Requires at least: 5.9
* Requires PHP: 7.0
* Author: Márcio Duarte
Expand Down
5 changes: 4 additions & 1 deletion readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Tags: cover, 3d, book cover, lead magnet, block
Tested up to: 6.3
Requires at least: 5.9
Requires PHP: 7.0
Stable tag: 0.2.0
Stable tag: 0.3.0
License: GPL 2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Donate link: https://ubr.link/donate-wp
Expand Down Expand Up @@ -78,6 +78,9 @@ You can help with a [donation](https://ubr.link/donate-wp), by [visiting our web

== Changelog ==

= 0.3.0 =
* Removing the book link while editing the block in the editor.

= 0.2.0 =
* Upgrading the `api_version` on the block registration.

Expand Down

0 comments on commit 434ae48

Please sign in to comment.