Skip to content

Commit

Permalink
Adding responsive endpoints.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronaldhuereca
ronaldhuereca committed Aug 3, 2024
1 parent 57926e2 commit 20ee1d3
Show file tree
Hide file tree
Showing 9 changed files with 115 additions and 18 deletions.
2 changes: 1 addition & 1 deletion build/index.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-url'), 'version' => '910ff209294daf9be4bb');
<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-url'), 'version' => 'd1427e940782d307549c');
43 changes: 41 additions & 2 deletions build/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 build/index.css.map
View file

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions build/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1412,7 +1412,7 @@ var PhotoCaptionBlock = function PhotoCaptionBlock(props) {
key: 'link-color-caption',
onChange: function onChange(slug, newValue) {
setAttributes({
captionTextColor: newValue
captionLinkColor: newValue
});
},
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Link Color', 'photo-block'),
Expand Down Expand Up @@ -1840,9 +1840,12 @@ var PhotoCaptionBlock = function PhotoCaptionBlock(props) {
ref: setCaptionInputRef
})));
}
return /*#__PURE__*/React.createElement("figcaption", _extends({
id: uniqueId
}, innerBlockProps));
return /*#__PURE__*/React.createElement("figcaption", {
id: uniqueId,
className: figClasses
}, /*#__PURE__*/React.createElement("div", _extends({
className: "dlx-photo-block__caption-inner"
}, innerBlockProps)));
};

// Set the local inspector controls.
Expand Down
2 changes: 1 addition & 1 deletion build/index.js.map
View file

Large diffs are not rendered by default.

18 changes: 18 additions & 0 deletions includes/Blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,15 @@ public static function caption_frontend( $attributes, $innerblocks_content, $blo
} else {
$caption_hover_overlay_styles[] = 'overlay-fade';
}
if ( (bool) $attributes['hideOnMobile'] ) {
$caption_hover_overlay_styles[] = 'hide-on-mobile';
}
if ( (bool) $attributes['hideOnTablet'] ) {
$caption_hover_overlay_styles[] = 'hide-on-tablet';
}
if ( (bool) $attributes['hideOnDesktop'] ) {
$caption_hover_overlay_styles[] = 'hide-on-desktop';
}

/**
* Filter the caption overlay styles.
Expand Down Expand Up @@ -827,6 +836,15 @@ function ( $v, $k ) {
if ( $has_global_style ) {
$section_css_classes[] = $global_style_css_class;
}
if ( (bool) $attributes['hideOnMobile'] ) {
$section_css_classes[] = 'hide-on-mobile';
}
if ( (bool) $attributes['hideOnTablet'] ) {
$section_css_classes[] = 'hide-on-tablet';
}
if ( (bool) $attributes['hideOnDesktop'] ) {
$section_css_classes[] = 'hide-on-desktop';
}

/**
* Filter the section CSS classes.
Expand Down
10 changes: 5 additions & 5 deletions includes/Functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,11 +566,11 @@ public static function generate_photo_block_caption_css( $attributes, $unique_id
'figcaption',
$is_class
);
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-text-color', $attributes['captionTextColor'] );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-accent-color', $attributes['captionAccentColor'] );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-secondary-color', $attributes['captionSecondaryColor'] );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-font-family', $attributes['captionTextFontFamily'] );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-headings-font-family', $attributes['captionHeadingsFontFamily'] );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-text-color', $attributes['captionTextColor'], '--photo-block-caption-text-color' );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-accent-color', $attributes['captionAccentColor'], '--photo-block-caption-accent-color' );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-secondary-color', $attributes['captionSecondaryColor'], '--photo-block-caption-secondary-color' );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-font-family', $attributes['captionTextFontFamily'], '--photo-block-caption-font-family' );
Functions::add_css_property( $smart_styles, '--dlx-photo-block__caption-headings-font-family', $attributes['captionHeadingsFontFamily'], '--photo-block-caption-headings-font-family' );
Functions::build_font_size_css( $smart_styles, $attributes['captionBaseFontSize'], '--dlx-photo-block__caption-font-size' );
$css_output .= $smart_styles->get_css();
}
Expand Down
8 changes: 6 additions & 2 deletions src/blocks/photo-caption-block/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -813,7 +813,7 @@ const PhotoCaptionBlock = ( props ) => {
value={ captionLinkColor }
key={ 'link-color-caption' }
onChange={ ( slug, newValue ) => {
setAttributes( { captionTextColor: newValue } );
setAttributes( { captionLinkColor: newValue } );
} }
label={ __( 'Link Color', 'photo-block' ) }
defaultColors={ photoBlock.palette }
Expand Down Expand Up @@ -1362,7 +1362,11 @@ const PhotoCaptionBlock = ( props ) => {
</figcaption>
);
}
return <figcaption id={ uniqueId } { ...innerBlockProps } />;
return (
<figcaption id={ uniqueId } className={ figClasses } >
<div className="dlx-photo-block__caption-inner" { ...innerBlockProps } />
</figcaption>
);
};

// Set the local inspector controls.
Expand Down
37 changes: 35 additions & 2 deletions src/scss/block-backend-frontend.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ figcaption.dlx-photo-block__caption {
height: 100%;
}
figcaption.dlx-photo-block__caption:not(.has-smart-styles) .dlx-photo-block__caption-inner {
display: flex;
align-items: center;

&.aligncenter {
Expand Down Expand Up @@ -426,7 +425,6 @@ figcaption.dlx-photo-block__caption.has-smart-styles .dlx-photo-block__caption-i
}

figcaption .dlx-photo-block__caption-inner {
display: flex;
flex-direction: column;
}

Expand Down Expand Up @@ -491,6 +489,9 @@ figcaption.dlx-photo-block__caption.has-smart-styles .dlx-photo-block__caption-i
}
}
}
.dlx-photo-caption-block__inner-blocks {
z-index: 20;
}
.dlx-photo-block__caption-wrapper figcaption.dlx-photo-block__caption .dlx-photo-block__caption-inner {
width: var( --photo-block-caption-width, 100% );
height: var( --photo-block-caption-height, unset );
Expand Down Expand Up @@ -607,4 +608,36 @@ figcaption.dlx-photo-block__caption.has-smart-styles .dlx-photo-block__caption-i
}
.dlx-photo-block__image:not(.has-css-gram) {
filter: blur( var( --photo-block-blur, 0 ) );
}

/* Hide on Desktop */
.dlx-photo-block__container.hide-on-mobile {
@media (max-width: 768px) {
display: none;
}
}
.dlx-photo-block__container.hide-on-desktop {
@media (min-width: 769px) {
display: none;
}
}
.dlx-photo-block__container.hide-on-tablet {
@media (min-width: 769px) and (max-width: 1024px) {
display: none;
}
}
.dlx-photo-block__caption-wrapper.hide-on-mobile {
@media (max-width: 768px) {
display: none;
}
}
.dlx-photo-block__caption-wrapper.hide-on-desktop {
@media (min-width: 769px) {
display: none;
}
}
.dlx-photo-block__caption-wrapper.hide-on-tablet {
@media (min-width: 769px) and (max-width: 1024px) {
display: none;
}
}

0 comments on commit 20ee1d3

Please sign in to comment.