Skip to content

Commit

Permalink
Eoxia#21 [Blocks] add: sticky gap
Browse files Browse the repository at this point in the history
  • Loading branch information
@eoxia-amandine
eoxia-amandine committed Nov 27, 2024
1 parent 41bc461 commit 56f2879
Show file tree
Hide file tree
Showing 10 changed files with 246 additions and 30 deletions.
2 changes: 1 addition & 1 deletion blocks/build/eo-sticky/index.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2cfd7c1ab552e93aade2');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '4a88043ba9ae301315f0');
14 changes: 7 additions & 7 deletions blocks/build/eo-sticky/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion blocks/build/eo-sticky/index.js.map
View file

Large diffs are not rendered by default.

20 changes: 18 additions & 2 deletions blocks/build/eo-sticky/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,25 @@
}

$contentPosition = ! empty( $attributes['contentPosition'] ) ? $attributes['contentPosition'] : 'top right';
$contentPosition = 'is-position-' . str_replace( ' ', '-', $attributes['contentPosition'] );
$contentPosition = 'is-position-' . str_replace( ' ', '-', $contentPosition );

$horizontalGapPercent = ! empty( $attributes['horizontalGapPercent'] ) ? $attributes['horizontalGapPercent'] : 0;
$horizontalGapPercent = 'is-gap-horizontal-' . str_replace( ' ', '-', $horizontalGapPercent );
$verticalGapPercent = ! empty( $attributes['verticalGapPercent'] ) ? $attributes['verticalGapPercent'] : 0;
$verticalGapPercent = 'is-gap-vertical-' . str_replace( ' ', '-', $verticalGapPercent );

$blockClass = $contentPosition . ' ' . $horizontalGapPercent . ' ' . $verticalGapPercent;

//$blockStyle = sprintf(
// 'transform: translateX(%s%%); transform: translateY(%s%%);',
// esc_attr( $horizontalGapPercent ),
// esc_attr( $verticalGapPercent )
//);
?>

<div <?php echo wp_kses_data( get_block_wrapper_attributes( array( 'class' => esc_attr( $contentPosition ) ) ) ); ?>>
<div <?php echo wp_kses_data( get_block_wrapper_attributes( array(
'class' => esc_attr( $blockClass),
// 'style' => $blockStyle
) ) ); ?>>
<?php echo wp_kses_post( $content ); ?>
</div>
82 changes: 79 additions & 3 deletions blocks/build/eo-sticky/style-index-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,91 @@
transform: translateY(-50%);
}
.wp-block-eo-sticky.is-position-bottom-left {
bottom: 10%;
bottom: 0;
right: 0;
}
.wp-block-eo-sticky.is-position-bottom-center {
bottom: 10%;
bottom: 0;
right: 50%;
transform: translateX(50%);
}
.wp-block-eo-sticky.is-position-bottom-right {
bottom: 10%;
bottom: 0;
left: 0;
}

/** Vertical & Horizontal Gap */
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-1 {
top: 1em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-2 {
top: 2em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-3 {
top: 3em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-4 {
top: 4em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-5 {
top: 5em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-6 {
top: 6em;
}

[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-1 {
bottom: 1em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-2 {
bottom: 2em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-3 {
bottom: 3em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-4 {
bottom: 4em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-5 {
bottom: 5em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-6 {
bottom: 6em;
}

.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-1 {
right: 1em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-2 {
right: 2em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-3 {
right: 3em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-4 {
right: 4em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-5 {
right: 5em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-6 {
right: 6em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-1 {
left: 1em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-2 {
left: 2em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-3 {
left: 3em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-4 {
left: 4em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-5 {
left: 5em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-6 {
left: 6em;
}
82 changes: 79 additions & 3 deletions blocks/build/eo-sticky/style-index.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion blocks/build/eo-sticky/style-index.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions blocks/src/eo-sticky/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import './scss/editor.scss';
* @return {Element} Element to render.
*/
export default function Edit( { attributes, setAttributes } ) {
const gapPercentTooltip = value => `${value}%`;
const gapPercentTooltip = value => `${value}em`;
const titleStyle = {
fontSize: '11px',
fontWeight: '500',
Expand Down Expand Up @@ -102,25 +102,25 @@ export default function Edit( { attributes, setAttributes } ) {
</PanelBody>
<PanelBody title={ __( 'Gap Offset', 'eo-blocks' ) }>
<RangeControl
label={ __( 'Horizontal Gap offset (%)', 'eo-blocks' ) }
label={ __( 'Horizontal Gap offset (em)', 'eo-blocks' ) }
help={ __( 'Offset of the sticky from the edge of the screen', 'eo-blocks' ) }
beforeIcon={ sidesHorizontal }
step={10}
step={1}
value={attributes.horizontalGapPercent || 0}
onChange={(value) => setAttributes({horizontalGapPercent: value})}
min={0}
max={100}
max={6}
renderTooltipContent={gapPercentTooltip}
/>
<RangeControl
label={ __( 'Vertical Gap offset (%)', 'eo-blocks' ) }
label={ __( 'Vertical Gap offset (em)', 'eo-blocks' ) }
help={ __( 'Offset of the sticky from the edge of the screen', 'eo-blocks' ) }
beforeIcon={ sidesVertical }
step={10}
step={1}
value={attributes.verticalGapPercent || 0}
onChange={(value) => setAttributes({verticalGapPercent: value})}
min={0}
max={100}
max={6}
renderTooltipContent={gapPercentTooltip}
/>
</PanelBody>
Expand Down
20 changes: 18 additions & 2 deletions blocks/src/eo-sticky/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,25 @@
}

$contentPosition = ! empty( $attributes['contentPosition'] ) ? $attributes['contentPosition'] : 'top right';
$contentPosition = 'is-position-' . str_replace( ' ', '-', $attributes['contentPosition'] );
$contentPosition = 'is-position-' . str_replace( ' ', '-', $contentPosition );

$horizontalGapPercent = ! empty( $attributes['horizontalGapPercent'] ) ? $attributes['horizontalGapPercent'] : 0;
$horizontalGapPercent = 'is-gap-horizontal-' . str_replace( ' ', '-', $horizontalGapPercent );
$verticalGapPercent = ! empty( $attributes['verticalGapPercent'] ) ? $attributes['verticalGapPercent'] : 0;
$verticalGapPercent = 'is-gap-vertical-' . str_replace( ' ', '-', $verticalGapPercent );

$blockClass = $contentPosition . ' ' . $horizontalGapPercent . ' ' . $verticalGapPercent;

//$blockStyle = sprintf(
// 'transform: translateX(%s%%); transform: translateY(%s%%);',
// esc_attr( $horizontalGapPercent ),
// esc_attr( $verticalGapPercent )
//);
?>

<div <?php echo wp_kses_data( get_block_wrapper_attributes( array( 'class' => esc_attr( $contentPosition ) ) ) ); ?>>
<div <?php echo wp_kses_data( get_block_wrapper_attributes( array(
'class' => esc_attr( $blockClass),
// 'style' => $blockStyle
) ) ); ?>>
<?php echo wp_kses_post( $content ); ?>
</div>
Loading

0 comments on commit 56f2879

Please sign in to comment.